Optimera bilder för mobila enheter

Mobilanvändare ska inte behöva ladda ner en bild på 1200px när deras telefon bara visar 400px. Med responsiva bilder låter du webbläsaren välja rätt storlek, så att sidan laddas snabbare och kunden får en bättre upplevelse. Detta är särskilt viktigt på produktlistor och startsidor, där det finns många bilder samtidigt.

Så här skalar Shoporama dina bilder

Shoporama optimerar automatiskt dina produktbilder när de visas i webbutiken:

• Skalning. Bilderna skalas ned till exakt den storlek som ditt tema kräver, så att webbläsaren inte behöver hantera enorma filer.
• WebP-konvertering. Moderna webbläsare får automatiskt WebP-formatet, som är betydligt mindre än JPG.
• Kvalitetsjustering. Du kan styra komprimeringen så att du själv väljer balansen mellan filstorlek och skärpa.
• Caching. Skalade bilder sparas, så att detta endast sker första gången en viss storlek efterfrågas.

Så här skalar du en bild i ditt tema

I ditt Smarty-tema använder du metoden getSrc() på en bild. Den finns på alla bildobjekt, t.ex. $product->getImage(), $category->getImages() och liknande. Den returnerar URL:en till den skalade bilden:

<img src="<{$product->getImage()->getSrc(400, 400)}>" alt="<{$product->getName()}>">

Parametrar för getSrc()

Metoden tar fem parametrar, varav de tre sista är valfria:

Responsiva bilder med srcset

När du vill leverera olika storlekar till mobil, surfplatta och stationär dator kombinerar du getSrc() med HTML-attributet srcset. Webbläsaren väljer då automatiskt den storlek som passar skärmens upplösning:

<img
  src="<{$product->getImage()->getSrc(400, 400)}>"
  srcset="<{$product->getImage()->getSrc(400, 400)}> 400w,
          <{$product->getImage()->getSrc(800, 800)}> 800w,
          <{$product->getImage()->getSrc(1200, 1200)}> 1200w"
  sizes="(max-width: 640px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  alt="<{$product->getName()}>"
  loading="lazy"
>

Tips: Lägg till loading="lazy" på bilder som ligger längre ner på sidan, så att de först laddas när kunden bläddrar dit.

Exempel: Beskuren produktbild med fast bildförhållande

Om du vill ha alla bilder i samma kvadratiska format, t.ex. i en produktlista, använder du skaleringstypen box:

<img src="<{$product->getImage()->getSrc(600, 600, 'box')}>" alt="<{$product->getName()}>">

Exempel: Tvinga WebP och lägre kvalitet

För miniatyrbilder kan du spara en del filstorlek genom att tvinga WebP och sänka kvaliteten något:

<img src="<{$product->getImage()->getSrc(200, 200, 'box', 'webp', 75)}>" alt="">

Vanliga frågor

Måste jag göra något själv, eller sker det automatiskt?

Om du använder ett av Shoporamas standardteman, till exempel Delaware, är responsiva bilder redan konfigurerade åt dig. Du behöver bara tänka på detta om du anpassar temat själv eller bygger ett nytt.

Hur stor skillnad gör det för kundupplevelsen?

Stor. En fullstor produktbild på 1200x1200 kan fylla flera hundra kilobyte, medan en mobilversion på 400x400 vanligtvis fyller under 50 kb. På en mobil med dålig uppkoppling kan det vara skillnaden mellan en snabb sida och en kund som lämnar butiken.

Vad är skillnaden mellan ”fit” och ”box”?

”Fit” behåller bildens ursprungliga proportioner och anpassar den till den angivna rutan. ”Box” fyller hela rutan och beskär det som inte passar in. Använd ”box” för enhetliga produktlistor och ”fit” för detaljsidor där hela bilden ska visas.

Skalas bilderna varje gång sidan visas?

Nej. Shoporama sparar den skalade bilden första gången den begärs, så att det går snabbt vid alla efterföljande besök. Du behöver inte tänka på caching själv.

Blir jag straffad i Google PageSpeed för stora bilder?

Ja, om du levererar för stora bilder till mobilen. Om du använder srcset och sizes på rätt sätt försvinner vanligtvis varningarna om ”Properly size images” i PageSpeed Insights.

Påverkar detta min ranking på Google?

Sidhastigheten på mobilen ingår i Googles bedömning. Snabbare bildinläsning kan förbättra Core Web Vitals (särskilt LCP), vilket är positivt för SEO. Det är ingen magi, men det hjälper.

Kan jag använda samma metod för bilder på bloggar eller landningssidor?

Ja. Alla bildobjekt i Shoporama har getSrc(). Det fungerar på samma sätt för produkter, kategorier, landningssidor, blogginlägg och varumärkeslogotyper.

Behöver du hjälp med att anpassa ditt tema så att bilderna laddas optimalt på mobilen? Skriv till support@shoporama.dk.