Image best practices in Shopify

In this post I want to tell you about images in general, best practices, icons usage, available compression technologies, apps and what can you do yourself to never have any problems with your image compression side of speed optimization.

Compression

You have two options when it comes to compression: install an app, or do it manually. Of course it would make sense to automate everything as much as possible, so I'd go with an app option.

There are lots of apps available, they're doing the same thing - looping through images in your store, compressing it, replacing it. Some of them are offering extra features, like adjusting the amount of compression.

If available in an app, you can choose between Lossless and Lossy compression methods. Lossless will retain 100% of image quality. It works by building an index of all pixels on the graphic and then grouping pixels with same colors together. Lossy compression is done by reducing the amount of colors used.

In general I'd always pick lossless. There could be some cases where lossy would make sense - like if the image in question has a small size (pixels), where quality degradation will not be visible. But you probably shouldn't worry about that.

Important note: Apps are not compressing images that you add using Customize theme option, so you'll have to compress them manually. Again, there are lots of options. I like this service: https://tinypng.com. Just take your images, compress them and re-add them through Customize theme.

Formats

Main formats are: JPEG, PNG, Progressive JPEG, WebP.

JPEGs and PNGs are what you're probably using now. PNGs are larger, but allow for transparency. If the image doesn't have transparent areas, you should always prefer using JPEG.

Progressive JPEGs is a format that loads blurry image first, then it's getting better and better towards the end of loading up to maximum quality. Its advantage is a thing called "Perceived performance". Your images will load on site faster (albeit in reduced quality), and thanks to this the site will appear to be loaded faster. This format is also smaller than traditional JPEG.

Should you use it? There is no definitive answer. There is a study done by Radware (Progressive JPEGs: Good? Evil? [Radware at Velocity]), which claims that users prefered normal JPEGs. On the other hand, if you want to squeeze the last few KBs from the total image size, progressive JPEGs are most likely smaller (if they're more than 10-20KB). I usually don't chase such small gains, and I don't think you need to.

WebP is a modern format that provides superior compression (up to 30% in file size). In fact it's so modern, than it's not supported in Safari and Firefox browsers, so you shouldn't bother yourself about it. Perhaps the situation will change in future, but likely not in the next 1-2 years.

SVG is vector graphic file. In raster graphics like JPEG format, the image is composed of set of square pixels. SVG instead contains nothing more than text info that describe lines, curves, shapes, colors and text. It is a perfect option for any kind of icons, like little social icons or your own logo. The file size is very small. It is scaling perfectly. It is also possible to change colors with CSS or JS, which is perfect for those neat hover-color-changing effects without the need to use separate images.

Icons

This is easy. For best performance and quality your icons should be in SVG format. If you insert them correctly inside your theme, these icons won't take any requests to load. This is a good instruction article on how to do it (skip the step 3 if you don't require animations): How to upload SVG icons.

Arrows, navigation elements, etc

If you navigation elements are simple, it's quite possible to replace them with simple CSS code. The most popular solution is probably Chevrons (for forward-backward navigation). It might be tempting to use some fancy arrows, but in reality your users need it only for control. Chevrons look like this:

Chevron (top)
Chevron (right)
Chevron (bottom)
Chevron (left)

They're perfect for simple navigation elements, because it's just a few characters of code instead of additional PNG or even SVG icons.

Base64

It is also possible to encode any image file to base64 string of characters. It may sound like a good idea to use it for icons or other images, because it saves server requests. It might be sensible to use them in some cases. However, in your CSS style files there absolutely shouldn't be any base64 strings. Not only it bloats the size of the styles file, but it also prevents it from minifying and Gzipping (server side compression) normally, because you can't compress a string of characters.

Conclusion

I made a little overview of image-related things in Shopify. To conclude I'd like to lay down simple action steps to fix your images:
1) Install image compression app, losslessly compress all images.
2) If an image doesn't require transparency, replace PNG with JPEG. Going forward always prefer using JPEG.
3) Go through your images in the Customize theme section, download them, compress them with tinypng.com and re-upload (because apps aren't compressing them automatically).
4) Check your icons and if they're not SVG, replace them with SVG.
5) Don't use fancy image-based navigation elements, find someone to replace them with CSS or SVGs.

After that your image side of things should be completely covered. If you'd like any help, please write me an email :)