Optimera bilder för mobila enheter

Mobilbrugere skal ikke downloade et 1200px billede, når deres telefon kun viser 400px. Med responsive billeder lader du browseren vælge den rette størrelse, så siden indlæses hurtigere og kunden får en bedre oplevelse. Det er især vigtigt på produktlister og forsider, hvor der er mange billeder på én gang.

Sådan skalerer Shoporama dine billeder

Shoporama optimerer automatisk dine produktbilleder, når de vises i webshoppen:

• Skalering. Billeder skaleres ned til præcis den størrelse, dit tema beder om, så browseren ikke skal arbejde med kæmpe filer.
• WebP-konvertering. Moderne browsere får automatisk leveret WebP-format, som er en god del mindre end JPG.
• Kvalitetsjustering. Du kan styre kompressionen, så du selv vælger balancen mellem filstørrelse og skarphed.
• Caching. Skalerede billeder gemmes, så det kun sker første gang en størrelse efterspørges.

Sådan skalerer du et billede i dit tema

I dit Smarty-tema bruger du metoden getSrc() på et billede. Den findes på alle billede-objekter, fx $product->getImage(), $category->getImage() og lignende. Den returnerer URL'en til det skalerede billede:

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

Parametre på getSrc()

Metoden tager fem parametre, hvoraf de tre sidste er valgfrie:

Responsive billeder med srcset

Når du vil servere forskellige størrelser til mobil, tablet og desktop, kombinerer du getSrc() med HTML-attributten srcset. Browseren vælger så automatisk den størrelse, der passer til skærmens oplø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"
>

Tip: Tilføj loading="lazy" på billeder, der er længere nede på siden, så de først indlæses, når kunden scroller dertil.

Eksempel: Beskåret produktbillede med fast forhold

Hvis du vil have alle billeder i samme firkantede format, fx på en produktliste, brug skaleringstypen box:

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

Eksempel: Tving WebP og lavere kvalitet

Til thumbnails kan du spare en del filstørrelse ved at tvinge WebP og sætte kvaliteten lidt ned:

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

Ofte stillede spørgsmål

Skal jeg gøre noget selv, eller sker det automatisk?

Hvis du bruger et af Shoporamas standardtemaer som Delaware, er responsive billeder allerede sat op for dig. Du skal kun tænke over det, hvis du selv tilpasser temaet eller bygger et nyt.

Hvor stor en forskel gør det for kundens oplevelse?

Stor. Et fuldt produktbillede på 1200x1200 kan fylde flere hundrede kilobyte, mens en 400x400 mobile-version typisk fylder under 50 kb. På en mobil med dårlig forbindelse kan det være forskellen på en hurtig side og en kunde, der forlader shoppen.

Hvad er forskellen på fit og box?

fit bevarer billedets oprindelige forhold og passer det ind i den angivne kasse. box fylder hele kassen ud og beskærer det, der ikke passer. Brug box til ensartede produktlister og fit til detaljeside, hvor hele billedet skal vises.

Bliver billeder skaleret hver gang siden vises?

Nej. Shoporama gemmer det skalerede billede første gang det efterspørges, så det går hurtigt på alle efterfølgende besøg. Du skal ikke selv tænke over caching.

Får jeg straffet i Google PageSpeed for store billeder?

Ja, hvis du leverer for store billeder til mobil. Bruger du srcset og sizes rigtigt, fjerner du som regel "Properly size images"-advarsler i PageSpeed Insights.

Påvirker dette mit ranking på Google?

Sidehastighed på mobil indgår i Googles vurdering. Hurtigere billedindlæsning kan forbedre Core Web Vitals (især LCP), hvilket er positivt for SEO. Det er ikke trylleri, men det hjælper.

Kan jeg bruge det samme på blog- eller landingssidebilleder?

Ja. Alle billede-objekter i Shoporama har getSrc(). Det fungerer ens for produkter, kategorier, landingssider, blogindlæg og brand-logoer.

Har du brug for hjælp til at tilpasse dit tema, så billederne loader optimalt på mobil? Skriv til support@shoporama.dk.