Responsiva bilder

Lär dig hur du använder responsiva bilder för att förbättra webbplatsens laddtid och mobilanpassning

Responsiva bilder används för att en användare inte ska behöva ladda ner en 2560px bred bild som ska renderas på en mobil som är 414px bred. Scriptet efterfrågar då servern om en mindre version av originalbilden för snabbare nedladdning och rendering.

Vi tar även hänsyn till om användaren sitter på retinaskärm. Om användaren i det här fallet har en retinaskärm med 2x pixeldensitet, så efterfrågar vi servern om en bild med dubbel bredd (828px) för bästa användarupplevelse. Att ladda ner en 828px bred bild istället för en 2560px går mycket snabbare. 

Vi har stöd för att erbjuda användare den exakta pixeloptimerade bilden, men skulle vi göra på detta sätt skulle otroligt många bilder skapas då det finns så många olika enheter, upplösningar och en handfull olika retinaskärmar (pixeldensiteter). Vi har därför valt ett standardintervall på 160px. Så vi erbjuder bilder i bredder som 160px, 320px, 480px, 640px, 800px, 960px, 1120px, 1280px, upp till bildens originalstorlek (i det här fallet 2560px). Så i fallet som ovan skulle en bild på 960px visas för användaren som efterfrågar en bild på 414px med 2x retina (828px).

Vart i butiken finns det stöd för detta? 

Idag har vi stöd för detta i alla produktlistningar och även stöd i de flesta block via drag-och-släpp-block. Nästa mål är att få in stödet för bilder man laddar in via tinymce verktyget.