Optimizing Images in WordPress
These days, image-heavy design is the norm. The web is a visual experience and including high-quality photos in your content – often multiple per page – is key to attracting and converting traffic. But with every image you include, the time that it takes to load your website increases, and a website that is slow to load can kill your conversion rate too. So what to do?
This post (and its related meetup!) is all about optimizing images for the web – a.k.a., how to make it possible to include lots and lots of beautiful images on your website without hurting your page speed or user experience.
What do we mean by Image Optimization?
The short, TL;DR answer: Image optimization is a process through which we improve our images so that they load faster on the web
Image optimization is both an art and science: an art because there is no one definitive answer for how best to compress an individual image, andImage Optimization, Google Developers Guide
a sciencebecause there are many well developedtechniques and algorithms that can significantly reduce the size of an image .
Image optimization includes several different steps and, as referenced above, not all steps will be right or the same for every image. When we’re thinking about reducing image size at Road Warrior Creative, my marketing agency, we generally approach it in two different ways:
- optimizations that happen to the image offline – before it even gets uploaded to the website, and
- optimizations the can be done on the website.
Let’s dive a little deeper into those two things.
How To Optimize An Image Before You Upload It
There are several ways to optimize and image before you even upload it to your website, and the first is by determining if you really should be using an image in the first place!
Eliminate Improper Use of Images
Including photos or graphics throughout your content is great, but if your image has text on it, think twice before you upload!
We frequently see people make posters or graphics for events and then post them directly into blog posts or static pages on their websites, often with little or no accompanying text. Not only is it bad for accessibility to have text and vital information on an image (because it’s invisible to screen readers), but it’s also bad for mobile users who will have to zoom in to read the text and, you guessed it, these types of images are also typically very large files.
This image, for example, is great for marketing on social media or in an email, but not good to embed directly on a web page:
If you have images like this, they should be built as web pages, where some parts of the
Use the Right Image Format
There are two types of image formats:
- vector graphics that use lines and shapes to represent an image and that can be scaled up or down without losing quality, and
- raster images that use pixels, and will lose quality if zoomed in or size up from the original image size.
Most images that typical users will upload are raster images. These are file types like JPEGs, PNGs, and GIFs. We’ll come back to these in a moment.
An example of a vector file
Typically, SVG images are used more by WordPress developers when building themes or plugins, but you can try adding them too! WordPress’ media library does not support SVG uploads by default,
Note that came up during our Meetup: Because they are made of code, it is important to be aware that SVG files can contain malicious code that can harm
JPEG and PNG Images
JPEG or JPG images are what you’ll most commonly see on the web. This is the type of file that your camera saves when you take a picture, and have the ability to be optimized for the web, typically with a smaller file size
PNG files were made for web viewing – they don’t support print-specific color modes, and they have support for transparency, which
Save Your Image for the Web
One of the biggest mistakes we see people making is not saving their images for the web prior to upload. Don’t take a full-size image from your camera or Shutterstock, and upload it directly to your WordPress site!
An image is considered “saved for the web” if you have done the following:
Size the Image for Use
At most, your image should only be 2x as large as the size at which you intend to display it. The 2x consideration takes into account retina devices that may make your image look pixelated when displayed at twice the pixel density, but in my experience, this typically only matters for graphics like logos and icons, not photographs.
What does this mean in real life? If you use images that are 900px wide on your blog, then you should typically upload either a 900px wide image or, at most, and 1800px image. Don’t upload photographs that are 5000+ pixels wide! This is way too big and unnecessary.
Reduce Pixel Density to 72dpi
Pixel density refers to the number of pixels that are in an inch. In print we use 300dpi. Some cameras take images that have thousands of pixels per inch. On the web, all you need is 72 pixels per inch. Your images will still look great and your image size will be cut in half.
Remove Image Meta Data
Image files often have lots of unnecessary meta data saved in the file – information about the camera that took the image, location, etc. Removing this unnecessary data will significantly reduce your image size.
How to Save Images for the Web
You can save images for the web using a photo editing software like Photoshop or Lightroom, or Gimp a free, open source photo editor. If you have a Mac, you can save images for the web in Preview, and on a PC, you can even do many of these optimizations in MS Paint.
Optimizing Images in WordPress
After you have prepared your images for upload and you get them on your website, that’s not the only thing that needs to be done to ensure that they’re loading quickly.
First, a reminder to always use the right image size! I cannot emphasize that enough. This is especially important for WordPress theme and plugin developers to keep in mind when developing their products.
Add An Image Compression Plugin
An image compression plugin will further optimize your images by stripping unnecessary data and compressing the image as much as possible to reduce the size of the file. There are websites, like TinyPNG.com, where you can upload and compress infinite images for free,
Here is some information on popular image compression plugins for WordPress that you might like to check out. There are more than are included on this list below, however these are some of the top on our list.
WP Smush (Free)
WP Smush is a very popular free image compression plugin. You can find WP Smush on WordPress.org here. This is a good introductory plugin, however it does have some downsides:
- You can only bulk smush 50 images at a time.
- It will not optimize images over 1MB in size
- It doesn’t perform well in comparisons (more on this below)
WP Smush Pro
This is the professional version of WP Smush. It does a great job of optimizing images down to a much smaller size without losing quality, and with the pro
This $49/month grants you access to all the plugins made by WPMU Dev, this author of WP Smush, however, if WP Smush Pro is all you need, that may seem like a hefty price tag, depending upon your budget and the number of images that you need to compress each month.
TinyPNG WordPress Plugin
The same website referenced above has a TinyPNG WordPress plugin that allows you to optimize images as you upload them to your media library. TinyPNG will optimize all image types (not just PNGs), so don’t be fooled by its name. It does a great job compressing images.
TinyPNG is a freemium plugin, which means you can use it for free up to a point. You can compress up to 500 images each month for free. After that, you’ll typically pay $0.009/image compression.
ShortPixel is another freemium WordPress plugin for compressing image. On the free plan, you can compress up to 100 images per month. After that, there are several pricing tiers based on volume; 100-5000 image compressions per month is $4.99, for example.
In our tests, ShortPixel did the best job of compressing images to
reSmush.it is a free, open-source image compression plugin with no paid version.
Which Compression Plugin Should I Choose?
With all the options out there, you may be wondering which plugin to choose. I don’t think there is any plugin that is right for every website, because every website and website owner has different needs. Here are some things to consider when choosing a compression plugin:
- How much to you need to reduce image file size by?
- How much do you care about image quality in the final image? Final image quality probably matters a lot more to a photographer than a lawyer, for example.
- How many images will you upload to your site every month?
- How many images sizes does your site generate every time you upload an image? Core WordPress likely generates at least 3 sizes; your theme and some plugins will also generate some – all of these count against any image quotas.
- How large will your starting files be? (Hopefully not more than 5MB… 😉
- What is your budget?
Do A Compression Test
If you are trying to decide between a couple of different ones, try running a compression test! Install both plugins either on the same site, one at a time, or on different sites. Configure them similarly, then upload the same image to see how the images look and by how much each plugin is able to reduce the file size.
We recently ran a similar test. We offer WordPress website hosting to our clients and wanted to start including image compression software in every website we host. For this test, we tried all the plugins above, except for TinyPNG. Here is the original images that we tested
Obviously, this image is massive and is completely wrong for the web. It hasn’t been pre-optimized at all, and
Here are the results, in order from least reduction in file size to most (largest file to smallest file). All image sizes listed, reference the file size for the “full-size” image
In the above compression test, ShortPixel was the best as reducing file size, but had noticeable image quality loss – the edges of some of the peppers and mango pieces were blurrier than we would prefer. WP Smush Free barely reduced the file size, and WP Smush Pro and reSmush.it had the most noticeable difference in color vibrancy – we guess that was as a result of those plugins changing the color mode from CMYK to RGB.
After looking at final results, we ran one more test, first saving the image for web in a normal RGB color mode, and WP Smush Pro was able to reduce the file size to 210KB with no
This one did lose some “vibrancy” but that happened at the time when we converted it RGB color mode in Photoshop, not during compression.
What We Chose
If you’re wondering what we chose, we ended up deciding to go with WP Smush Pro. This does not mean it’s the right plugin for you, but it was for us, largely because we were adding it to 50+ sites and did not want to have to worry about potential costs when paying on a per-image basis or having to limit image size or number.
If you have fewer sites and have total control over what’s being uploaded, one of the other options might work perfectly for you.
What is the ideal size?
During our meetup, someone asked what the ideal size is. Unfortunately, there is no clear answer to that. As mentioned above, optimization is a little bit science and a little
The ideal size for an image is as small as you can possibly get it without making it noticeably bad to look at.
If you really want an ideal size, then you need to do a little math. Your total page size for initial load should be under 3MB. Do a speed test of your page or post, with no images added in see how large the page is. Subtract that from 3MB and you’ll know how much “space” you have left for images.
Other Ways to Speed Up Your Site
Optimizing images is just one way to speed up your website. If you’re interested in approving your site speed, please check out the case study linked above (in the SVG section). You may also want to do some research into:
- how your hosting impacts website speed,
- adding something like “lazy load” to incrementally add things to the page as users scroll, and/or
- improving your website’s code.
Have comments or questions about image optimization? Get in touch! You can leave a comment below or, you can find contact information to call or email me directly on my website, RoadWarriorCreative.com.