Optimalisering av bilder for mobil

Mobilbrukere bør ikke laste ned et bilde på 1200 px når telefonen deres bare viser 400 px. Med responsive bilder lar du nettleseren velge riktig størrelse, slik at siden lastes inn raskere og kunden får en bedre opplevelse. Dette er spesielt viktig på produktlister og forsider der det er mange bilder på en gang.

Slik skalerer Shoporama bildene dine

Shoporama optimaliserer automatisk produktbildene dine når de vises i nettbutikken:

• Skalering. Bildene skaleres ned til nøyaktig den størrelsen temaet ditt ber om, slik at nettleseren ikke trenger å jobbe med store filer.
• WebP-konvertering. Moderne nettlesere leverer automatisk WebP-format, som er en god del mindre enn JPG.
• Justering av kvalitet. Du kan kontrollere komprimeringen for å velge balansen mellom filstørrelse og skarphet.
• Caching. Skalerte bilder lagres slik at det bare skjer første gang du ber om en størrelse.

Slik skalerer du et bilde i temaet ditt

I Smarty-temaet ditt bruker du getSrc() -metoden på et bilde. Den finnes på alle bildeobjekter, f.eks. $product->getImage(), $category->getImage() og lignende. Den returnerer URL-en til det skalerte bildet:

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

Parametere på getSrc()

Metoden tar fem parametere, hvorav de tre siste er valgfrie:

Responsive bilder med srcset

Hvis du vil vise bilder i ulike størrelser for mobil, nettbrett og datamaskin, kan du kombinere getSrc() med HTML-attributtet srcset. Nettleseren vil da automatisk velge den størrelsen som samsvarer med skjermopplø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-width: 640px) 400px, (max-width: 1024px) 800px, 1200px" alt="<{$product->getName()}>" loading="lazy" >

Tips: Legg til loading= "lazy " på bilder som ligger lenger ned på siden, slik at de bare lastes inn når kunden blar dit.

Eksempel: Beskåret produktbilde med fast forhold

Hvis du vil ha alle bildene i samme kvadratiske format, for eksempel på en produktliste, kan du bruke skaleringstypen box:

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

Eksempel: Tving WebP og lavere kvalitet

For miniatyrbilder kan du spare mye filstørrelse ved å tvinge frem WebP og senke kvaliteten litt:

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

Ofte stilte spørsmål

Må jeg gjøre noe selv, eller skjer det automatisk?

Hvis du bruker et av Shoporamas standardtemaer, som Delaware, er responsive bilder allerede satt opp for deg. Du trenger bare å tenke på det hvis du tilpasser temaet selv eller lager et nytt.

Hvor stor forskjell gjør det for kundeopplevelsen?

Enorm. Et produktbilde i full størrelse på 1200x1200 kan ta opp hundrevis av kilobyte, mens en mobilversjon på 400x400 vanligvis er mindre enn 50 kB. På en mobiltelefon med dårlig forbindelse kan dette utgjøre forskjellen mellom en rask side og en kunde som forlater butikken.

Hva er forskjellen mellom fit og box?

fit bevarer de opprinnelige proporsjonene til bildet og tilpasser det til den angitte boksen. box fyller hele boksen og beskjærer det som ikke passer inn. Bruk box for enhetlige produktlister og fit for detaljsider der hele bildet må vises.

Skaleres bildene hver gang siden vises?

Nei, det gjør det ikke. Shoporama lagrer det skalerte bildet første gang det blir bedt om det, slik at det er raskt ved alle påfølgende besøk. Du trenger ikke å bekymre deg for hurtigbufring.

Vil jeg bli straffet i Google PageSpeed for store bilder?

Ja, hvis du leverer bilder som er for store for mobil. Hvis du bruker srcset og størrelser på riktig måte, vil du vanligvis fjerne advarslene om "Riktig størrelse på bilder" i PageSpeed Insights.

Påvirker dette Google-rangeringene mine?

Sidehastighet på mobil er inkludert i Googles vurdering. Raskere innlasting av bilder kan forbedre Core Web Vitals (spesielt LCP), noe som er positivt for SEO. Det er ikke magi, men det hjelper.

Kan jeg bruke det samme på blogg- eller landingssidebilder?

Ja, det kan du. Alle bildeobjekter i Shoporama har getSrc(). Det fungerer på samme måte for produkter, kategorier, destinasjonssider, blogginnlegg og merkevarelogoer.

Trenger du hjelp med å tilpasse temaet ditt slik at bilder lastes inn optimalt på mobil? Skriv til support@shoporama.dk.