How Responsive Images Improve Page Load Speed

Blog > How Responsive Images Improve Page Load Speed

Posted By Create

Tags: website images, website design

 With more people than ever using mobile devices to browser the internet, businesses can no longer afford to ignore the importance of being mobile-friendly. We are always optimising our system in order to improve image quality and reduce how long it takes for pages to load on mobile devices. With our new 'Responsive Images' update, we're taking a big step forward. 

Recently we talked about how to build mobile-friendly content easily with our introduction of Pagebuilder. This easy drag-and-drop interfaces allows you to build content that will look great on large and small screens. Every template in our Design Studio is fully responsive and will resize to suit any device. With fully customisable templates, such as our newest releases Velvet and Boutique, and the new larger product images, the Create platform provides everything you need to deliver a first class mobile-friendly site. But there are always improvements to be made.

At Create, our ethos is to make ecommerce easy. Designing and building websites, whether for online shops or classic sites, should be simple. However, making the process of creating the site of your dreams is only one part of the puzzle. We want your business to thrive and flourish long after you've built it, and this means offering your visitors a superior experience – on any device.

So this 'Responsive Images' update is all about you and your customers. In the past we restricted images to a modest 800x800 pixels to ensure websites would load quickly – after all, it’s one of the cornerstones of usability and a powerful metric Google uses to determine rank. Hi-res images used to seriously impact the load time and accessibility of your site. If a page takes over a minute to load on a mobile device it is unlikely your customers will hang around.

Responsive images are great because not only do they allow for larger image size – a whopping 2000x2000 pixels no less – but these larger images will not slow loading speeds at all. They’ll actually improve them!

What Are Responsive Images?

Traditionally, images have posed one of the biggest problems for responsive design and for the past two decades have remained notoriously inflexible. It is has been difficult in the past to serve different images depending on device size meaning the same media displayed on a 2000 pixel screen also needed to be displayed on a mobile device that is a fraction of the width. 'Responsive Images' allow us to show different images depending on screen width - which means minimising loading times.

With mobile browsing becoming the norm, it is increasingly inefficient to have the same image that loads on a desktop also load on a smartphone. A phone does not have the same processing speed as a laptop or desktop device. The result? Performance is compromised, page speeds drop to a crawl, users are unhappy, and Google wag their finger at you as if you were a naughty child.

Responsive images help to close that gap. By using some fancy code, when you upload an image in future they will be, by default, responsive. When viewed on your live site, the specific image that is loaded will be dependent on screen size – rather than the laborious process of just loading the same image no matter the device.

This means that when someone views your site using a mobile phone with a 320 pixel wide screen, only the applicable size of image will be loaded, rather than its heavier desktop counterpart. The huge positive of this is that page load speeds are significantly reduced, making your customers (and Google) very happy indeed.

This is also important for ‘Accessibility’, this means enabling access to your content to the most people possible. Limitations such as slow internet speeds no longer impede on the user experience of your customers as they may once have.

Our Challenge

The process of setting specific images for page sizes is fairly straightforward when you’re able to specifically handpick the images to be loaded (as a developer may). Unfortunately when you’re a Content Management System (CMS) with thousands of users (you know, such as Create) it becomes a little bit trickier.

We had to find a one-size-fits-all solution, always with the knowledge that what may work for 50% of people may not for the other 50%. We needed to provide a solution that catered to everyone and that is, above all else, scalable in future so we can build upon it.

Ultimately we managed to crack it, and are now one of the only CMS providers to offer this revolutionary approach to images for mobile devices. Watch this space for an upcoming dev blog on the complexities of this very subject. Now that this is here, you don’t need to worry and can simply upload the image you’d like to use and we’ll take care of the hard part!

What Does All This Mean For You?

All images that are uploaded will be responsive, you can use larger images on your site. This is great news if you want to have full page banners or other high resolution images - upload larger wallpapers, and use images that are 1000 pixels wide in the promotional image sliders.

Please note: Hi-res images will be larger in file size so be sure to check your storage capacity.

These updates also mean your site will load faster across devices. More people can access your website and your page speed ratings are improved. The best news is you don't need to do anything differently, our system will take care of all the heavy lifting for any image you upload from this point on.

Share your experience with us in the comments below! We’d love to know how you’ve found the upgrade, and of course if you have any questions about your account, please get in touch with your Account Manager at any time.


Blog Search


Search

Get In The Loop


Receive business tips and web news direct to your inbox.