Optimizing images for mobile
Guide to using responsive images with srcset in your Shoporama theme to provide optimized images for mobile users.
Reading time: approx. 1-2 minutes
Shopejer
Usually you specify an image with a fixed size. But mobile users don't need an 800px image - they might only use 400px. With responsive images, you can let the browser choose the right size.
Automatic optimization
Shoporama automatically optimizes your images:
- WebP conversion - images are automatically converted to WebP for faster loading
- Scaling - images are scaled to the desired size via
the image modifier - Quality adjustment - you can adjust the JPEG quality
Responsive images in themes
In your Smarty theme, you can use srcset to provide different sizes:
|image:400:400:85}>)
Modify image
The syntax is:
<{$image|image:width:height:quality}>- Width - desired width in pixels
- Height - desired height in pixels
- Quality - JPEG quality 0-100 (recommended: 80-90)
Tip to remember
Always upload images in high resolution (at least 1200px). Shoporama will scale down to the required size. See image quality and aspect ratio.
Do you need help? Contact us at support@shoporama.dk.