Visual impact is one the most important features when it comes to an impactful content marketing plan. Welcome to a brand new post series – The Ultimate Guide to Image Management in WordPress.
It is designed to give you the tools necessary to manage you image assets in WordPress – right from technical optimizations, SEO, CDN integration, and library management. In this multipart guide, we will only recommend those methods, tutorials, plugins and themes that we have tried or are recommend by industry experts.
We will also avoid blindly suggesting plugins that have a high usage in the WordPress repository. Rather, we’ll recommend the ones that strike the perfect chord between value proposition and performance optimization.
You might wonder how we’d go about doing that. 24,000+ downloads of our Total – Responsive Multipurpose WordPress theme in ThemeForest might not be a great indicator.
Well, we’ve scoured the best blogs from the industry-leading WordPress hosting companies (such as WPEngine and Pagely) and learned what they learnt when serving billions of pageviews across thousands of high-profile clients. We’ve compressed all this information for you into tiny paragraphs and bullet points for your online success. Now let’s get started, shall we?
Technical and Performance Optimization Tips for WordPress Images
There are quite a few image optimization options available in WordPress that do not put unnecessary load on the web server. We’ll look at some of the most common image optimization tips that everyone should follow, along with a few others that come in come in handy in special occasions.
JPG or PNG? Using the Correct Image Format
The very first step in image optimization is a good start. They say a job well begun is half done. That’s exactly the case when it comes to image optimization in WordPress. It all starts with choosing the right image format. JPG and PNG are the two most common image formats used online in content marketing.
The trick is to understand which format to choose for each type of image. Picking the wrong one causes a monumental increase in image size. Here are the rules.
When to use PNG format?
For flat images – such as vectors, illustrations, fonts, logos, banners, shapes, banners, etc. – anything that is created in a vector format such as EPS or Adobe Illustrator (.AI) format, use a PNG. You’ll end up getting an optimized image with almost zero quality loss. If you use a JPG in this case, you won’t compromise on size, but might run out on quality. In fact, at higher resolutions, the PNG would be lighter without quality loss. The JPG would suffer.
Take his example. We’ll create a flat image at 5000px and save it as a JPG and PNG.
In a nutshell, the JPG image was 455% higher than the PNG for the same resolution.
When to use JPG format?
For everything else, use a JPG. Anything other than a flat or vector image, use JPG. Photos of people, places, things, etc. – use JPG. Almost all stock photos under this category use JPG. If you use PNG in place of a JPG, you would run into some serious performance issues.
You need to be extra careful in this case. If you use a JPG in place of a PNG, there would be little or no damage. However, if you use a bloody PNG in case of a JPG, you create a lot of room for damage. Take a look at this example.
Setup: I’ve downloaded this image from Shutterstock, which weighs around 10.3MB at a resolution of 6149×4562 – essentially a 28MP stock photo. Unless we’re preparing something like a print-ready brochure, we won’t be using full resolution of the photo in our blogs. Let’ say we have a fixed max image size of our blog of 1600px.
Experiment: We’ll resize the source image to 1600px and create four versions – two for PNG format and two for JPG. For each format (JPG/PNG), we’ll use the (a) recommend compression settings and the (b) maximum compressions settings.
Results: Here are the results in a nice chart for you to follow:
Original Image (KB)
|Format||Settings||Size (KB)||% Reduction|
|JPG||Progressive, Quality = 85||231||98%|
|Non-Progressive, Quality = 85||239||98%|
|PNG||Compression = 0||5575||49%|
|Compression = 6||1852||83%|
|Compression = 9||1750||84%|
From a first glance, one might think that 84% compression of PNG is good enough versus the 98% achieved in JPG. That’s not entirely true. If you take a closer look at the image sizes, you would see that the PNG weighs a little over 1.7MB whereas the JPG is 0.22MB. Which means, the PNG is 8 times heavier than the JPG version of the same image at the same resolution. In other words, for the same image and resolution, the JPG version is 700% lighter than the PNG!
For the same image and resolution, the JPG version is 700% lighter than the PNG!
As a rule of thumb, use PNG for flat images and JPG for everything else.
Checklist for Uploading Stock photos in Blogs
There are tons of blogs where editors directly upload the full resolution version of the image in their blog posts. Here are a few pointers for uploading stock photos to blogs. I use a free software called IrfanView which has a lot of awesome features. I’ll illustrate each one for you.
1. Resize your Image
First off, you need to decide a max resolution for all your images in your WordPress site. Any image above that dimension would be resized, unless of course it is smaller.
IrfanView has a Batch Conversion feature (press B after launching the app) which can apply a list of functions to a bunch of images in one go. For our purposes, the functions include resizing, cropping, adding a watermark, etc.
2. Remove EXIF Data
Photos clicked on a regular camera have a lot of embedded metadata – which is nothing but tiny (but useful) bits of information about the image. Examples of such info include GPS coordinates of place were the pic was clicked, ISO settings, camera model, etc.
Unless we’re photo-blogging, we generally don’t want such info in a blog post’s image. When you save or batch convert images in IrfanView, EXIF data is typically removed. This helps in preserving your privacy – especially your physical location. The size difference for most photos is about 200-300 KB per image.
3. Save as Progressive JPG
A progressive JPG image loads the image layer by layer – thereby speeding up the load time. Content Delivery Networks such as KeyCDN have started automatically converting JPGs to progressive JPGs to speed-up image delivery and optimize storage.
4. Set the DPI to 72
DPI or dots per inch is a measure of quality of the image. A high DPI value is used for print material. For the web, a value of 72 is perfect.
Okay, so summarising the above, following are my settings. I run this feature once I’ve compiled all the images for my blog post – before uploading the images to WordPress.
5. Optimize your Images
No matter whether you’ve used JPG or PNG, you need to optimize your image. There are a lot of seriously awesome online tools that help you optimize your images and save a lot of space.
I’m talking about services such as TinyPNG or TinyJPG that simply optimizes your PNG/JPG images with some advanced algorithms.
To be honest, I don’t know how the algorithms work, but they do and I’ve always been able to get a reduction of 50-70% no matter how best I save them.
You can also buy the pro version of the service as a Photoshop plugin for $50 USD. Both Windows and Mac versions are available. For my purposes, the online version (coupled with the Save to Dropbox feature) works best.
Image Optimization Plugins in WordPress
So far, we’ve learnt the steps of getting started right. What if you’ve stumbled upon this post now, and already have 100s of images uploaded? Well, here are some plugins to help you with that:
EWWW Cloud Image Optimizer
This plugin is a fork of the original and wildly popular EWWW Image Optimizer plugin. Amassing over 500,000 download, this image optimization plugins allows you to optimize images as they are uploaded to WordPress.
What sets it apart from the competition is its ability to optimize existing images in your database, which results in a huge performance bump. It also saves significant bandwidth costs since most of your traffic come from old articles. You can also optionally choose to enable lossy image compression (which is barely visible to the naked eye) but can save a lot of space and bandwidth. In terms of optimization technology, it can use TinyPNG or TinyJPG’s API to optimize new and existing images.
But here’s the problem. A lot of hosts (including WPEngine) do not allow the EWWW Image Optimization plugin since it puts a lot of additional load on the server. If you somehow manage to bypass the server restrictions, you might risk your account getting suspended due to policy violations.
This is where the EWWW Cloud Optimizer plugin comes to play. It offloads all the computation required to optimize the images to the cloud and simply replaces the unoptimized images with the optimized ones. Since virtually zero CPU power is used for compression, there is no additional load on the sever. This is valid for all new and existing image conversions in your WordPress site.
Plans & Pricing: As one would expect, the plugin is not free since the developer must pay the cloud computing bills. However, the pricing is extremely reasonable costing $9 USD for 3000 image optimizations for a prepaid subscription.
The EWWW Cloud Optimizer plugin is designed beautifully. The media scanner tells you how many images you need to optimize prior to making a purchase. Based on your server’s images, you can purchase a relevant prepaid plan.
TinyPNG WordPress Plugin
This another great image optimization plugin that integrates directly with the TinyPNG/JPG service. It automatically new and existing images uploaded to the WordPress media library. This plugin offers a free plan of 100 image optimizations per month.
Freddy had compiled a list of image optimization plugins a while back – give it a read if you’d like to know more on the topic.
This brings us to the end of the first post in this series. In the next article, well learn how some lesser known image optimization tips and tricks such as preventing hotlinking, fetching images from remote servers and the like. Do you have some tips under the getting started right category? Let us know in the comments below.