Hva er bildeoptimalisering? 8 tips til nettsiden din

I en verden der kundene forventer umiddelbar respons, er det avgjørende at en nettbutikk laster raskt. Responsive bilder kan bidra til kortere innlastingstid og bedre konvertering.

Bildekvalitet er viktig for å sikre høy konvertering, men bildeoptimalisering er avgjørende både for brukeropplevelsen og for SEO i nettbutikken din. Det å optimalisere bilder kan ha stor effekt når det gjelder å styrke merkevaren din til å tiltrekke kunder som søker i Google Bilder.

Hva er bildeoptimalisering?

Bildeoptimalisering betyr å sørge for at bildene dine ser feilfrie ut både på PC og mobil, uten å svekke ytelsen på nettstedet. Det innebærer å tilpasse bildeformat, dimensjoner og oppløsning til enheten, samtidig som kvaliteten bevares.

Tre hovedelementer spiller inn her:

1. Bildefilformat
2. Bildedimensjoner (høyde og bredde)
3. Skjermoppløsning

Hvorfor bør du optimalisere bilder?

Bilder er en viktig del av en god handleopplevelse på nett. Kundene kjøper ikke produktene dine hvis de ikke kan se dem ordentlig. Data fra HTTP Archive viser at uoptimaliserte bilder i snitt utgjør litt under 38 % av den totale sidevekten på mobil.

Bildeoptimalisering reduserer sidevekten og er en sentral del av godt nettdesign for e-handel. Det gir blant annet disse fordelene:

Balanse mellom hastighet og kvalitet

Bildeoptimalisering for nett og mobil handler om å finne riktig balanse mellom hastighet og kvalitet. I netthandel er det viktig å vise bilder som ser bra ut. Det gir en bedre opplevelse for dem som ser i butikken din.

Google har antydet at nettstedshastighet er ett av signalene algoritmen bruker for å rangere sider. En treg side gjør at søkemotorer gjennomsøker færre sider innenfor crawl-budsjettet sitt, noe som kan påvirke indekseringen negativt.

Bedre synlighet i søk

Optimaliserte bilder gjør det lettere både for lesere og søkemotorer å forstå nettstedet ditt, og de bidrar til at innholdet kan bli oppdaget på nett. Nyere data viser at bilder vises i 36,7 % av søkene på Google.

Bildeoptimalisering kan hjelpe bildene dine med å rangere i Google Bildesøk, noe som kan gi mer trafikk til nettstedet ditt og styrke merkevaren din.

Slik optimaliserer du bilder for nettet

1. Bruk korte og tydelige bildenavn

Det er veldig enkelt å laste opp bilder til nettstedet ditt og beholde standardnavnene kameraet har gitt dem. Men når det gjelder bilde-SEO, er det viktig å bruke relevante søkeord som kan hjelpe siden din med å rangere i søkemotorer.

Beskrivende filnavn med relevante søkeord er viktig for bildeoptimalisering. Søkemotorer leser ikke bare teksten på nettsiden din, men også filnavnene på bildene dine.

Ta dette bildet som eksempel:

Du kunne brukt det generiske navnet kameraet ga bildet, for eksempel DCMIMAGE10.jpg. Men det er langt bedre å kalle filen 2012-Ford-Mustang-LX-Red.jpg.

Tenk over hvordan kundene dine søker etter produkter på nettstedet ditt. Hvilke navnemønstre bruker de når de søker? I eksempelet over kan bilkjøpere søke etter uttrykk som:

• 2012 Red Ford Mustang LX
• Ford Mustang LX Red 2012
• Red Ford Mustang LX 2012

Se i analysedataene for nettstedet ditt for å finne ut hvilke søkeord kundene bruker for å finne deg. Finn de vanligste navnemønstrene og bruk den samme logikken når du navngir bildefiler.

Hvis du ikke vil gå så grundig til verks, bør du i det minste bruke relevante og nyttige søkeord når du navngir bildene dine, altså være konkret og beskrivende.

Se denne spørsmål og svar-artikkelen fra Moz for å forstå hvorfor det er viktig å navngi bildefilene på nettstedet ditt strategisk. Det kan definitivt forbedre SEO på siden. Det kan også hjelpe sidene og bildene dine med å rangere høyere i søkeresultatene.

2. Optimaliser alt-attributtene nøye

