Share:
;
Shopify and uncompressed images
Not only does the load time of your page affect your conversion rate( a slower page = less sales), but gGoogle and other search engines have explicitly stated pagespeed affects your ranking in search engines.
The issues we usually see in Shopify with images used care threefold
Wrong format (e.g. using using .png extensively)
Images are uncompressed (neither lossy or lossless compression is deployed)
The images are not properly sized (i.e. the intrinsic size of the image may be 1200x1200px, but CSS is used to serve it in 250x250px)
Per default Shopify does not compress and/or serve your images correctly sized.
Wrong format
Although there might be instances when you must use .png, but if you don't have to use .png don't use it.
For things like logos you might have to use .png because it supports transparent background(which e.g. jpeg does not), but otherwise always go with .jpg files(or a new format such as WebP)
Jpg files are usually 50%-80% smaller than equivalent .png files.
Uncompressed images
Although it is understandable you wish to serve your customers crisp pixel perfect images, deploying lossy or lossless compression will bring significant saving in image size.
The image on the right if roughly 50% smaller than the one on the left, but the difference in image quality is negligable.
Lossless image compression means that the images are compressed without a loss of image quality, when again lossy image compression will shrink the image size even more than lossless compression but at the expense of image quality.
You can choose different amount loss loss of quality the compressing your images with lossy compression, e.g. 10% or 30%. Depending on the images, usually if you compress with only 10% loss in quality you won't notice any difference.
One handy tool for OS X with which to compress your images is ImageOptim.
Although ImageOptim works fine if you are running a small web store, but it won't really scale as you need to manually process all of your images.
If you want to avoid doing all of your product images manually, you need to install an app in your Shopify store which can take care of the optimization automatically. Perhaps the best one today is crush.pics.
Crush.pics will on the fly compress your images, add ALT tags and rename the files for SEO.
Not only will crush.pics automatically compress all of your images on the fly whenever you add new images to your store, it can automatically add ALT tags and rename your images based on predefined rules.
Proper ALT tags and filenames will assist you in having your indexed and displayed by google and other search engines.
Crush.pics can use predefined rules(e.g. Product name+SKU) to create desired ALT tags and filenames.
Images are not properly sized
The most common, and unfortunately also the technically most challenging problem we see often is that images are not correctly sized. Although the above optimizations will help, you need to also display the correct size image.
Images which are too large for the device used can cause a huge drop in pagespeed.
What we mean by correct size is that, if the web user is shown a 250x250px image the native image should roughly be the same size as well. What unfortunately happens rather often is that the images might be 1000x1000px in size, but then using CSS they are displayed as 250x250px.
The intrinsic image size and the size displayed do not match.
All of those extra px go to waste, your customer won't see them, but your customer still has to download them.
As each theme is somewhat different from the other theme, it is impossible to offer a copy+paste solution to how to properly resize your images. Furthermore, the optimal solution depends also to a very large extent to the type of images and/or size of displayed images in your theme.
Editing the Shopify templates to utilise responsive images can be timeconsuming and often requires hiring an outside developer.
Drop us a line bellow if you want our assistance in making your site serve optimized images and a higher PageSpeed.
