This week's Shopify Dev Resource are some web apps that help you optimize images so they're not so "heavy" when it comes to loading pages - TinyPNG and Squoosh App.
These are two great apps that you should fold into your processes to make sure that image optimization is occurring. With the many folks I work with in Shopify, I always recommend they make this a regular part of their process when uploading images.
TinyPNG
TinyPNG uses what is called lossy compression to reduce a WebP, PNG or JPEG file size. It's as easy as dropping your image onto the site and it'll compress it within seconds.
"What's lossy compression?" Great question! Lossy compression is a technique that reduces a file by getting rid of the less important information (a lot of details that would make it really hard to notice with the human eye). Khan Academy does a great job at taking a deep dive of what all that looks like - Lossy compression (article).
Squoosh App
Squoosh App was developed by Google and as well compresses WebP, JPEG and PNG formats. One of the cool things about this app is that you can see real-time previews of your original vs compressed image and you are able to control the levels of compression, adjust image quality and more.
Not only can you use it online, but it can be used offline as well, making it another easy tool to have on hand.
Pro tip: check out the Squoosh Github.
Improve the Overall Page Performance
Images and Javascript are two things that really slow webpages down on the frontend. So we need to make sure we've got tools in place to help mitigate those issues and improve the overall performance on pages we work with.
These apps help ensure that additional metadata and bloat is stripped from the image, while preserving the image quality. This tends to be super helpful as most of the time when we get the design or assets from the designer, it's not part of their job to consider performance on the site, it's yours.
Shopify Image Processing
Now to clarify, Shopify does have their own image processing that takes place when you're uploading images and I've seen some tests that note the difference in folding in a step or tool like this in your process saves only a small percentage - but either way it still does benefit us in the sense that it DOES help.
My Preference
I think TinyPNG and Squoosh are both great apps. I still tend to prefer TinyPNG just because I've been using it forever. There are plenty of other apps like this out there, and some may work better, but I've had a lot of success using these and recommending to folks I work with.
Either way, I highly recommended adding one of these to your tool belt when working with Shopify themes.