Optimalisering av bilder for mobil
Veiledning i bruk av responsive bilder med srcset i Shoporama-temaet ditt for å gi optimaliserte bilder for mobilbrukere.
Normalt angir du et bilde med en fast størrelse. Men mobilbrukere trenger ikke et bilde på 800 px - de bruker kanskje bare 400 px. Med responsive bilder kan du la nettleseren velge riktig størrelse.
Automatisk optimalisering
Shoporama optimaliserer bildene dine automatisk:
- WebP-konvertering - bilder konverteres automatisk til WebP for raskere innlasting
- Skalering - bildene skaleres til ønsket størrelse via bildemodifikatoren
- Kvalitetsjustering - du kan justere JPEG-kvaliteten
Responsive bilder i temaer
I Smarty-temaet ditt kan du bruke srcset til å angi forskjellige størrelser:
<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()}>" >" srcset="<{$product->getImage()|image:400:400:400:85}>Endre bilde
Syntaksen er
<{$bilde|bilde:bredde:høyde:kvalitet}>- Width - ønsket bredde i piksler
- Høyde - ønsket høyde i piksler
- Kvalitet - JPEG-kvalitet 0-100 (anbefalt: 80-90)
Tips å huske på
Last alltid opp bilder i høy oppløsning (minst 1200 px). Shoporama vil skalere ned til ønsket størrelse. Se bildekvalitet og sideforhold.
Trenger du hjelp? Kontakt oss på support@shoporama.dk.
Relaterte artikler
Utvidede felt
Lær hvordan du bruker Shoporamas utvidede felt til å legge til ekstra innhold i produkter, kategorier og sider - definert av temaet ditt.
Vis varianter som ikke er på lager
Veiledning for å vise varianter som ikke er på lager i temaet ditt, slik at kundene kan se hele sortimentet og eventuelt registrere seg for...
Avmeldingslenker i automatiske e-poster
Gi kundene dine muligheten til å melde seg av automatiske oppfølgings-e-poster etter kjøp og produktanmeldelser - med en enkel lenke i e-posten.