Optimizing images for mobile

Mobile users shouldn't download a 1200px image when their phone only displays 400px. With responsive images, you let the browser choose the right size so the page loads faster and the customer has a better experience. This is especially important on product lists and front pages where there are many images at once.

How Shoporama scales your images

Shoporama automatically optimizes your product images when they appear in the online store:

• Scaling. Images are scaled down to the exact size your theme requests so the browser doesn't have to work with huge files.
• WebP conversion. Modern browsers automatically deliver WebP format, which is a good deal smaller than JPG.
• Quality adjustment. You can control compression to choose the balance between file size and sharpness.
• Caching. Scaled images are saved so that it only happens the first time a size is requested.

How to scale an image in your theme

In your Smarty theme, you use the getSrc() method on an image. It is present on all image objects, e.g. $product->getImage(), $category->getImage() and similar. It returns the URL of the scaled image:

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

Parameters on getSrc()

The method takes five parameters, the last three of which are optional:

Responsive images with srcset

To serve different sizes for mobile, tablet and desktop, combine getSrc() with the srcset HTML attribute. The browser will then automatically select the size that matches the screen resolution:

<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: Add loading="lazy" on images that are further down the page, so they only load when the customer scrolls there.

Example: Cropped product image with fixed ratio

If you want all images to be in the same square format, for example in a product list, use the box scaling type:

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

Example: Force WebP and lower quality

For thumbnails, you can save a lot of file size by forcing WebP and lowering the quality slightly:

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

Frequently asked questions

Do I have to do anything myself or is it automatic?

If you're using one of Shoporama's default themes like Delaware, responsive images are already set up for you. You only need to think about it if you customize the theme yourself or build a new one.

How much of a difference does it make to the customer experience?

Huge. A full 1200x1200 product image can take up hundreds of kilobytes, while a 400x400 mobile version is typically less than 50kb. On a mobile with a poor connection, this can be the difference between a fast page and a customer leaving the shop.

What is the difference between fit and box?

fit preserves the original proportions of the image and fits it into the specified box. box fills the entire box and crops out what doesn't fit. Use box for uniform product lists and fit for detail pages where the entire image needs to be displayed.

Are images scaled every time the page is displayed?

No, it does not. Shoporama saves the scaled image the first time it's requested, so it's fast on all subsequent visits. You don't have to worry about caching.

Will I be penalized in Google PageSpeed for large images?

Yes, if you deliver images that are too large for mobile. If you use srcset and sizes correctly, you will usually remove "Properly size images" warnings in PageSpeed Insights.

Does this affect my Google ranking?

Page speed on mobile is included in Google's assessment. Faster image loading can improve Core Web Vitals (especially LCP), which is positive for SEO. It's not magic, but it helps.

Can I apply the same to blog or landing page images?

Yes, you can. All image objects in Shoporama have getSrc(). It works the same for products, categories, landing pages, blog posts, and brand logos.

Need help customizing your theme so that images load optimally on mobile? Write to support@shoporama.dk.