Alt-attributter er tekstalternativet til bilder når en nettleser ikke klarer å vise dem riktig. De brukes også for universell utforming og tilgjengelighet på nett. Selv når bildet vises, kan du ofte se alt-teksten ved å holde markøren over bildet, avhengig av nettleserinnstillingene.

Alt-attributtet gir også SEO-verdi til nettstedet ditt. Når du legger til gode alt-attributter med relevante søkeord på bildene dine, kan det hjelpe deg med å rangere bedre i søkemotorer. Det er fullt mulig at alt-attributter er den beste måten å få produktene dine synlige i både Google Bildesøk og vanlig nettsøk på.

La oss ta en titt på kildekoden til et alt-attributt.

Den viktigste prioriteringen innen bildeoptimalisering er å fylle ut alt-attributtet for hvert produktbilde på nettstedet ditt.

Her er noen enkle regler for alt-attributter:

• Beskriv bildene dine med vanlig språk, på samme måte som du gjorde med filnavnene.
• Hvis du selger produkter med modellnummer eller serienummer, bør du bruke dem i alt-attributtene.
• Ikke fyll alt-attributtene med søkeord (for eksempel alt="ford mustang muskelbil kjøp nå billig beste pris tilbud").
• Ikke bruk alt-attributter for dekorative bilder. Søkemotorer kan straffe deg for overoptimalisering.

Til slutt bør du gjøre en enkel kontroll med jevne mellomrom. Se på kildekoden til nettsidene dine, og sjekk at alt-attributtene fortsatt er der og fortsatt er relevante. Det er fort gjort å overse detaljer når tempoet er høyt.

3. Velg bildedimensjoner og produktvinkler med omhu

Det er vanlig å vise produktet fra flere vinkler. Hvis vi går tilbake til eksempelet med Ford Mustang, ville du neppe nøyd deg med ett eneste bilde av bilen, særlig hvis målet er å selge den. Det er langt bedre å vise bilder av:

• interiøret
• bilen bakfra (særlig spoileren)
• felgene
• motoren (det er tross alt en Mustang)

Den beste måten å få verdi ut av disse ekstra bildene på, er å fylle ut alt-attributtene. Det gjør du ved å lage unike alt-attributter for hvert produktbilde:

• Filnavn: 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg
• Alt-attributt: alt="2012 Ford Mustang LX Red Leather Interior Trim"

• Filnavn: 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg
• Alt-attributt: alt="2012 Ford Mustang LX Red Rear View Air Spoiler"

Poenget er å bygge videre på det grunnleggende alt-attributtet med beskrivelser som gjør at potensielle søkere finner veien til nettstedet ditt.

4. Endre størrelsen på bildene

Du bør håndtere bildene på nettstedet ditt slik at de ser bra ut på alle enheter, særlig på mobil og skjermer med høy oppløsning.

Når du skal tilpasse bildene etter skjermer med høy pikseltetthet, som pakker flere piksler inn på samme fysiske flate som tradisjonelle skjermer, trenger du minst et bilde i 2x-størrelse for at det skal se skarpt ut og ikke kornete. Hvis nettstedet ditt for eksempel har en bildeplass på 200 x 200 piksler, trenger du et bilde på 400 x 400 piksler for å bevare skarpheten på en skjerm med høy oppløsning. Nesten alle mobiltelefoner har nå skjermoppløsning på 2x eller høyere.

Den enkleste måten å få til dette på er å bruke et innholdsleveringsnettverk, eller CDN. Et CDN tar seg av jobben med å endre størrelse på bilder og levere det beste bildeformatet for brukerens enhet. Det forbedrer også lastehastigheten for selve bildefilen, siden serverne ofte står nærmere sluttbrukeren.

Merk 💡 Hvis du er Shopify-forhandler, bruker Shopify-temaet ditt vårt bilde-CDN. Nysgjerrig på hvordan det fungerer? Last opp ditt eget bilde og prøv Shopifys CDN. Hvis du utvikler temaer, kan du finne ut hvordan du skriver kode for responsive bilder i Liquid.

5. Velg riktig bildeformat

Bildeformat er noe av det viktigste å få riktig på nettstedet ditt. Noen filformater gir høyere kvalitet enn andre. Noen tar også mer plass, noe som påvirker innlastingstiden på nettstedet.

