Optimalisering av bilder er en effektiv teknikk for å redusere tiden det tar å laste inn nettsiden din. I denne guiden viser vi deg hvordan du optimaliserer bilder for web med verktøyet GIMP.
Hva er GIMP?
GIMP er en forkortelse for GNU Image Manipulation Program, og er et gratis bilderedigeringsprogram tilgjengelig for Windows, Mac og Linux.
Programmet er åpen kildekode og distribueres under en såkalt GPL-lisens.
Til å være gratis er GIMP helt overlegen, og kan på mange områder sammenlignes med Adobe Photoshop. Programmet anbefales til alle som ikke har budsjett- eller ønsker å investere i dyr programvare for bilderedigering.
Generelle bruksområder:
- Tegning
- Redigering
- Manipulering
- Konvertering
- ..og mye mer!
Besøk den offisielle hjemmesiden til GIMP for å lese mer, og laste ned programmet.
Hvorfor optimalisere bilder for web
Enhver ekspert i webdesign vil kunne fortelle deg at du må bruke bilder for å engasjere leserne dine. Effektiv bruk av bilder er til eksempel helt obligatorisk for å skrive et godt blogginnlegg.
Det mange ikke forteller deg, er at ikke-optimaliserte bilder vil redusere hastigheten på nettstedet ditt dramatisk.
Konskvensen av et tregt nettsted er lavere rangering i søkemotorer, redusert kunde- eller leser-tilfredshet og færre salg.
I følge HTTP Archive utgjør bilder på nettsider 21% av den totale dataoverføringen. Det er ganske mye, og det første du bør se på for å gjøre nettstedet ditt raskere.
Hvordan lagre bilder riktig?
Når du lagrer bilder er det viktig å vurdere oppløsning, bildeformat og komprimering. Om du velger riktig kombinasjon, kan du endre størrelsen dramatisk.
PNG og JPEG er de to mest brukte bildeformatene på nett. Men hvilken du skal bruke, og når?
- JPEG – Brukes når bildet har mye dybde og mange forskjellige farger
- PNG – Brukes for transparente (gjennomsiktig) bilder, grafikk og bilder med få farger
En enkel huskeregel er å bruke JPEG for bilder som har sitt opphav fra et kamera, og PNG for bilder som i hovedsak består av skrift eller tegning.
Les mer om valg av bildeformat, oppløsning og komprimering.
Hvordan optimalisere JPEG med GIMP
GIMP kan optimalisere bilder for web uten ekstra utvidelser eller verktøy. Følg disse stegene for å optimalisere et bilde for web i formatet JPEG.
Steg 1: Åpne bilde
Start GIMP. Velg File > Open fra menyen. Lokaliser bildet på datamaskinen din, klikk på «Open».
Steg 2: Endre oppløsning
Den originale oppløsningen på bildet i vårt eksempel er 4271 x 2848 piksler. Den største oppløsningen vi bruker på våre nettsider er 1024 x 1024 piksler.. med andre ord er bildet mye større enn nødvendig.
Velg Image > Scale Image fra menyen. Skriv inn ønsket oppløsning.
Det er ingen gevinst i å velge en større oppløsning enn nødvendig.
Klikk på «Scale» for å endre oppløsning.
Steg 3: Eksporter bilde
Det neste steget er å eksportere bildet. Velg File > Export as fra menyen. Skriv inn ønsket filnavn på det nye bildet. Klikk på «Export» for å gå videre.
Steg 4: Alternativer for eksport
Du vil nå få opp dialogboksen for å eksportere bilde. Det er her du velger hvordan bildet skal komprimeres, en viktig del av det å optimalisere bilder for web.
Klikk på «Advanced Options» for å se flere alternativ.
Aktiver valget «Show preview in image window». Du vil nå kunne se hvordan valgene du gjør endrer filstørrelse og bildekvalitet (flytt vinduer til siden for å kunne se bildet).
Eksperimenter med alternativer for «Quality» og «Subsampling» til du oppnår ønsket filstørrelse, uten å miste for mye bildekvalitet.
Deaktiver følgende alternativer:
- Save Exif data
- Save thumbnail
- Save XMP data
- Save IPTC data
- Use quality settings from original image
Når du er fornøyd med resultatet, klikk på «Export» for å lagre bildet.
Hvordan optimalisere PNG med GIMP
Formatet PNG har høy kvalitet og kan ikke komprimeres. Derimot kan du gjøre størrelsen mindre ved å endre oppløsning, samt fjerne unødig data fra bildet.
Steg 1: Åpne bilde
Start GIMP. Velg File > Open fra menyen. Lokaliser bildet på datamaskinen din, klikk på «Open».
Steg 2: Endre oppløsning
Den originale oppløsningen på bildet i vårt eksempel er 2000 x 2000 piksler. Den største oppløsningen vi bruker på våre nettsider er 1024 x 1024 piksler.. med andre ord er bildet mye større enn nødvendig.
Velg Image > Scale Image fra menyen. Skriv inn ønsket oppløsning.
Det er ingen gevinst i å velge en større oppløsning enn nødvendig.
Klikk på «Scale» for å endre oppløsning.
Steg 3: Flatten Image
Flatten Image vil fjerne alpha-indeks fra bildet, noe som vanligvis ikke er nødvendig for bilder på web.
Hopp over dette steget hvis bildet ditt er transparent (gjennomsiktig).
Velg Image > Flatten Image fra menyen.
Steg 4: Indexed Colors
Velg Image > Mode > Indexed fra menyen. I stedet for å bruke hele paletten, kan du spare plass ved å til eksempel bare bruke 256 farger.
Velg alternativet «Generate optimum palette» og klikk på «Convert».
Noen ganger kan «Use web-optimized palette» være å foretrekke, dette er noe du kan forsøke på egenhånd.
Hvis du ikke er fornøyd med en endring, kan du angre ved å velge Edit > Undo fra menyen.
Steg 5: Eksporter bilde
Velg File > Export as fra menyen.
Skriv inn ønsket filnavn på det nye bildet. Klikk på «Export» for å gå videre.
Steg 6: Alternativer for eksport
Du vil nå få opp dialogboksen for å eksportere bilde. Det er her du velger hvordan bildet skal komprimeres, en viktig del av det å optimalisere bilder for web.
Hvis bildet ditt er transparent (gjennomsiktig) må du velge pikselformatet «8bpc RGBA» eller «16bpc RGBA». For andre bilder kan du velge «8bpc RGB» eller «16bpc RGB».
Når du er fornøyd med resultatet, klikk på «Export» for å lagre bildet.
Konklusjon
Optimalisering av bilder er en effektiv teknikk for å redusere tiden det tar å laste inn nettsiden din.
I denne guiden har du lært hvordan du optimaliserer bilder med GIMP, et helt gratis verktøy for bilderedigering.
Når du jobber med bilderedigering kan det være lurt å forsøke deg frem med ulike innstillinger.
Har du spørsmål kan du benytte kommentarfeltet under, eller bruke kontaktskjemaet vårt. Vi svarer på alle henvendelser.