Download our free guide - 42 ways to improve your product page
Flying Spares Case Study by magic42

Flying Spares

International B2B Magento with 240k catalogue, Khaos Control Integration and digital marketing.
Find out more
Stone Computers Case Study by magic42

Stone Computers

Adobe Magento Commerce B2C, B2B portal and PunchOut sites and bespoke loan payment solution.
Find out more

Alan Paine

Multisite, B2C migration from Magento to Shopify Plus with ERP integration.
Find out more
haws case study image (1)

Haws Watering Cans

B2C eCommerce strategy, UX improvements, AdWords and Klaviyo email marketing management.
Find out more

Alan Paine

Multisite, B2C migration from Magento to Shopify Plus with ERP integration.
Find out more
Berry Flirt smoothie pouring into a glass

Berry Flirt

Fast moving B2C theme and bundling solution on Shopify
Find out more

Call Us

Speak to a Shopify expert:

0121 663 6360

Get in touch 
June 12, 2019

Going beyond responsive images

Prioritising mobile 

Mobile and desktop users have settled at an even 50% split, meaning responsive images and content are vital for an eCommerce website. However, the user experience goes beyond this, with fast pages, intuitive layouts and standardised experiences all needed to capture maximum engagement and sales.

Using Magento offers plenty of flexibility through the use of CMS blocks that can be used throughout the different pages on your website. Within these blocks, you have full control of all components such as text and images.

The temptation when building these pages and blocks is to forget about the mobile version. Most of the time you will naturally preview the work on a desktop viewport. If anything, the complete opposite should be prioritised. Not thinking mobile can lead to a slow to load and confusing layout is going to frustrate users and ultimately, damage your sales.

Using srcset for Magento, Shopify or other eCommerce platforms with true responsive design, the performance of your website will improve and ultimately provide an improved user experience for mobile visitors.

Experts with responsive images

We've gone through the process plenty of times and know that a little more work upfront will provide a better long term ROI. Setting the standard for all pages and for all images from day one is best practice.

Images are generally going to be one of the bigger files on your website. The more these can be compressed the better. Ideally, larger images shouldn't be over 150kb and smaller images over 100kb. Of course, it depends on the context of the page and the purpose of the images.

The opportunity to optimise the size of these images even further is only a resize away. This is why you should end up having two different images: one for desktop and one for mobile. The appropriate image will be loaded based on what device the user is using.

Scaling Images Vs Responsive Images

The biggest difference is that a scaling image is using the larger desktop image to work on mobile, while a responsive image will have two separate yet optimised images.

Remember that the viewport for Desktops is generally landscape, compared to mobiles that are portrait. This will cause issues if you simple shrink the desktop image down to mobile width, as this examples demonstrates.

Original desktop banner:

Scale vs Responsive image banner:

You can also notice that the 'Scale' version of the image has a very small call to action and is almost illegible. Compare that with the larger easy to press call to action on the responsive version and more engaging visual appeal.

The desktop banner automatically switches over to the mobile banner once the viewport is hit by scaling the browser down. This viewport can be changed, but in this example it changes at 650px.

How to make your images responsive

In order to make any image responsive you need 2 images (one for desktop and one for mobile) and upload them to your Magento media folder.

In your CMS block, you can add this code that has the srcset and replace the image URLs to the ones you have uploaded:


<source media="(max-width: 650px)" srcset=“/media/wysiwyg/image.jpg“>

<img src="/media/wysiwyg/image.jpg">


Remember file size and usability

Using the responsive image method is one of many areas that need to be carefully considered  to make your website fully mobile-friendly. There are different tools that will help compress and speed up the loading of your images (and consequently your page) so shaving off as many kilobits as possible will all add up.

If you need assistance with your Magento page designs or CMS blocks you can get in touch to see how we could assist your Magento website design.

Related services

Iterative eCommerce Growth
Magento integrations
International eCommerce

magic42 is unique in that it evolved from Mobile Fun, an award-winning online retailer with 20 years of experience, 27 international websites and a global distribution network managed from the heart of Birmingham.
Company No. 11572347 VAT No. 310 2436 61
© Copyright 2023 magic42 Limited - All Rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram