Automatic image optimisation

As we’ve discussed previously, keeping a store as lightweight as possible is key to a fast store and elite UX. Shopify has always compressed the images displayed in your store, in a bid to keep stores light and load times short. Compressing images reduces their size and therefore keeps pages loading faster.

With this added feature, Shopify stores provide a flexible experience to customers depending on their personal preferences. Some browsers are better than others at coping with high-quality image files, but Shopify takes this worry out of your hands by automatically adjusting for each customer.

Shopify’s native Content Delivery Network (CDN) is the system for managing dynamic image transformation and optimisation. All optimisations happen in real time, delivered to users by Shopify’s server network with little to no wait time. The CDN has three key features:

1. Compression

File sizes are automatically optimised via compression when uploaded to Shopify’s CMS. To the human eye, the changes are microscopic. But for overall site weight and load times, they’re monumental.

2. Format conversion

The CDN automatically detects optimal client-side file formats and converts all images to the best option. If using a modern, updated browser then images will likely be converted to WebP or AVIF, but JPG is kept as a fallback for customers on older systems.

3. Dynamic editing

Keeping hold of the original file, dynamic editing allows users to crop and transform images inside the CMS. Indicated your desired image state using URL parameters and these will be used on-the-go to transform the file on your front-end.

The original file remains unpreserved and untouched.

Whilst Shopify’s CDN does take care of the formatting for you, it’s still good to know difference between the types of file format for images on a website. 

Shopify supports a long list of different formats, do you know any differences between them?

Here’s the list of supported formats:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP
• AVIF

Without getting too detailed in this 5 minute tip, we’ll look at the two most important formats.

JPEG images are best for any image with a complex range of colours, the most common example being photographs. The JPEG file format has a vast colour palette adept at delivery the intricacies of colour differentiations in photographs and other complex images.

JPEG also has a lossy compression which keeps file sizes small, load times short and site performances high. Product images, page banners, slideshows and blog articles should all be uploaded in the JPEG format.

PNG has a more limited colour palette but it can support full transparency. 

It’s therefore the best option for infographics, logos, icons, borders and trims, i.e. anything with flat colours without gradients and shading.