Det finnes i hovedsak to typer bildeformater: raster og vektor.

Vektorbilder bygger på matematiske formler. Når du trenger grafikk som skal kunne skaleres til ulike størrelser uten kvalitetstap, bør du bruke vektorgrafikk. Det vanligste vektorformatet er SVG (Scalable Vector Graphics). Det er et ideelt valg for logoer, ikoner og annen enkel grafikk der du trenger klarhet og skarphet, uansett størrelse.

Rasterbilder består av piksler som kan danne svært detaljerte bilder, som fotografier. Jo flere piksler et bilde inneholder, desto større blir det og desto høyere oppløsning får det.

Over tid har det kommet nyere og bedre kodeker for rasterbilder. GIF var for eksempel en tidlig bildekodek for nettet, men kvaliteten var svak fordi komprimeringsteknikken jevnet ut nærliggende piksler. Nyere teknikker koder og komprimerer på måter som er vanskeligere for det menneskelige øyet å oppdage.

Det betyr at vi kan levere bilder med høyere kvalitet og mindre filstørrelse når vi bruker nyere bildeformater. Følgende formater er de mest brukte på nettet i dag:

• JPG: Et mye brukt bildeformat for fotografier. Det bruker tapskomprimering for å redusere filstørrelsen, men ofrer noe kvalitet.
• PNG: Et populært format blant webdesignere fordi det håndterer grafikk med gjennomsiktig bakgrunn. Filtypen beholder alle originaldata når den komprimeres, noe som gjør den godt egnet for grafikk og diagrammer på et nettsted.
• WEBP: Et moderne format laget for nettet. Det støtter både tapskomprimering og tapsfri komprimering, og gir mindre filer enn JPG og PNG, samtidig som kvaliteten er tilsvarende eller bedre.
• AVIF: Det nyeste bildeformatet AVIF komprimerer bilder effektivt med mindre kvalitetstap.

Ikke alle nettlesere støtter alle formater. Her kommer et bilde-CDN til nytte igjen, siden det automatisk kan velge det beste formatet for en bestemt nettleser og konvertere originalbildet ditt. Hvis du ikke bruker et CDN med denne funksjonen, må du bruke <picture>-taggen i HTML-koden din.

Merk 💡 Shopifys CDN registrerer automatisk hvilke filformater en nettleser støtter, og sender det beste alternativet. Det kan for eksempel konvertere bilder til WebP eller AVIF der det støttes, og sende PNG- eller JPEG-bilder som reserve for eldre nettlesere.

6. Bruk bilde-sitemaps

Hvis nettstedet ditt bruker JavaScript-gallerier, bilde-popup eller andre mer avanserte løsninger for å forbedre handleopplevelsen, vil bilde-sitemaps hjelpe Google med å oppdage bildene dine.

Nettcrawlere kan ikke gjennomsøke bilder som ikke er eksplisitt oppgitt i kildekoden på nettsiden. For å gjøre crawlerne oppmerksomme på slike bilder må du derfor oppgi plasseringen deres i et bilde-sitemap.

Du kan legge inn følgende linje i robots.txt-filen din for å vise stien til sitemapet:

Sitemap: http://example.com/sitemap_location.xml

Du kan også sende inn sitemapet til Google via Search Console. Google har mange retningslinjer for publisering av bilder, og de kan hjelpe nettstedet ditt med å rangere høyere i søkeresultatene. I tillegg kan du bruke Google-sitemaps til å gi Google mer informasjon om bildene på nettstedet ditt, noe som kan hjelpe Google med å finne flere av dem enn ellers.

Som Shopify-forhandler får du automatisk et generert sitemap som inkluderer produktbildene dine. Det betyr at bilder på produktsidene dine og andre viktige bilder i bloggen eller samlingene dine, blir synlige for søkemotorer gjennom sitemapet. Det øker sjansen for at bildene dine vises i søkeresultater og driver mer trafikk til nettstedet ditt.

Shopify oppdaterer sitemapet automatisk når nye sider eller produkter legges til, eller eksisterende fjernes. Du trenger derfor aldri å opprette eller oppdatere sitemapet manuelt.

7. Bruk et godt bilde-CDN

