Optimera bilder för mobila enheter

Mobilanvändare ska inte ladda ner en bild på 1200 pixlar när deras telefon bara visar 400 pixlar. 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 framsidor där det finns många bilder samtidigt.

Hur Shoporama skalar dina bilder

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

• Skalning. Bilderna skalas ner till den exakta storlek som ditt tema begär så att webbläsaren inte behöver arbeta med enorma filer.
• WebP-konvertering. Moderna webbläsare levererar automatiskt WebP-format, som är betydligt mindre än JPG.
• Justering av kvalitet. Du kan styra komprimeringen för att välja balansen mellan filstorlek och skärpa.
• Cachelagring. Skalade bilder sparas så att det bara händer första gången en storlek begärs.

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->getImage() 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 emot fem parametrar, varav de tre sista är valfria:

Responsiva bilder med srcset

Om du vill visa olika storlekar för mobil, surfplatta och dator kombinerar du getSrc() med HTML-attributet srcset. Webbläsaren kommer då automatiskt att välja den storlek som matchar skärmupplösningen:

<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-bredd: 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 bara laddas när kunden scrollar dit.

Exempel: Beskuren produktbild med fast förhållande

Om du vill att alla bilder ska ha samma kvadratiska format, t.ex. i en produktlista, ska du använda skalningstypen box:

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

Exempel: Tvinga WebP och lägre kvalitet

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

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

Vanliga frågor och svar

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

Om du använder ett av Shoporamas standardteman som Delaware är responsiva bilder redan inställda åt dig. Du behöver bara tänka på det om du anpassar temat själv eller bygger ett nytt.

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

Enormt stor. En fullständig produktbild på 1200x1200 kan ta upp hundratals kilobyte, medan en mobilversion på 400x400 vanligtvis är mindre än 50kb. På en mobiltelefon med dålig uppkoppling kan detta vara skillnaden mellan en snabb sida och en kund som lämnar butiken.

Vad är skillnaden mellan fit och box?

fit bevarar bildens originalproportioner och passar in den i den angivna rutan. box fyller hela rutan och beskär det som inte passar. Använd box för enhetliga produktlistor och fit för detaljsidor där hela bilden behöver visas.

Skalas bilderna varje gång sidan visas?

Nej, det gör den inte. Shoporama sparar den skalade bilden första gången den begärs, så att den är snabb vid alla efterföljande besök. Du behöver inte oroa dig för cachelagring.

Kommer jag att straffas i Google PageSpeed för stora bilder?

Ja, om du levererar bilder som är för stora för mobilen. Om du använder srcset och storlekar på rätt sätt kommer du vanligtvis att ta bort varningarna för "Bilder i rätt storlek" i PageSpeed Insights.

Påverkar detta min Google-ranking?

Sidhastighet på mobilen ingår i Googles bedömning. Snabbare bildladdning kan förbättra Core Web Vitals (särskilt LCP), vilket är positivt för SEO. Det är inte magiskt, men det hjälper.

Kan jag göra samma sak med bilder på bloggar eller landningssidor?

Ja, det kan du göra. Alla bildobjekt i Shoporama har getSrc(). Det fungerar på samma sätt för produkter, kategorier, målsidor, blogginlägg och varumärkeslogotyper.

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