Flying Spares, provider of spare parts for vintage cars and high quality marques, displaying a Rolls-Royce from their eCommerce Shopify development from magic42

Flying Spares

International B2B Magento with 240k catalogue, Khaos Control Integration and digital marketing.
See our work
Stone Computers Case Study by magic42

Stone Computers

Adobe Magento Commerce B2C, B2B portal and PunchOut sites and bespoke loan payment solution.
See our work
Alan Paine quality clothing retailer showing their brand, as featured in their case study for their eCommerce website with magic42

Alan Paine

Multisite, B2C migration from Magento to Shopify Plus with ERP integration.
See our work
Haws Watering Cans case study after eCommerce development agency, magic42, migrated their site to Shopify

Haws Watering Cans

B2C eCommerce strategy, UX improvements, AdWords and Klaviyo email marketing management.
See our work
Alan Paine quality clothing retailer showing their brand, as featured in their case study for their eCommerce website with magic42

Alan Paine

Multi-site, B2C migration from Magento to Shopify Plus with ERP integration.
Find out more
Roger Clark Motorsport automative eCommerce client case study from magic42, showing high quality silver cars in a slick garage

Roger Clark Motorsport

B2C and B2B migration of bespoke, global automotive parts website to Shopify.
Find out more

Call Us

Speak to a Shopify expert:

0121 663 6360

Get in touch 
magic42 - eCommerce development experts born from retail success

Born from a retailer

Read the full story of how our award-winning retail business developed into magic42.
Find out more
Envision Workshop documents as an outcome from our replatforming and migration meeting for your eCommerce website

How we'll work with you

Find out what it's like to partner with us and the steps involved for your eCommerce project.
Find out more
Alex Ashman, director of magic42, in a bumper car with a huge grin on his face as he mingles with his eCommerce development team at magic42

Looking to join us?

Take a look at what it's like to work at magic42 and the opportunities we offer.
Find out more

Call Us

Speak to our eCommerce experts:

0121 663 6360

Get in touch 

Going beyond responsive images

Author: 
Alex Ashman
Published: 
June 12, 2019

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:

<picture>

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

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

</picture>

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 a UK-based eCommerce development agency, born from an award-winning retailer. Having grown with the industry since the year 2000, we provide our unique perspective to help clients get the best from their eCommerce platforms.
Company No. 11572347 VAT No. 310 2436 61
Shopify Partners Logo (as used by Shopify Development Partners)
© Copyright 2024 magic42 Limited - All Rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram