Optimera bilder för mobila enheter
Guide till hur du använder responsiva bilder med srcset i ditt Shoporama-tema för att tillhandahålla optimerade bilder för mobila användare.
Lästid: ca 1-2 minuter
Shopejer
Normalt anger du en bild med en fast storlek. Men mobilanvändare behöver inte en 800px-bild - de kanske bara använder 400px. Med responsiva bilder kan du låta webbläsaren välja rätt storlek.
Automatisk optimering
Shoporama optimerar automatiskt dina bilder:
- WebP-konvertering - bilder konverteras automatiskt till WebP för snabbare laddning
- Skalning - bilderna skalas till önskad storlek via
bildmodifieraren - Kvalitetsjustering - du kan justera JPEG-kvaliteten
Responsiva bilder i teman
I ditt Smarty-tema kan du använda srcset för att tillhandahålla olika storlekar:
<img src="<{$product->getImage()|image:400:400:85}>" srcset="<{$product->getImage()|image:400:400:85}> 400w, <{$product->getImage()|image:800:800:85}> 800w" sizes="(max-width: 640px) 400px, 800px" alt="<{$product->getTitle()}>" >Ändra bild
Syntaxen är:
<{$bild|bild:bredd:höjd:kvalitet}>- Width - önskad bredd i pixlar
- Höjd - önskad höjd i pixlar
- Kvalitet - JPEG-kvalitet 0-100 (rekommenderas: 80-90)
Tips att tänka på
Ladda alltid upp bilder i hög upplösning (minst 1200px). Shoporama kommer att skala ner till önskad storlek. Se bildkvalitet och bildförhållande.
Behöver du hjälp med något? Kontakta oss på support@shoporama.dk.