Optimizing images for mobile

Mobile users shouldn't have to 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 homepages, where there are many images displayed at once.

How Shoporama Resizes Your Images

Shoporama automatically optimizes your product images when they’re displayed in the online store:

• Resizing. Images are resized down to the exact size your theme requires, so the browser doesn’t have to handle huge files.
• WebP conversion. Modern browsers automatically receive images in the WebP format, which is significantly smaller than JPG.
• Quality. Images are compressed according to the store’s own quality settings. If you need to adjust these, please email support@shoporama.dk.
• Caching. Resized images are cached so that the resizing process only occurs the first time a specific size is requested.

How to resize an image in your theme

In your Smarty theme, use the getSrc() method on an image. It’s available on all image objects, such as $product->getImage(), $category->getImages(), and similar. It returns the URL for the resized image:

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

Parameters for getSrc()

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

Responsive images with srcset

When you want to serve different sizes for mobile, tablet, and desktop, combine getSrc() with the HTML srcset 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" to images further down the page so they load only when the customer scrolls to them.

Example: Cropped product image with a fixed aspect ratio

If you want all images to have the same square aspect ratio—for example, in a product list—use the " box" scaling type:

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

Example: The entire image in a fixed format, e.g., for Facebook

In some cases, the image must have precise dimensions so that no part of the product is cropped out. This applies, for example, to images for Facebook and other services that fetch the image directly from your store, where you cannot control the display using CSS. Use the "pad" scaling type:

<{if $product->getImage()}>
  <meta property="og:image" content="<{$webshop->getUrl()|escape}><{$product->getImage()->getSrc(1080, 1080, 'pad', 'jpg')}>">
<{/if}>

The image is scaled down so that the entire product is included and centered on a white background measuring exactly 1080x1080. A tall image will have white borders on the sides, and a wide image will have white borders at the top and bottom. The border is white even when you select PNG or WebP, and transparent areas in the image will appear white. An image smaller than the specified dimensions will not be enlarged but will be centered with a wider border.

getSrc() returns a URL without a domain, so prefix it with the store’s URL using $webshop->getUrl() when the image is to be used outside the store, as in the example. This only works if your theme fetches the image itself using getSrc(). Your own product feeds use their own fixed size and cannot use padding. The Google Shopping and Partner Ads feeds, on the other hand, can send the entire image on a white, square background if you check the box for “Send square images (entire image on a white background)” under Webshop → General in the Feeds section. Read more in Set Up Google Shopping Feed.

Example: Force WebP

If your store uses a different default format, you can force WebP, for example, on thumbnails:

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

Frequently Asked Questions

Do I need to do anything myself, or does it happen automatically?

If you’re using one of Shoporama’s standard themes, such as Delaware, responsive images are already set up for you. You only need to consider this if you’re customizing the theme yourself or building a new one.

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

A big one. A full product image at 1200x1200 can be several hundred kilobytes, while a 400x400 mobile version is typically under 50 KB. On a mobile device with a poor connection, this can be the difference between a fast-loading page and a customer leaving the store.

What’s the difference between “fit,” “box, ” and “pad”?

"Fit" preserves the image’s original aspect ratio and fits it into the specified box, so the file retains the image’s own proportions and may be smaller than the box in one direction. "Box " fills the entire box and crops whatever doesn’t fit. " Pad " provides the exact dimensions of the box without cropping, by placing the entire image on a white background. Use “box” for uniform product lists, “fit” for the product detail page where the entire image should be displayed, and “pad” when both the dimensions and the entire product need to be included, such as on Facebook.

Can I adjust the size directly in the image’s URL?

No. Shoporama only generates the sizes that your theme has requested via ` getSrc()`. If you manually adjust the dimensions in a URL, you’ll be redirected to a different size of the image that already exists. If you need a new size—for example, in a feed you’re creating yourself in the theme—call `getSrc()` with those dimensions in the theme and use the URL it returns.

Can I choose padding in my theme’s settings?

No. In the online store, padding is only used where the theme’s code specifically requests it. The Image Adjustment setting in the built-in themes only changes how the image is displayed in the browser. If you select “Show Full Image” in Montana or “Contain” in Delaware, the entire product is already included in the store.

Are images resized every time the page is displayed?

No. Shoporama caches the scaled image the first time it’s requested, so it loads quickly on all subsequent visits. You don’t need to worry about caching yourself.

Will I be penalized in Google PageSpeed for large images?

Yes, if you serve images that are too large for mobile devices. If you use `srcset` and `sizes` correctly, you’ll usually eliminate the “Properly size images” warnings in PageSpeed Insights.

Does this affect my ranking on Google?

Mobile page speed is a factor in Google’s evaluation. Faster image loading can improve Core Web Vitals (especially LCP), which is beneficial for SEO. It’s not magic, but it helps.

Can I use the same approach for blog or landing page images?

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

Do you need help customizing your theme so that images load optimally on mobile? Email support@shoporama.dk.