Bättre responsiva bilder

Bilder på webben har fungerat likadant ända sedan 1993. Det har ändrat på sig de senaste månaderna, och sedan oktober förra året har vi i våra nya teman Aficionado och Fabrikk levererat responsiva bilder till de butiksbesökare som har stöd för detta i sina webbläsare. Responsiva bilder behöver inte aktiveras, men om du följer några enkla råd får du bästa möjliga bilder i din butik:

  • Spara alltid artikelbilder i JPEG.
  • Spara dina bilder i hög upplösning. Väldigt hög. En bredd på 1500px är bra, men 3000px eller mer skadar inte.
  • Behåll en hög kvalité-inställning när du sparar JPEG-bilder.

Vi har prioriterat enkelheten och användarvänligheten i vår lösning. Du behöver inte bry dig om filstorlek, rätt kvalité och att anpassa upplösningen till designen. Allt det sköts automatiskt. (Det här innebär också att du inte ska använda Photoshops ”Spara för webben” och liknande ”smarta” verktyg). Ge oss bästa möjliga bilder att utgå ifrån, så sköter Textalk Webshop resten!

Vad vi menar med responsiva bilder

När man säger ”responsivt” tänker nog de flesta på ”mobilanpassat”. Det är en del av responsiv design, men responsivt är så mycket mer. Responsiv design handlar om att reagera på besökarens unika förutsättningar. Som vi ska se är bilder är ett bra exempel på detta.

När vi skickar bilder över internet har vi två motstridiga intressen:

  • Bilden ska se bra ut. Detta innebär hög upplösning och hög kvalité, vilket medför stor filstorlek.
  • Det ska gå snabbt att ladda ner bilden, vilken kräver liten filstorlek och därmed låg kvalité och låg upplösning.

Utmaningen är att hitta en bra balans. Den moderna webben har en enorm variation när det gäller både internetuppkopplingar och skärmar. Vem optimerar man för? Vad är den optimala balansen?

Förr var vi tvugna att erbjuda samma bild till alla, oavsett skärm och internetuppkoppling. Men de flesta moderna webbläsare (Chrome, Firefox, Safari och Edge, m.fl.) kan ta en lista på flera olika bildalternativ, och kan sedan avgöra vilken bild som är bäst att ladda ner just nu. Webbläsaren kan ta hänsyn till bandbredd, skärmstorlek och användarens egna inställningar. Det är detta vi kallar för responsiva bilder – att kunna leverera bilder som svarar mot användaren unika behov.

path4234

I praktiken innebär det här att för varje uppladdad bild genererar vi runt 5 till 9 alternativ med olika upplösning och olika JPEG-kvalité. Att göra det här för hand skulle vara krångligt och tidskrävande. Därför har vi automatiserat det. Det är också därför vi vill att du laddar upp stora bilder i hög kvalité – vi minskar ner dem till rätt storlek, men vi kan inte förbättra och förstora upp en liten bild.

(För den som är intresserad av HTML-standarden kan jag tipsa om ”Srcset and sizes” på ericportis.com).

Referenspixlar och fysiska pixlar

Vad är det som gör att vi frågar efter 1500px i bredd, när butikens bilder inte är bredare än runt 500px? Svaret heter pixeldensitet, och tar sin början 2010 när Apple släppte iPhone 4. Den kom med vad Apple kallar för en Retina-skärm. Retina-skärmen hade dubbelt så många pixlar på höjden och bredden än föregångaren. Samtidigt gjorde man alla ikoner, texter etc dubbelt så många pixlar höga och breda. Resultatet blir en mycket klarare och skarpare bild.

I samband med detta får vi två olika pixelbegrepp: fysiska pixlar och referenspixlar (ibland kallas de även punkter eller CSS-pixlar). En referenspixel i en iPhone 4 består av 2×2 fysiska pixlar. Det innebär att om en bild från din webshop ska ritas ut 100 pixlar bred, använder iPhone 4-skärmen 200 fysiska pixlar på bredden istället. Med andra ord kan du ge den en bild med fyrdubbel upplösning (dubbel bredd och dubbel höjd) och få ett mycket bättre resultat.

Numera fungerar skärmar på många nya mobiler och datorer på det här sättet. Det innebär att många skärmar har upp till 9 gånger fler fysiska pixlar än referenspixlar. Det är därför vi frågar efter 1500px breda bilder när webbläsaren säger att bilden behöver vara 500px bred.

JPEG och kvalité

Ett problem med högupplösta bilder är att de blir ohyggligt stora att ladda ner. Som tur är vet vi att det bara är datorer och telefoner med hög pixeldensitet som kommer ladda ner de största bilderna, och då kan vi utnyttja något i JPEG-formatet som kallas för kvalité. Drar man ner kvaltén sjunker filstorleken, men på bekostnad att detaler i bilden succesivt försämras.

Om du har laddat upp för små bilder

Ingenting i din butik har blivit sämre för att bilderna är responsiva. Det enda som händer är att vi inte kan skicka större bilder till dina besökare med hög pixeldensitet. De får allså inte lika skarpa bilder som du kunde fått om bilden hade en högre upplösning.

Det enda du behöver veta om artikelbilder i Textalk Webshop

Produktbilder är en viktig del av din webshop. Vi går igenom de få tekniska saker du behöver veta om digitala bilder, som upplösning, pixlar och filformat. Med lite enkla baskunskaper undviker du att göra enkla misstag och kan lättare sålla mellan goda och dåliga råd.

I våra nya teman har vi gjordet så enkelt som möjligt för dig få bra artikelbilder:

  • Minska aldrig själv på upplösninen på dina bilder när du sparar dem.
  • Spara alltid i JPEG (eller JPG, det är samma sak)
  • Minska aldrig på kvalitéinställningen på dina JPEG-bilder.

Så enkelt är det i Textalk Webshop. Är du nöjd så kan du sluta läsa här, men undrar du varför du ska göra såhär kan du fortsätta läsa.

Upplösning

Har bilden för låg upplösning* blir den suddig. Har bilden för hög upplösning blir filstorleken större utan att bildkvalitén ökar (fler pixlar kräver mer data). Förr var det vanligt att man själv anpassade upplösningen när man sparade sina bilder. Idag använder vi responsiva bilder, vilket innebär att Textalk Webshop skickar olika bilder till olika webbläsare, beroende på användarens skärmstorlek och bandbredd. Har du laddat upp en bild med hög upplösning kan vi enkelt skala ner den, men har du laddat upp en bild kan vi inte skala upp den.

* Upplösning handlar om antalet pixlar. Få pixlar = låg upplösning, många pixlar = hög upplösning.

JPEG-kvalité

JPEG (eller JPG) har en egenskap som kallas för ”kvalité”. Lägre kvalité kan drastiskt minska filstorleken, men för låg kvalité skapar artefakter i bilden. I skärmar med hög pixeldensitet (många pixlar per skärmyta) syns artifakter sämre än i pixlar med lägre pixeldensitet. Textalk Webshop anpassar automatiskt kvalitéinställningen efter behov.