Image Compression Solutions for WordPress

WordPress

Best Image Compression Tools for WordPress – Lossless, Lossy, JPEG, and PNG

Robby McCullough - March 28, 2018

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.

Initial Terminology

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.

ImageOptim

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

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

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

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

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.

Imagify

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.

26 Comments

Raygun design on March 28, 2018 at 1:31 pm

Our vote is for Tinypng. We like their plugin which can optimise as you upload to your site – we like the Panda 🐼 too! We’ll take a look at ImageOptim too as we use Mac. Great list guys.
- Robby McCullough on April 30, 2018 at 11:35 am
  
  Haha. Yeah, most companies that have an animal mascot are pretty solid. 😂
Paul Steele on March 28, 2018 at 4:30 pm

Tinypng also has a Wordpress plugin https://wordpress.org/plugins/tiny-compress-images/ and their API is good to work with if you need to set something up server-side.
Toby on March 28, 2018 at 8:45 pm

Brilliant. I just started using ShortPixel. well designed, plugin friendly (Enable Media Replace) and cost effective.

Would really love to see an article integrating S3 Offload with Beaver, The bb-plugin caching makes it particularly difficult.
Chris on March 29, 2018 at 9:02 am

I use EWWW. For sites with tons of images license the unlimited with CDN. For 10 at a time use https://ewww.io/online-image-optimizer/
Mihai on March 29, 2018 at 10:51 am

I’ve tested all WordPress image compression/ optimization plugins for my 20+ WordPress sites, some of which with user-generated content (i.e. big-ass images) and for me, the best option, by far is ShortPixel. I’ve found their compression to have best in class quality/size ratio and their pricing model is fair. Plus – i am not limited by file size and they do optimize fully even if you’re on the free plan.
Dhiraj Das on March 31, 2018 at 11:05 pm

I have been using TinyPNG all this while, they seem to bloat up the image after uploading and then compress it (I might be wrong, but I see heavier image size after uploading than the actual size) Never knew about ImageOptim looks like a very handy tool.
Lucas on April 4, 2018 at 5:58 am

Nice review. Before uploading, I use webresizer.com as an alternative to TinyPNG. They give you good control of the final product. They have a bulk resizer/compressor, but it’s best used with a number of images that should all be the same size.
On our site, I’ve found Imagify to work well.
a305587 on April 10, 2018 at 10:17 am

These services are great, thanks for compiling this list.

I want to point out that if you were already using Photoshop, you can also do this through Photoshop. Instead of “Save As…”, go to:

File –> Export –> Save for Web (Legacy)

Then in the preset change to JPEG High, JPEG Medium, or JPEG Low compression. Then click “save”. This achieves the same result as the above services.
- Robby McCullough on April 10, 2018 at 3:11 pm
  
  Surprisingly, many of these tools and services are better at reducing file size than photoshop.
- Tom Nguyen on May 2, 2018 at 3:07 am
  
  I do the same with Photoshop, but I believe ImageOptim and Smush will reduce the file size even further without a noticeable loss in quality.
Jake Hawkes on April 11, 2018 at 7:56 am

I think that folks should be looking at content optimization tools like IMGIX and Cloudinary much more seriously.
Ann Iashin on April 15, 2018 at 8:56 am

You better use compressman! It doesn’t use internet and it is website only 😀
dmergus on April 19, 2018 at 6:52 am

We tend to use Smush and Short Pixel for our clients. Short pixel provides better compression but Smush is also good, set and forget about it.
Greg Hyatt on April 23, 2018 at 7:25 am

I’m a huge fan of using ImageOptim on OSX! I use it on every image that I send to the web, regardless of which platform it will be shown across!
Sridhar Katakam on April 26, 2018 at 7:10 pm

Regarding the settings changes in ImageOptim, do you leave the Optimisation level at the default, Extra?
- Robby McCullough on April 30, 2018 at 11:34 am
  
  In most cases, yes.
Omer on April 26, 2018 at 9:56 pm

I’m surprised no one mentioned Kraken.io (https://kraken.io/). It can be used from their web interface or as a WordPress plugin.
- Robert Rutledge on May 3, 2018 at 10:07 am
  
  I use Chromebook an that looks like a good alternative. I have been using http://guetzliconverter.linuxadm.hu/
gelform on April 29, 2018 at 6:06 am

The best library I’ve found for PNG is PNGQuant, but struggled to get it to work locally. So now I run all of my images through http://compresspng.com/ which uses PNGQuant. Huge improvement over ImageOptim.
Tom Nguyen on May 2, 2018 at 3:05 am

I’ve used ImageOptim and the Smush free version. I especially love Smush. Are there any other benefits to upgrading to the paid version other than being able to optimize more images at a time?
- Robert Rutledge on May 3, 2018 at 10:04 am
  
  This optimizes far better than Smush in my opinion.
BuildupYouth on October 26, 2018 at 2:07 am

Thanks for the list.. currently using Smush from WPMU Dev and it’s working perfectly..
Ronald E Ford on November 21, 2018 at 8:01 pm

I know I’m probably outdated either this but I get great control of image compression with Fireworks. In my humble opinion the best raster/vector program out there.
Jake Hawkes on November 22, 2018 at 1:09 pm

Fireworks was or is a great program. I have not used it in years, however, it may be time to open it back up to see how much I miss it.
Himani Bhardwaj on December 18, 2018 at 10:46 pm

Thanks for this nice article! I am using Image Optimizer plugin for my site.