How To Optimize Images In WordPress

One very important skill for any WordPress user to learn is how to optimize images in WordPress. Most bloggers tend to grab the image they want to use for a particular post and upload it without regard for its size and the impact it has on the visitor. Simply put, the bigger the image, the more time it’s going to take to load which affects both the visitor’s experience and Google’s page rank.

Why Should I Optimize My Images?

As I mentioned, Google has adjusted its page rank algorithm (a geek word meaning the formula they use to compute page rank) to include page load speed. It should be obvious that a large image is going to take longer to load than a small one. Multiply that by the number of images on the page and you can see the potential problem.

A client forwarded to me the other day an email she received from one of her visitors. The email address showed that the visitor is from Spain. The visitor said that the very large infographic in my client’s latest post wouldn’t load fully on her computer. I checked the image and it was over 7MB in size. No wonder it was loading slowly!

My client hadn’t noticed any load problem because she has a fast broadband Internet connection. Apparently, her Spanish visitor does not. While most of us enjoy the speed of a broadband connection, there are still many who have much slower service. We need to be mindful of these folks when creating our posts and pages.

What Is A “Large” Image?

In this context, “large” means the size of the image file, as opposed to the amount of space it takes up on the screen. The example above was a rather large infographic which was as wide as the post column and quite tall requiring a bit of scrolling to see the whole thing. As I said, the image file was over 7MB in size. This is bordering on humongous in terms of WordPress images!

So What Does “Optimizing” Mean?

When I refer to optimizing, I’m talking about making the image the correct size for the application which means not only the file size, but the image resolution, as well. Even a very large infographic such as described above can be made a reasonable size without losing significant image quality. While there are more high resolution displays these days than previously, it still doesn’t make sense to post 600 dots-per-inch (dpi) images when most monitors can only display around 100 dpi. All that extra quality is wasted and simply takes up bandwidth for no good reason.

In the above example, the infographic my client used was way larger than the available display area on her blog, so she used WordPress’ ability to display the image smaller than its full size so that it fit in the space. Visually, this works fine. Behind the scenes, however, the entire 7MB file was still being loaded each time and simply being told to display smaller than full size. In other words, telling WordPress to display the image smaller than full size only changes the display area. It does not reduce the size of the image file being loaded into the page.

How WordPress Stores Images

You may have noticed when you upload an image to insert into a post or page that the Media Library creates several different size copies of the image. You have the full size, of course, and depending on how large the full size is, there may be two or three smaller versions plus a thumbnail. You get to choose which of these you want to insert into the post, and the rest remain on the server whether you use them or not.

There is a certain efficiency to this process in that if you want to use a smaller than full size image, you can do so without loading the full image file. The problem, of course, is that you’re still taking up server space with the unused image files.

So How Do I Optimize My Images?

The first step in optimizing is to determine how large an area you want to use to display the image. In the case of an infographic, you’ll probably want to do the full column width, so you’ll need to know the column width in pixels. In the case of my client’s site, her post column is 535 pixels wide. You want to leave a little room on the sides of the image for margins, padding, etc. so in this case 520 pixels would be a good size.

Check the image before you upload it to see how large it is. On Windows machines, you can right-click the image file and click Properties. Depending which version of Windows you’re running, you may need to click a Details tab to see the size in pixels. In the case of the infographic on my client’s site, the original image was 1845 pixels wide and 13,167 pixels in height. Obviously, this is way over the available space, so step 1 is to reduce the size to the desired 520 pixels width.

I use an online image resizing application called PicResize.com for quick one-off image resizing. I have other graphic tools available, but it’s quicker to go to http://picresize.com than to fire up a full blown graphics application. PicResize is very simple to use. Just browse your hard drive for an image file, or drag and drop it onto the PicResize page, then click the “Continue” button.

PicResize will upload the image and display it along with its current size and a dropdown with options for resizing. I typically choose Custom Size and enter the width and/or height I want. You only need to enter the width. The program will figure out the correct height to maintain the image’s aspect ratio. You may crop the image and otherwise edit it, but most of the time, a simple resize is all that’s required. After entering the width you want, click the “Resize My Image” button. In a few seconds, the program will provide buttons to download the resized image, among other things.

The downloaded image will be named “rsz_originalname” to distinguish it from the full size image. That way you don’t have to worry about overwriting the original image. You can, of course, rename it to whatever you’d like. The file format will default to the original format, e.g. JPG, but you can save as PNG or several other formats.

Now that you have your resized image, you can upload to the Media Library and insert it into your post. In this example, the original 7MB file was reduced to 1.5MB in JPG format and 850KB in PNG format. Quite a difference! Needless to say, the smaller image file loads much quicker benefitting both the blogger’s page rank and the visitor’s experience.

Advanced Optimization

Resizing to the correct size is the first step to take and usually sufficient, especially when using only one or two images in a post. If you have multiple images, you may want to take some additional steps which I will cover another time. There are plugins that manipulate images to optimize them and many other tools and tricks with Photoshop and other such applications. As I said, though, it would be unusual to have to resort to these methods for a typical post. Simply resizing will get the job done a large percentage of the time.

John Sawyer