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, and a science because there are many well developed techniques and algorithms that can significantly reduce the size of an image.

Image Optimization, Google Developers Guide

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:

1. optimizations that happen to the image offline – before it even gets uploaded to the website, and
2. 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 graphic stay images (though are now broken apart into many smaller images), like the speaker photos, and other parts are created with text or CSS (the coding language that controls the visual appearance of your website).

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.

SVG Images

An example of a vector file type that you may see on the web is SVG, which stands for Scalable Vector Graphic. SVG files are great for illustrations and icons, and can dramatically reduce the speed of a website’s load time, especially if they are minified with a tool like svgo. See this case study from my friend Mike.

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, however you can install a plugin, SVG Support, to enable support for SVG files in WordPress.

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 your or your visitor’s computers. For that reason, you only want to add SVG files that you have made yourself (with a program like Adobe Illustrator) or have sourced from a reliable source like The Noun Project, not any random SVG that you’ve downloaded from the web.

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 that PNG files.

PNG files were made for web viewing – they don’t support print-specific color modes, and they have support for transparency, which allow them to be layered over other elements. PNG files can have clearer, crisper lines, which makes them ideal for logos or graphics with text (keeping in mind what we said above!), but their file size can be larger, so they should only be chosen over JPEG images if absolutely necessary.

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, however it saves time to add a compression plugin that will compress your images on the fly, as you upload them.

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 version there’s unlimited smushing – in both image size and number of images. The downside? It’s $49/month.

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.

Short Pixel

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 a smallest file size, however the images also had the most noticeable difference in quality.

reSmush.it

reSmush.it is a free, open-source image compression plugin with no paid version. It does a fair job of optimizing images and as no limits as to the number of images that can be optimized each month, however it will not optimize images over 5MB.

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 it’s color mode is even wrong! This image is designed for print, not the web, but we wanted to put the plugins through their paces.

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 noticable color loss:

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 bit art. The art part comes in as you try to determine how much you can compress an image file without losing image quality.

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,
• caching,
• adding something like “lazy load” to incrementally add things to the page as users scroll, and/or
• improving your website’s code.

Questions?

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.

Don’t forget to check our meetup page for upcoming events!