Optimizing images for mobile
Guide to using responsive images with srcset in your Shoporama theme to provide optimized images for mobile users.
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:
<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()}>" >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.
Related articles
Extended fields
Learn how to use Shoporama extended fields to add extra content to your products, categories and pages - defined by your theme.
Show variants not in stock
Guide to display out-of-stock variants in your theme so customers can see the full range and possibly sign up for stock notifications.
Unsubscribe links in automatic emails
Give your customers the option to unsubscribe from automatic follow-up emails after purchases and product reviews - with a simple link in the email.