Optimizing images used to be done in two ways: resizing and compression. However, in modern age of web development you have choices. There are tools to resize images in real-time, and you can use preloaders to load images on-demand. On top of that, modern developers try to use as much as CSS3 as possible to supplement the need for additional visual effects: typography and shapes.
In other words, the more optimized are your visuals, the less amount of time it takes for a client to download files, and load other necessary page elements.
And lastly, there’s been an enormous rise in platforms that provide content optimization services on the fly. Namely, Content Delivery Network (CDN) providers. But, before we take a closer look at different tools, plugins, and techniques for image optimization, let’s first understand the importance of website performance.
Why is image optimization important?
If you look at the overall data of the last 8 years for average page weight, there has been an enormous 230% increase in page size, and a massive 190% growth in the amount of bytes that an image takes up on a page. This data is provided courtesy of HTTP Archive.
There has been a lot of talk about people’s attention span spinning into a decline over the years, which means that slow loading pages are more likely to scare visitors away. But, attention span isn’t the only caveat that can have a huge impact on your website’s success.
Google has been rather vocal about the importance of page speed, and how page speed affects search engine rankings. In other words, you can write the best content in the world, but if your site loads 50% slower that your nearest competitor, then Google is going to favor your competitor based on the criteria of site speed.
Tools like Google PageSpeed Insights and Pingdom provide a streamlined overview of website performance in general. You can analyze page loading times from different locations, see potential issues, but most importantly, get a clear overview of which resources take most time to load.
Luckily, even if you have fallen behind on optimizing your WordPress images; there are a lot of helpful plugins and tools to help you rectify any losses you might have experienced. And with that being said, let’s start by exploring the best WordPress plugins for image optimization.
WordPress Image Optimization Plugins
The beauty of plugins is that you can install, activate, and manage them from your WordPress dashboard. There’s no need to ever leave your site, but you can still reap all the benefits.
In nearly every case, a WordPress plugin should be able to help you resolve all performance-based issues in regards to image optimization. Our following review is based on personal experience, and also the viability of each plugin under unique circumstances.
Which plugins are we going to review?
Here is a list of names for the plugins we’ll be showcasing in this post:
After reviewing each plugin separately, we’ll add simple table data to display the optimization for each plugin. Scroll further down to see that data.
Smush: Compression & Optimization All-in-One
Smush started out as an average compression plugin that has since grown to more than 1M+ active installs. Things that make Smush so successful are its integrated features for compressing files and optimizing them on the go. Further, none of the file compression happens on your server, but is instead managed by WPMU DEV services.
The most notable features of the Smush free version are optimization upon upload, EXIF data management, and custom image dimensions. Uploading new images and then compressing them is quite frankly counterintuitive.
As a result, Smush automatically optimizes new images as you add them to your WordPress site. Likewise, you don’t need to edit image dimensions manually, as you can specify a set Width and Height for all new uploads.
Signing up for the Pro version will enable features like lossy compression, file format conversion, create copies of original images, and the ability to Smush larger images; up to 32MB. Most importantly, even though Smush sends your images to WPMU DEV servers, none of your photo data is stored for any reason whatsoever.
Imagify: Advanced Image Compression
Imagify boasts a pleasantly designed dashboard panel for all your bulk optimization needs. The settings in this plugin are based on three different use cases. Normal is for basic lossless compression, Aggressive enables lossy compression, and Ultra settings add even more lossy compression.
In other words, using Normal settings will provide best compression results whilst retaining crisp image quality. Whereas Ultra settings will favor compression over quality.
Even if you have never optimized your WordPress images before, the Imagify plugin will help you get caught up in no time. Head over to the Bulk Optimizer to quickly optimize your entire WordPress Media library. Further, any new images you upload in the future will automatically be processed, too.
The free version of Imagify provides just enough bandwidth to help you with optimizing up to 500 images. Imagify will reset its bandwidth limitations on a monthly basis.
It goes without saying that if you manage a large publication and/or blog — signing up for the paid version (unlimited compressions) is the way to go.
ShortPixel: Comprehensive Image Optimization
ShortPixel provides an enormous amount of features and settings, many of which help you to take better care of photo presentation for your site. Because of a custom-built compression engine, ShortPixel uses as little of your server resources as possible. This is good news if your website is hosted on a shared hosting account, or even an affordable VPS.
You can choose from Lossy or Lossless compression types, but also Glossy which provides high-quality optimization for JPEG files; ideal for photography professionals. Apart from Glossy which is limited to JPEG — ShortPixel optimizes JPEG, PNG, GIF and PDF type of files.
As you can tell from the snapshot above, there are a lot of settings options. So, here’s a rundown of the most notable settings.
Key Features:
- Automated optimization for thumbnails. Realistically, thumbnails will always be your most viewed type of image. It’s the first image new visitors see when they land on your homepage, so optimizing thumbnails beforehand is bound to provide a faster loading experience.
- ShortPixel works for images outside of the Media Library. For example, you can specify a folder on your server and ShortPixel will optimize the files inside. Further, you can select to optimize NextGen Gallery photos specifically.
- In-built support for WebP conversions. WebP lossless images are 26% smaller in size compared to PNGs.
- Custom resizing options for large images without losing aspect ratio.
Table Comparison: Smush vs. Imagify vs. ShortPixel
The following data is based on a 658 JPG photograph. Even though the differences might seem vast — relative to the sample size — be mindful of the features for each plugin.
| Plugin Name | Original File Size | Optimized File Size | Compression Percentage |
|---|---|---|---|
| Smush | 658 KB | 266 KB | 59% (Lossless) |
| Imagify | 658 KB | 307 KB | 53% (Lossy) |
| ShortPixel | 658 KB | 227 KB | 65% (Lossy) |
ShortPixel seems to come out on top, followed by Smush and Imagify. Keep in mind, this test was concluded on a JPG file as it is the most common image type on the web. Test results may vary between different file formats, and overall image quality. Nevertheless, we believe all three plugins have a lot to offer on their own.
Tools for Optimizing Images
Compared to a plugin, tools is something you’re going to use outside of WordPress. There are numerous scenarios in which you might want to optimize images from your browser, or from a computer. Lastly, we will also share details on a (free!) book that explains image optimization for the web in-depth.
Which tools are we going to review?
Here is a list of names for the tools we’ll be reviewing:
TinyPNG
TinyPNG provides intelligent Lossy compression for PNG and JPG files. Through a process known as color sanitation, TinyPNG can shave off a great deal of bytes from all your images. And the results are phenomenal, providing massive file size deductions without the loss of image quality. A noteworthy feature is the TinyPNG Analyzer — a simple tool for scanning your website to see how much data you can save by compressing your photos.
One of the features we love about TinyPNG is its preservation mechanism. Meaning, images compressed by this tool retain their original metadata; date, copyrights, and location data. As a result, whenever someone tries to take a photo from your website, you can retain all the rights regardless of where your photo is being used.
Since this is a web-based tool (although, there’s a plugin, too!) you can literally optimize your photos from anywhere, as long as you have an internet connection. If your access to WordPress is limited to work hours only, then this is the next best thing to compress photos while you operate outside of your daily routine.
Squash 2
Squash is an exceptional image compression application for Mac users. It’s fast, intuitive, and provides a diverse set of features. The motto of Squash is that you should never lose image quality at the expense of compressing its size. As a result, Squash retains a solid track record of keeping image quality high, and image size low.
The nice thing about using computer software is that there’s no limitations of any kind. On top of that, software doesn’t rely on internet connections and provides unlimited processing power. And out of the hundreds of similar apps on the market, Squash stands out as the most refined image optimization solution out there.
Key Features:
- Drag & Drop — Whether it’s a folder of ten images, or an entire hard-drive that you wish to optimize; Squash supports simple drag & drop functionality.
- File Conversion — Squash will convert RAW, TIFF, CR2, and PDF files into JPG format. Usually this is done using software like Photoshop, which can be absurdly expensive for such a mundane task. Most importantly, you can bulk convert any amount of files simultaneously.
- File Names — When you save your optimized files, you have the option to specify new file names or add a unique affic to each file. Adding can affix can help to brand your photos for future use.
- Documentation — A wonderful Documentation section on the official site explains many tips and tricks on how to use this app to its fullest potential.
Adobe Spark
Ten years ago, when blogging was still in its inception phase, visual additions to content were borderline nonexistent. Whereas nowadays, you’re almost required to use visual content because of its immense marketing benefits.
Tweets that include visuals get up to 200% more social shares than those without. Furthermore, an in-depth analysis concluded by BuzzSumo showed that content with a generous amount of images saw a double the amount of social shares that content with only one or two images.
Adobe Spark is a web-based platform for crafting visually appealing images, pages, and social media content. You can upload your own images, and add a selection of effects, text, and shapes. All content created by Spark is automatically resized for each social network specifically.
In essence, Spark is a means to improve photo presentation. You can inspire yourself by exploring the Spark Library to see what kind of visual content users from all around the world have created.
Essential Image Optimization
Addy Osmani is an Engineering Manager working on Google Chrome. He has built numerous successful open-source projects like Lighthouse, Material Design Lite, Yeoman, and is also an avid contributor to the web performance optimization movement. His book, Essential Image Optimization, combines countless years of experience in design and development to provide a succinct workbook for anyone interested in high-level image optimization.
The book, which is published in easy to read digital format, provides a wonderful explanation for the way that images on the web work. Addy explains the basics of image formats, and goes into detail about the advantages of JPEG, WebP, and SVG image types.
Each section includes detailed visuals to present technical background information in easy to understand manner. After finishing this book, you should have full understanding of how images interact with web servers, and the browser itself.
If you’re someone who works at a large organization that deals with hundreds of thousands of images, then this book is an invaluable asset in helping you to improve your product performance.
Closing words
It’s safe to say that the days of long-form text content are gone. Modern SEO emphasizes the need for images, videos, and other forms of visual content. It’s what keeps visitors engaged, and in many cases, it’s what keeps visitors returning to your site. You don’t have to go back and edit your previously published content, even though it’s a good idea, and starting with incremental additions of visuals inside your new articles and posts is enough.
As you experiment with our recommended plugins, start getting used to this workflow of image optimization, and soon enough it will become second nature. Should you need additional help, have unanswered questions, or simply wish to express feedback; we have a dedicated comment section below where you can submit your ideas.