Today, we're going to talk about a subject near and dear to my heart, image compression! I'm half-kidding, but there is something oddly satisfying about shaving huge percentages off an image file size without diminishing any quality.
The inspiration for this post stemmed from a very popular post in the Beaver Builders Facebook group. I had just filmed a video tutorial about enabling and using Google's new Guetzli algorithm in ImageOptim and I was shocked by all the other options I was previously unfamiliar with. In this article, we're going to talk about some tips and tools for compressing images for the web.
Before we get deeper, let's establish some common terminology.
JPEG, PNG, SVG – These are the three most popular image file types on the web. For this tutorial, we're mainly going to focus on JPEGs and PNGs as they benefit most from compression and optimization.
JPEGs are usually better for high-fidelity images like photos and web graphics that don't have any transparency.
PNGs are great for things like icons and logos or anything that needs transparency. PNGs can also be optimized significantly after they come out of Photoshop or your graphics editing tool of choice.
Lossless and Lossy – These are compression methods. Lossless compress means your image won't lose any quality. Literally none at all. This involves stripping metadata from the image or anything that isn't affecting the quality.
Lossy means the compression algorithm will reduce the quality of your image. You'll get better compression results but you'll sacrifice image quality. Most lossy compression tools provide a percentage slider so you can choose the balance of quality over file size.
Protip: For large image backgrounds, I'll often blur the image a bit or add an opaque color layer over the photo. Reducing the detail and/or normalizing the color is a nice aesthetic style choice that significantly reduces the file size. You can see this in action on our jobs page.
How Much Should I Compress Images?
The goal of image compression is to reduce the file size as much as possible without sacrificing too much of the quality. This is as much of an art than a science and the level of “acceptable quality” will vary depending on the situation.
A photography studio will likely want to highlight their work at the highest quality, whereas a real estate website might be willing to sacrifice quality in return for displaying more images on the page.
Most image editing software allows you to export images at varying quality. Although, if you're using a dedicated image compression tool, it's sometimes best to feed that software the best quality possible and let it's compression algorithms work from there.
Image Compression Tooling Options
As I recently discovered, there is no shortage of options when it comes to tools and services for image compression.
I started with, and still prefer, ImageOptim. ImageOptim is only available on OSX, but it supports lossy and lossless compression for both JPEG and PNG files. It also can be configured to use Google's relatively-new compression algorithm, Guetzli. Guetzli, on average, can reduce file sizes 20-30% more than other algorithms.
ImageOptim is a program that lives in your Mac's Dock and you can simply drag and drop images onto the program icon and it will compress them. I tend to optimize one or two images at a time, so this solution works great for me. But, if you were working on a large number of images or images with large file sizes, some of the other options might be a better choice for big jobs.
Smush from WPMU Dev
Smush is a free WordPress plugin from WPMU Dev that can be configured to optimize existing images in your WordPress install and/or as you upload them to WordPress. Smush is great because the heavy lifting is done by WPMU Dev's servers and they both optimize and resize images.
If you're building websites for clients—particularly the ones that like to upload multi-megabyte images straight from their digital camera—Smush is a great option to set and forget.
TinyPNG is a web-based image compressor. You can upload your images (up to 5bm) and download the compressed version. This will use up bandwidth, so it might not be the best option if you're on a slow or pay-for-use internet connection. It supports JPEG and PNG file types. It's free of charge. It doesn't appear to offer any control over the quality level of the compression.
After playing with TinyPNG, I think I still prefer ImageOptim, but it would be a great option for Windows users, quick one-off jobs, or users that are specifically looking for a web-based compressor. Or, if you're trying to offload the processing to the cloud vs your local machine.
Imagify is another web-based SASS option that provides a dedicated WordPress plugin to optimize and resize images as you upload them or directly from the WordPress admin area. The Imagify WordPress plugin boasts an impressive 4.5 star average review and many reviews note that the image quality achieved with Imagify is better than the alternatives.
Imagify has a free plan that allows you to upload and optimize images under 2mb. The optimized version of the images will remain available to download from their servers for 24 hours.
JPEGMini is a SASS service which should appeal to folks looking for a workhorse solution. Imagine you're tasked with optimizing tens of thousands of high-resolution product images for an eCommerce store. JPEGMini would enable you to offload all of that processing to their, presumably, fast and optimized cloud servers.
ShortPixel is another web-based SASS. If you're looking to offload image compression to a cloud server, it's a great option to check out. Their free plan allows you to optimize up to 100 images a month and they have premium plans starting at $5/month for more. ShortPixel also has a WordPress plugin and they're the running favorite amongst the rest of the BB team.
What's your favorite?
If you visit the original Facebook thread that inspired this post, you'll see several other options and folks that prefer one or the other for a variety of reasons. Are we missing your favorite? Let us know what it is and why you like it in the comments.
Also, if you're the type that eats, sleeps, and breathes performance, this interview with Jon Brown about modern performance best practices will likely appeal.
Are you trying to decide between using Page Builders vs Block Editor? Choosing the best editing software during the website…