Responsiva bilder

Lär dig hur responsiva bilder fungerar i Vendre. Snabbare laddtider, bättre mobilupplevelse och skarpa bilder på retina-skärmar – allt du behöver veta för att optimera butikens bilder.

Vill du att din butik ska ladda snabbt och fungera bra på både dator och mobil? Med responsiva bilder säkerställer du att rätt bildstorlek levereras beroende på användarens enhet och skärmupplösning. Här förklarar vi hur det fungerar i Vendre och vad du behöver tänka på.

Vad är responsiva bilder?

Responsiva bilder används för att en användare inte ska behöva ladda ner en alltför stor bild på en liten skärm. Till exempel behöver en mobilanvändare med en skärm på 414 pixlar inte ladda ner en bild som är 2560 pixlar bred.

I stället efterfrågar scriptet på servern en mindre version av originalbilden, vilket gör att sidan laddar snabbare och användaren får en bättre upplevelse.

Retina-skärmar och pixeltäthet

Om en användare har en retina-skärm med 2x pixeldensitet efterfrågas en bild med dubbla måttet för att bibehålla skärpan.

Exempel:

• En mobil med 414 pixlars bredd och 2x retina > efterfrågar en bild på 828 pixlar i bredd.
• Att ladda en 828px-bild i stället för en 2560px-bild går mycket snabbare, samtidigt som bildkvaliteten blir skarp på skärmen.

Vilka bildstorlekar används?

För att undvika att skapa orimligt många bildversioner används ett standardintervall på 160 pixlar. Det betyder att systemet genererar bilder i fasta steg, exempelvis:

160px, 320px, 480px, 640px, 800px, 960px, 1120px, 1280px – upp till bildens originalstorlek (i detta fall 2560px).

Om en användare har en skärm på 414px med 2x retina (828px), levereras en 960px-bild eftersom den är närmast det efterfrågade måttet.

Vart i butiken finns stöd för detta? Det finns stöd för responsiva bilder i:

• Alla produktlistningar
• De flesta block som läggs till via drag & drop-redigeraren

Nästa steg är att utöka stödet även för bilder som laddas upp via TinyMCE-verktyget.

Varför är responsiva bilder viktiga?

• Snabbare laddtid: Mindre bildfiler gör att sidor laddas snabbare.
• Bättre mobilupplevelse: Rätt storlek levereras beroende på skärm.
• Hög kvalitet på retina-skärmar: Bilder blir skarpa även på högupplösta skärmar.
• SEO-fördelar: Google premierar webbplatser med bra prestanda och mobilanpassning.