When Shopify resizes an image (using the img_url filter; i.e. most all product images), the resulting image will not be optimized. This is true even if the source image was optimized, because Shopify creates a new (resized) image file. This is also why image optimization apps like Crush.pics do not work as advertised.
Compressing (optimizing) hero images and banner images generally work because these images are used at the original size, so a new file is not created (i.e. the optimized version is used).
Generally, ensuring that images are properly sized (i.e. the width and height of an image matches approximately the size at which it is rendered) using the img_url filter will be more impactful on file size than advanced image optimization techniques which squeeze the last few bytes out of an image.
tl;dr: do not expect Shopify Image Optimization apps to improve performance.
Before I can explain why Shopify Image Optimization Apps are considered harmful, I must first explain a little bit about how image optimization works. A very basic way to understand what an images is to envision a spreadsheet where each pixel in a image is represented by a spreadsheet cell.
It is important to understand that all images are compressed. Image formats, by definition, apply compression techniques in order to store image data.
Different image formats apply different compression techniques. For example, the PNG format compresses images by reducing repetitive data. Under PNG compression if an image has five red pixels in a row, PNG would store the data as 5x red rather than red, red, red, red, red—this type of compression is referred to as “lossless” compression, and explains why PNG works well for compressing illustrations with flat colors. You can imagine how introducing a different color into the middle of the row will make the data less compressible; for example if the row of pixels was instead red, red, pink, red, red, PNG could only compress this to 2x red, pink, 2x red.
However, since pink is close to red in color, if we are willing to change that pixel to red—understanding that changing the image data will impact the way the image looks, or the “quality” of the image—we can make the data more compressible; this type of compression is referred to as “lossy” compression (as data is being lost/changed in an irreversible way).
Note: Applying lossy transformations on top of lossy transformations leads to even more data being lost, resulting in even lower quality. As such, when applying a lossy transformation, it is best to use a source image with the highest available quality.
The JPEG format uses lossy compression very effectively. Instead of looking for repetition, JPEG compression creates its own “repetition” by modifying image data using a sophisticated technique called a “Discrete Cosine Transform” which operates on 8px x 8px blocks rather than rows of pixels. Pixels within each block may be adjusted to match a set pattern (which makes JPEG particularly adept at compressing photographs). Different patterns may produce files with a higher or lower quality and file size. For this reason, the image dimensions and resolution have a direct impact on the way JPEG transforms the image data to make it more compressible. If you resize a JPEG (changing its resolution and image dimensions), new transformations based on the new image data must be applied.
This goes to illustrate that while all image formats are a type of compression, changing the way in which the compression is applied or changing the underlying image data can improve compression to result in a smaller file size (we will call this “optimization”).
Remember, optimization is an additional process which occurs after an image file is created.
Using Images on the Web
A general rule is that the larger an image’s dimensions are, the more data it contains, so the larger the file size will be.
On the web, ideally you do not want to require the user to download any more data than necessary. For this reason if you have an image that is 1000px x 1000px, and use that image on a webpage rendered at a size of 200px x 200px, you would not want to require a visitor to download the full size 1000px x 1000px image. Instead, you would want to provide the user with a different version of the image, resized to 200px x 200px, as this image would include only the data necessary for that size. Google refers to this as “properly sizing images”.
Take an ecommerce collection page for example. Usually the collection page includes multiple product images, so the effect of loading a product image at full size on this page would be also multiplied. This would increase the overall size of the page and impact the page’s performance.
There are other places on a website where this image may also be used — in the cart, on a product detail page (usually as both a thumbnail and as a preview image), etc. In almost all of these cases, you would want to use a resized version of the image rather then the full size image. In fact, the only place where you would likely want to display the full size image would be when the product image is zoomed (assuming image zoom is important to your users).
How Does Shopify Work?
In Shopify, you upload only one full size product image into the Shopify admin (we will call this the “source image”). Shopify can then resize the source image on it’s servers, generating a new image file (with a distinct URL) for each resized instance of an image that appears on your site. Your theme developer defines the size of the resized image using the img_url filter; ideally, this size matches the size at which the image is rendered in the browser.
Remember, Shopify only allows you to upload one source image; the resized versions of that image are generated on the fly based on the template which utilizes them. Shopify’s servers produce image files which have not been optimized.
How Do Shopify Image Optimization Apps Work?
Now that we understand how images are optimized, how images should be loaded on a webpage for optimal performance, and how Shopify works natively, we can examine how Shopify Image Optimization apps work.
Because Shopify only allows one source image to be uploaded, the image which is accessible via the Shopify API is that full sized image. Image Optimization Apps work by downloading the full size source image to their server, applying some optimization, and then reuploading that image to Shopify replacing the original source image.
Now a new optimized source image exists, however that image is not likely to appear frequently within your theme. The images which appear most commonly are versions which have been resized on Shopify’s servers, but Shopify’s servers produce image files which have not been optimized. This means that most of the images which appear will not be optimized.
In fact, because the app changes the quality of the source image, the resulting images will generally be of a lower quality while having a comparably large file size!
For this reason, Shopify Image Optimization Apps are considered harmful, and should not be used.
An Alternative Solution
At this point, you might be wondering—if Shopify Image Optimization apps don’t work as advertised; what can be done to optimize images in Shopify? Is it even possible?
The answer is yes! It is possible to process images through an image optimization service and CDN which sits in between your website’s frontend and your website’s visitors. The services optimize the images on their servers before sending them to your visitors.
However, implementing and image optimization service is not as simple as installing an app. This approach requires your theme to be updated to utilize the image optimization service wherever images exist within your theme.
Shopify CDN
When conducting experiments for the purpose of this article, I realized that Shopify’s CDN will serve images in webp format if the browser sends and HTML accept header which includes image/webp. This is a modern image compression format which can achieve higher compression levels than JPEG and PNG at the same quality.
Possible benefits of image optimization apps:
- Image file renaming: If having your product images appear in Google Image search results is important to you, this can be beneficial. It can simplify renaming product images en masse. However, some thoughtful planning/naming before uploading images makes this unnecessary. Image naming SEO recommendations.
- Alternative text: Alternative text is most important for accessibility purposes (though it also has SEO benefits). Because alternative text should describe the content of the image, the automated processes used by apps are generally insufficient for meeting accessibility requirements. I recommend writing alternative text by hand; if this is not possible, using an app is better than having no alternative text at all.
- Convert PNG to JPEG: Generally photographs will be smaller as JPEGs, and illustrations will be smaller as PNGs/SVGs. However, only PNGs support transparency, so if transparency is important, you may need to use PNG. Automatically converting PNGs to JPEG can help you avoid making accidental mistakes; however, thoughtful planning before uploading images makes this unnecessary.