Black Friday & Cyber Monday
Your ultimate guide to crushing high-volume sales periods
5 minute Shopify tips
Seb Harris
Shopify detects which browser your customers are using and delivers storefront images to them in the most optimal file format. They recently expanded this feature to support AV1 Image File Format (AVIF), as well as WebP.
Shopify can now identify whether your customer is using a browser that supports modern image formats and deliver to them high-quality images without hampering site performance.
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:
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.
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.
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:
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.
If you want to know more about keeping your store as lightweight and high-performance as possible, get in touch with our team today for a free consultation.
We’ve only scratched the surface here and there are a tonne of other tips and techniques for keeping stores super fast. Our team knows them all and we’re more than happy to discuss them with you! Get in touch here.
Do you want to
stay updated?
Yes
Stay ahead
Subscribe to our newsletter for a roundup of the latest in ecommerce, straight to your inbox.