Spesialiserte bilde-CDN-er tilbyr funksjoner for bildebehandling, slik at du bare trenger å laste opp ett bilde i høy kvalitet. Deretter endrer de størrelse og format samt mellomlagrer bildene basert på hver enkelt forespørsel.Med Shopifys bilde-CDN blir filstørrelsen automatisk optimalisert når du laster opp bildet. Endringen i kvalitet er ikke synlig for det menneskelige øyet, men den forbedrer sidens innlastingstid. CDN-et registrerer også automatisk hvilke filformater som støttes hos brukeren og tilbyr dynamisk redigering, slik at du kan beskjære og endre bildet uten å miste originalfilen.

Shopify-forhandlere får tilgang til et team med profesjonelle tjenester som kan hjelpe deg med å forbedre hastigheten på nettstedet ditt, samt konverteringsrate og søkemotoroptimalisering.

8. Test bildene dine

Hele poenget med å optimalisere bilder er å bidra til bedre lønnsomhet. Vi har snakket om å redusere filstørrelser og få søkemotorer til å indeksere bildene dine, men hva med å teste hvilke bilder som faktisk får flere kunder til å kjøpe?

• Test hvor mange produktbilder du bør ha per side. Siden innlastingstid kan være en utfordring for enkelte nettbutikker som ikke er driftet på en hostet plattform, kan det hende at færre bilder på en side gir høyere klikkrate og mer salg. Det kan også være at mange bilder per side forbedrer brukeropplevelsen og fører til mer salg. Den eneste måten å finne ut av det på, er å teste.
• Test hvilke vinkler kundene dine foretrekker. Du kan oppleve økt kundelojalitet ved å vise de perspektivene kundene faktisk ønsker å se. En god måte å finne ut av dette på, er å spørre kundene hva de likte best ved produktbildene. Å spørre og snakke med kundene dine er i det hele tatt en god vane. Men bekreft alltid med testing.
• Test hvor mange produkter du bør vise på kategorisider. Er det 10, 20 eller 100 produkter? Test hvor mange produkter du viser på kategorisidene for å se hva som fungerer best for kundene dine.

Verktøy for bildeoptimalisering

Nå som du kjenner til noen av de viktigste prinsippene for bildeoptimalisering, kan vi se på noen verktøy og programtillegg du kan bruke på nettstedet ditt.

Merk at hvis du bruker Shopify eller et spesialisert bilde-CDN, trenger du ikke disse verktøyene. Det ene unntaket er SVGOMG, de fleste bilde-CDN-er tilbyr ikke optimalisering av SVG-filer.

Squoosh

Squoosh er en brukervennlig, nettbasert app for bildekomprimering. Dra og slipp bildet inn i verktøyet, og velg blant optimaliserte bildeformater som JPEG XL, WEBP, PNG og flere.

TinyPNG

TinyPNG er et annet populært verktøy for bildeoptimalisering på nettet. Det bruker smart tapskomprimering for å redusere filstørrelsen på WEBP-, JPEG- og PNG-filer til nettsiden din.

Du kan krympe bilder til apper eller nettbutikken din, og også redusere størrelsen på animerte bilder. Verktøyet fokuserer ikke bare på bildekomprimering, men tilbyr også API-integrasjon og utviklerverktøy for å bygge TinyPNG inn i tilpassede programvareløsninger.

API-et til TinyPNG endrer automatisk størrelse på bilder til miniatyrbilder, fjerner unødvendige deler og legger til mer bakgrunn. Hvis nettstedet ditt kjører på WordPress, finnes det også som et programtillegg.

SVGOMG

SVGOMG er et annet enkelt verktøy for bildeoptimalisering. Det gir deg flere muligheter til å rydde opp i og minimere SVG-filene dine. Last opp filen eller kopier inn kildekoden til SVG-en for å komme i gang. Du kan justere de ulike kontrollene og lage et identisk bilde med lavere filvekt enn originalen.

La bildene være funksjonelle med bildeoptimalisering

Å optimalisere bildene dine er avgjørende for å drive en vellykket nettvirksomhet. Det forbedrer ikke bare hvordan produktene dine ser ut, men bidrar også til en smidig handleopplevelse og gjør det lettere å bli funnet på nett.

En e-handelsplattform som Shopify leverer automatisk bildene dine i best mulig format til dem som besøker nettstedet, slik at du kan øke salget og utvikle virksomheten din på nett.