One of the best things you can do for yourself and for your business is to educate yourself on all of the platforms, services, and applications that you use in your stack to get the most out of each one. Taking some time to refresh yourself on the intricate workings and functions of each of these services, even if you’ve been using them for years, might just clue you in on some web optimization you never thought possible.

Web technologies are evolving at a breakneck pace, and sometimes even software manuals released by platforms can be dated. I recently took some time to read through the Shopify Liquid in order to brush up on some features that maybe I have overlooked and I saw that it still mentioned attributes that are deprecated by the official Shopify Help Center.

HOWEVER...

I did come across the 'format' parameter of the img_url filter, and we can use this parameter for something that can drastically improve image load speeds on your website - which is always a good idea!

A picture is worth 1,000 words and most Shopify websites are loaded with thousands of images that illustrate everything from brand tone to product details. This parameter, when used correctly, can tell Shopify to convert all of those images to PJPG (progressive JPG) no matter what format they are in the source. Before I dive into what the big difference is between JPG and PJPG, I want to answer a question you have right off the bat and that is, yes… all modern browsers support it... except for IE 8 or lower (which accounts for less than 4% of all traffic). This change alone could drastically improve not just your image load times but your entire website speed.

So what is the big difference? Since a picture is worth 1000 words, rather than using 2000 words, I’ll just show you two pictures.

Usually images, without consideration of format, are loaded from top to bottom, like this:

And here is how a progressive image would load:

[image courtesy: Book Of Speed]

Sometimes a client may even upload a product's featured image in PNG, which are usually pretty large files (generally even bigger than JPG) and wind up being pretty "heavy" when it comes to loading them. When rendering a grid of products within a collection.liquid template, we can safely use this parameter to have both, PNG and JPG files converted to PJPG:

<img srce= {{ product.featured_image | img_url: 'desired_size', format: 'pjpg' }} />

If you would like to learn more about this in particular straight from the source, you can check out this link… right under “Format”...

This little optimization can significantly improve your page loading times for your products and even more so, your collections, which frequently display a number of images all at once. Some themes in Shopify have already begun to include this adjustment, so there’s no time to waste.

Before I leave you to your optimization, I should note… this obviously doesn’t wipe out the need to load optimized images into your website to begin with. Compressing images prior to putting them on your site will always help with load times, but this particular adjustment can help disperse the load priority more evenly so the rest of the site can process instead of waiting on all images to download first.

Increasing your load efficiency for images on your site will make it load faster, which will keep people on your site longer, up your Google rating which will drive up your SEO value, and in effect, literally put money in your pocket. What are you waiting for?