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.

Posted by rigust