Optimalisering av bilder for mobil

Mobilbrukere bør ikke laste ned et bilde på 1200 piksler når telefonen deres bare viser 400 piksler. 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 vises mange bilder samtidig.

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 krever, slik at nettleseren ikke må håndtere enorme filer.
• WebP-konvertering. Moderne nettlesere får automatisk levert WebP-formatet, som er betydelig mindre enn JPG.
• Kvalitetsjustering. Du kan styre komprimeringen, slik at du selv velger balansen mellom filstørrelse og skarphet.
• Caching. Skalerte bilder lagres, slik at prosessen bare skjer første gang en bestemt størrelse blir forespurt.

Slik skalerer du et bilde i temaet ditt

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

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

Parametere for getSrc()

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

Responsive bilder med srcset

Når du vil levere forskjellige størrelser til mobil, nettbrett og stasjonær PC, kombinerer du getSrc() med HTML-attributtet srcset. Nettleseren velger da automatisk den størrelsen som passer til skjermens opplø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: Legg til loading="lazy" på bilder som ligger lenger ned på siden, slik at de først lastes inn når kunden blar ned til dem.

Eksempel: Beskåret produktbilde med fast sideforhold

Hvis du vil ha alle bildene i samme firkantede format, for eksempel i en produktliste, bruk skaleringstypen box:

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

Eksempel: Tving WebP og lavere kvalitet

For miniatyrbilder kan du spare en del filstørrelse ved å tvinge 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å dette hvis du tilpasser temaet selv eller bygger et nytt.

Hvor stor forskjell gjør det for kundeopplevelsen?

Stor. Et fullstendig produktbilde på 1200x1200 kan fylle flere hundre kilobyte, mens en mobilversjon på 400x400 vanligvis fyller under 50 kb. På en mobil med dårlig tilkobling kan det være forskjellen mellom en rask side og en kunde som forlater nettbutikken.

Hva er forskjellen mellom «fit» og «box»?

«Fit» bevarer bildets opprinnelige proporsjoner og tilpasser det til den angitte rammen. «Box» fyller hele rammen og beskjærer det som ikke passer inn. Bruk «box» til ensartede produktlister og «fit» til detaljsider der hele bildet skal vises.

Blir bildene skalert hver gang siden vises?

Nei. Shoporama lagrer det skalerte bildet første gang det blir forespurt, slik at det lastes raskt ved alle påfølgende besøk. Du trenger ikke å tenke på caching selv.

Blir jeg straffet i Google PageSpeed for store bilder?

Ja, hvis du leverer for store bilder til mobil. Hvis du bruker srcset og sizes riktig, fjerner du som regel «Properly size images»-advarsler i PageSpeed Insights.

Påvirker dette rangeringen min på Google?

Sidens hastighet på mobil inngår 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å bilder i bloggen eller på landingssider?

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

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