Produktbilder i nettbutikken

Brit Inger Stokkeland
Butikkeier.no
Published in
5 min readJan 4, 2017

Har du lurt på hva som er viktigst når det kommer til produktbildene som brukes i nettbutikken? Her er svar på noen av de vanligste spørsmålene i forhold til produktbilder.

Apple er blant de beste i klassen til å ha profesjonelle, informative og inspirerende bilder av sine produkter.
Apple er blant de beste i klassen til å ha profesjonelle, informative og inspirerende bilder av sine produkter.

Først, har størrelsen på bildet noe å si?

Ja, men merk at bildestørrelsen i hovedsak er to ting:

  1. Den “visuelle” størrelsen på bildet målt i pixler (f.eks 800 x 450), og
  2. Den “fysiske” størrelsen på bildefilen målt i kB eller MB.

I denne sammenhengen er det det siste — bildefilens fysiske størrelse — som betyr mest. Et produktbilde på 100kB kan ta noen ti-dels sekunder å laste på en normal internett-forbindelse mens et bilde på flere MB fort kan ta noen hundre-dels sekunder, som — spesielt når det er flere bilder på en nettside — kan bety flere sekunder høyere lastetid.

Alle bilder som brukes i nettbutikken bør derfor optimaliseres før de lastes opp på produkt-, kategori- eller innholdssider. Generell anbefaling for bildestørrelse i en nettbutikk er 800–1200 px i bredden og maksimalt et par hundre kB i størrelse — helst et sted mellom 30–100kB.

Vi har skrevet mer detaljert om produktbilder i vår norske Magento brukerdokumentasjon.

Små bilder i filstørrelse = bedre SEO

Lastetid er en av rankingfaktorene hos Google så dersom du har mange store bilder i nettbutikken bør det gjøres en jobb med å optimalisere disse for å minske lastetiden av for eksempel produktsider.

Bør jeg ajourholde Alt-attributten?

Alt-tag er en standard HTML-tag som blant annet brukes dersom et bilde av en eller annen grunn ikke kan lastes inn på en produktside. Da vil det vises en Alt (Alternativ) tekst der bildet skulle vært.

Denne teksten bør alltid fylles ut og skal beskrive hva bildet skulle vist. Alt-tag er også viktig i forhold til Universell Utforming og skjermlesere for de som bruker det, og bør også av denne grunn legges inn for alle bilder.

Matt Cutts i Google forklarer mer rundt Alt-tagen

I Magento kan dette legges til i feltet “Merkelapp”/”Label” for produktbilder, på samme sted som produktbilder lastes opp i Magento.

Alt-tekst på et produktbilde kan gjerne være det samme som produktets tittel, som blant annet Magento designrammeverket PolarCore støtter.

Bruk av Alt-tekst på produktbildene er anbefalt av Google, og derfor også viktig for SEO. Du kan lese mer om dette og mye mer her.

Bør selve filnavnene på bildene navngis fornuftig?

Det er flere ting som spiller inn for at søkemotorene skal kunne tolke hva bildene på en nettside viser. Først og fremst bør bildet plasseres sammen med tekstinnhold som tilhører bildet. Google og andre søkemotorer ser alltid på konteksten på siden, sidetittelen og ankertekst som linker til et bilde for å avgjøre hva som er på bildet, i tillegg til Alt-tekst som nevnt over. Flere søkemotorer har også avanserte funksjoner for å tolke hva som vises direkte på selve bildet.

Alt dette er i all hovedsak det som gjør at et aktuelt produktbilde dukker opp på Google Images Search, som er grunnen til at man fokuserer på SEO i forhold til produktbildene.

Filnavnet på bildene kan med fordel også være korte, beskrivende og “lesbare” for at søkemotorene enda enklere skal kunne forstå hva de inneholder, men dette antas å være en veldig liten (eller ingen) faktor i forhold til SEO og da for eksempel søk på Google Images.

Dette med at filnavnene skal være “SEO-optimaliserte” er litt av det samme man før mange år siden snakket om i forhold til Meta Keywords. Dersom man bare kunne skrevet gode filnavn og så fått bildet rangert høyt på Google Images Search så hadde søkemotoren vært veldig svak.

Merk også at det ikke eksisterer noe modul for automatisk å kunne endre filnavn på produktbilder i Magento, så dette vil være en manuell jobb som må gjøres for hvert enkelt bilde, som deretter lastes opp på produktsiden på nytt. Dersom du har tusenvis av bilder så vil dette være en omfattende jobb.

Trollweb anbefaler å ikke bruke tid på å skrive filnavnene for produktbildene om til “SEO-vennlige filnavn” såfremt man ikke uansett må gjøre denne jobben, og heller bruke denne tiden på andre vesentlig viktigere SEO-oppgaver.

Hvilke filtyper passer best for produktbilder?

Her roter mange, og en av årsakene er at det finnes utallige bildeformater der ute.

Fortsatt er det JPG som er klar anbefaling for produktbilder. JPG er et foto-bildeformat, som produktbilder normalt er.

Grafiske bilder som skisser, diagrammer osv fungerer bra med PNG, og da gjerne 8-bit varianten som ikke tar så mye plass som 24-bit varianten. Merk bare at det kun er PNG 24-bit som støtter transparens, dersom det er behov for.

GIF er et veldig gammelt bildformat som kun støtter inntil 256 farger — altså har det veldig stor begrensning på bildekvalitet. GIF anbefales ikke å bruke til annet enn eventuelt GIF-animasjoner (som kan være veldig effektive i spesielt epost-markedsføring).

Nyere bildeformater som WEBP er også bra, men ikke alle nettlesere støtter slike bildeformater enda så det er ikke noe som anbefales å bruke som standard enda.

Inkludert funksjonalitet for automatisk bildeoptimalisering hos Trollweb

Alle kunder av Trollweb og som kjører på et av hostingmiljøene til Trollweb har som standard støtte for en teknologi kalt mod_pagespeed. Denne har utallige tekniske funksjoner som bidrar til økt hastighet på sidene, som automatisk generering av blant annet WEBP bildefiler for alle PNG- og JPG bildefiler. Løsningen finner ut om nettleseren til hver enkelt besøkende støtter for eksempel WEBP- og dersom den gjør det så vil løsningen automatisk vise WEBP-versjonen av det aktuelle bildet til brukeren — et bilde som fort kan være komprimert til 30kB mot det orginale JPG-bildet på 80kB (etter JPG-komprimering).

Viser kvalitetsforskjell på komprimert bilde og vanlig - og viser at det er umulig å se noe forskjell

Ha gode og relevante produktbilder

Det viktigste tipset er uansett å passe på å ha gode/profesjonell og informative produktbilder. Litt avhengig av bransje bør man ha minimum et par produktbilder og helst mellom 5–10.

Har du spørsmål til produktbilder?

Ta kontakt med oss!

--

--