Optimalisering av bilder

Viktige punkter for optimalisering av bilder:

Optimalisering av bilder begynner med filnavnet på bildene. Gi bildene meningsfulle og beskrivende filnavn som inkluderer relevante søkeord. For eksempel, i stedet for «IMG_1234.jpg,» bruk «blå-sko-til-menn.jpg». Det er helt fint med særnorske tegn (slik var det ikke for noen år tilbake).

Optimaliser bildestørrelsen ved å redusere filstørrelsen uten å gå på bekostning av bildekvaliteten, det er ingen hensikt å ha en logo på 1000×1000 pixler når du egentlig bare trenger 400x400pixler. Dette bidrar til raskere lasting av nettsiden.

Inkluder en beskrivende alt-tekst (alternativ tekst) for hvert bilde. Dette hjelper søkemotorer med å forstå hva bildet viser og forbedrer tilgjengeligheten for brukere med synshemming. Pass på å inkludere relevante søkeord, men unngå overoptimalisering. I tillegg; bruk også tittel-tagen i bildet. Eksempel:
<img src="/blå-sko-til-menn.jpg" alt="Blå sko til menn" title="Blå sko til menn">
NB. Ikke overoptimaliser!

Velg riktig bildeformat for ulike typer bilder. JPEG er bra for fotografier, PNG for bilder med gjennomsiktighet og SVG for logoer og grafikk. WebP er et moderne format som kombinerer god kvalitet med små filstørrelser. Vi går mer i dybden på filformater litt lengre ned her.

Angi bildestørrelse og dimensjoner i HTML-koden for å forbedre lastetiden og forhindre layoutskifting. Eksempel:
<img src="/blå-sko-til-menn.jpg" alt="Blå sko til menn" title="Blå sko til menn" style="width: 400px; height: 400px;">

Hvis nettstedet ditt har mange (MANGE!) bilder – og i tillegg hvis dem lastes med JavaScript, vurder å lage et eget bildesitemap. Dette hjelper søkemotorene med å finne og indeksere bildene dine mer effektivt. Dette går vi også gjennom i artikkelen Hva er et sitemap og hvorfor du SKAL ha det?

Sørg for at bildene dine er optimalisert for mobilvisning. Bruk responsive bilder som tilpasser seg skjermstørrelsen for en bedre brukeropplevelse.

Optimalisering av bilder, del to:

Bruk gjerne bildetekst: Legg til bildetekst under bildene der det er relevant. Dette gir kontekst for både brukere og søkemotorer, og kan forbedre brukeropplevelsen.

Bruk lazy loading for bilder, slik at de bare lastes når de blir synlige for brukeren. Dette kan forbedre lastetiden for siden og redusere båndbreddebruken.

Plasser bildene i sammenheng med relevant tekst på siden. Søkemotorer vurderer konteksten for å forstå hva bildet handler om, så å ha relevant tekst i nærheten kan være nyttig.

Hvis nettstedet ditt har mange bilder, vurder å bruke et CDN. Dette kan forbedre lastetiden ved å levere bildene fra servere som er nærmere brukeren.

Overdreven bruk av bilder kan føre til tregere lastetider og en mindre optimal brukeropplevelse. Bruk bilder strategisk for å støtte innholdet.

Over tid kan det være lurt å oppdatere bilder som ikke lenger er relevante eller har blitt utdaterte. Dette viser søkemotorer at nettstedet ditt er aktivt og vedlikeholdt.

Google Search Console gir innsikt i hvordan bildene dine presterer. Sjekk rapportene for bildeindeksering og se etter muligheter for forbedringer.

Optimalisering av bilder: filtyper

JPEG (JPG):

Fordeler: God komprimering, noe som gjør filstørrelsene små uten betydelig tap av kvalitet. Det er ideelt for fotografier og bilder med mange farger og detaljer. Bruksområde: Perfekt for bilder som ikke krever gjennomsiktighet, som landskapsbilder og portretter.

PNG:

Fordeler: Støtter gjennomsiktighet og gir høy kvalitet uten tap av detaljer. Filstørrelsene er vanligvis større enn JPEG. Bruksområde: Best for bilder med tekst, logoer, grafikk og bilder som krever gjennomsiktighet.

GIF:

Fordeler: Støtter animasjoner og har en begrenset fargepalett (opptil 256 farger). Egnet for enkle animasjoner og små grafiske elementer. Bruksområde: Brukes ofte for enkle animasjoner, ikoner og grafikk med få farger.

SVG (Scalable Vector Graphics):

Fordeler: Vektorbasert format som kan skaleres til hvilken som helst størrelse uten tap av kvalitet. Støtter også interaktivitet og animasjon. Bruksområde: Ideelt for logoer, ikoner og grafikk som trenger å være skalerbare uten kvalitetsforringelse.

WebP:

Fordeler: Et moderne bildeformat som gir utmerket komprimering med både lossy og lossless alternativer. Det kan også støtte gjennomsiktighet. Bruksområde: Brukes for å redusere filstørrelser og forbedre lastetider på nettsteder. Det er spesielt nyttig for både fotografier og grafikk.

Men vent, er ikke WebP «the shit»?

Jo, egentlig. WebP er faktisk et veldig fornuftig og anbefalt bildeformat for nettbruk, og her er noen grunner til det:

• WebP tilbyr både lossy og lossless kompresjon, noe som gjør det mulig å redusere filstørrelser betydelig uten merkbart tap av kvalitet. Dette bidrar til raskere lastetider på nettstedet.
• WebP-bilder kan opprettholde høy bildekvalitet selv ved lavere filstørrelser, noe som er en stor fordel for brukeropplevelsen og SEO.
• Som PNG, kan WebP også støtte gjennomsiktighet, noe som er nyttig for grafikk og bilder som krever dette.
• WebP kan brukes til å lage animerte bilder, noe som gir mulighet for å bruke én fil i stedet for flere GIF-filer.
• Selv om WebP har vært litt tregere til å få bred støtte enn mer etablerte formater som JPEG og PNG, har de fleste moderne nettlesere (som Chrome, Firefox, Edge og Opera) nå støtte for WebP. Safari har også lagt til støtte for WebP i nyere versjoner.

Så, for å gi en slags oppsummering på filformater: Bruk WebP der du kan, og «etterfyll» med resten der det er nødvendig.