WordPress
Article

Optimizing Your Images for WordPress

By Andrew Renaut

Once upon a time, about 20 years ago, there was Mosaic. Mosaic is often credited with starting the World Wide Web as we know it today. It was the first browser that allowed images to be displayed inline with text, rather than having a separate window popup for each image. Although it wasn’t the first graphical browser, it caught on with the wider public.

Back then colour screens with 256 colours were relatively new, and we were all on dial-up Internet, the aim was to get your images to download, full stop. How they looked was secondary.

Fast-forward to today and things are very different. As people buy increasingly higher resolution screens, we need to make our images look great. On the other hand, Google would like your Web pages to load in one second, even on mobile devices. So how do you make your images look good and load fast? In this article, we’re going to cover the basics of optimizing your images for WordPress.

Is an Image Really Required?

Of course the first question you should ask is do you really need an image when text, symbols, and simple logos can be replaced with web fonts and other CSS effects that can possibly do the job better, faster, and in a responsive way. Any text element such as banners and buttons that are created from images should be replaced with non-image formats. However, if you need to use an image read on.

Raster Versus Vector

Raster images are made up of a grid of a fixed number of pixels. They don’t scale well, and enlarging the image will result in jaggies and pixelation as the grid pattern becomes visible. Images created in a digital camera and programs such as Adobe Photoshop are raster images. The image quality setting will determine the size of the saved file. This could be as large as 7360 x 4912 pixels with a high end SLR camera; such an image would be well over 36MB in size. Clearly this is way larger than required for WordPress use.

Vector images, on the other hand, are constructed mathematically. They work particularly well for simple images such as logos, text, icons, etc. They are mathematical and when they are zoomed in on or resized the browser recalculates the mathematics, and the image will remain sharp.

Such images are created in programs such as Adobe Illustrator and saved in the SVG (Scalable Vector Graphics) format for Web use. However, whilst WordPress rejects the SVG format due to security issues (in theory an SVG file could contain malicious code) there are plug-ins that allow you to overcome this limitation. Having said that allowing SVG files is something that should restricted to admin level users only. Another consideration is that most browsers only offer partial support for the format, so stay within the 1.1 standard. If you are using this format consider ‘minifying’ the images to strip any unnecessary meta data.

JPEG, GIF or PNG?

Modern browsers support a range of raster image formats; JPEG/JPG is the most popular. There is also GIF that supports 256 colours that is often used for advertising. PNG (Adobe’s Portable Network Graphics) overcomes many of the limitations of JPEG and GIF formats and was supposed to become a standard Web image format, but has mixed traction.

Each format has pluses and minuses. JPEG’s can be compressed to a high degree for small file sizes, and if the dimensions are modest, they can look more than acceptable. JPEG uses a lossy compression format similar to MP3 audio files. During compression, information is thrown away and cannot be recovered. Highly compressed JPEGs have the drawback of high levels of artifacts (speckles and blotches in large flat areas of colour, and blurry edges). They also lack the ability to support transparency. This means any cut out area will default to white, so unless your page background is also white, the image will be in a white box.

GIFs are great for creating text and simple graphical images with limited colour – hence their use for serving banner ads. They are easy to animate, but again they don’t support transparency so the background of the image you create must match the page colour.

The PNG format will produce the highest quality images as it is a lossless compression format. However, PNG images can rarely be compressed as small as the equivalent JPEG. The format supports transparency so whatever is behind the cut out area is visible.

For some further reading, check out this article on SitePoint that covers the difference between JPEG, GIF or PNG by James George.

Although the best tool for working with raster images is Adobe Photoshop, there are plenty of other tools such as a free program, GIMP. There are also online services you can use to resize and compress raster images.

The following steps are based on Photoshop CC.

Sizing the Image

When working with raster images from the camera, the first thing to do is to reduce the pixel dimensions. This is achieved through the ‘Image’ and then ‘Image Size’ menu. Remember to ‘Constrain the Aspect Ratio’ and change one of the dimensions to retain the original shape.

The dimensions should match the dimensions given in the HTML/CSS code of the page. There is little advantage to making the dimensions larger as the browser will resize the image as it renders the page; this will slow down response times.

A further consideration is the reduction of the Bit Depth. Better cameras now allow 14 bits per channel raw processing. Photographers often process their raw images in 16 or 32 bit mode to retain the best quality until final output is required. That amounts to a huge colour range that won’t be reproduced on the sRGB colour space of most screens. If the image is not already in this 8bit format, reduce the image to 8 bit per channel mode by selecting ‘Image’ the ‘Mode’ then ‘8 Bits/Channel’. This will immediately reduce the file size substantially.

Although I recommend resizing your images prior to uploading them to WordPress, you can use the WordPress Media Library to edit the dimensions of your image. For example, this image below is 1000 x 621. If I only want the image to be say 300 x 186, I simply click on the ‘Edit Image’ button below.

Resizing images in WordPress media library

This will then bring up a window with a range options for editing the image.

Resizing image in WordPress media library

I then update the ‘Scale Image’ field with ‘300’ and it will automatically predict the ‘186’ pixels and then click ‘Scale’ to see the image dimensions reduce and then ‘Update’ to save these settings.

Resized image in WordPress media library

You can now see that the new dimensions of the image are saved at 300 x 186 and there has also been a reduction in the file size from 913KB to 110KB.

‘Save As’ Versus ‘Save for Web’

Ideally your photographic images will have been saved in the camera as raw files and have been processed in the TIFF format in 16 Bit mode. Once you have resized the image and reduced the bit depth you will now face choices as to the final file format and file size.

Maximum media file size WordPress

As you can see above, the WordPress Media Library file uploader has a default file size limit. This is way bigger than you would want for dropping an image into a post or even a banner. Limits aside, you should ideally keep your images as small as possible.

In fact, the WordPress Codex recommends that large high quality images should ideally be around 60-100KB while smaller images should ideally be 30KB or less.

Doing a ‘Save As’ will only do part of the job. If you are not using Photoshop, most editors will offer some basic options, the file type, and if JPEG, quality and size options. You will need to do some experimenting to see what combination of setting results in a satisfactory balance between size and quality.

‘Save for Web’ on the other hand will give you a wide range of options and a preview of the potential results. Other than reducing the Bit depth you can resize the image in the ‘Save for Web’ dialog box. The controls are fairly self-explanatory.

I tend to check the ‘Progressive’ option so that that people on slow connections will at least see the image begin to appear. You should also ensure that ‘Convert to sRGB’ is checked so that you can preview any unexpected colour shifts.

You should note the potential file size below the preview image as you adjust the size and compression of the image in JPEG mode, but look closely at the image to ensure that the artifacts don’t become to noticeable. Although some versions of Photoshop will warn that the file is too large, it will still process the image.

Remember always to work with copies of your files. Every time you save an image to JPEG format you are throwing away image information that can’t be recovered.

What to Do about Images Already Being Used on Your WordPress Site

If you are reading this article and not sure what to do about the hundreds or even thousands of images you already have on your site, all is not lost.

The first step is to run a page speed test to try and isolate any issues. There are plenty of tools out there which can help you, and you can find out more from this recent article on SitePoint about Speeding Up Your WordPress Site. This article also reviews the benefits of caching plugins and Content Delivery Networks (CDNs) which are also worth investigating if your site is image heavy.

There are also a range of handy WordPress bulk image compression plugins that are worth checking out (it’s worth noting that most plugins will only apply to media library files). Here are just a few:

Summary

So to summarise, here is a quick check list of things to consider when optimizing your images for your WordPress site:

  • Do you need an image where HTML5/CSS3, Web fonts/symbols can be used?
  • Can you use a vector image instead of a raster image?
  • Consider the most appropriate raster image format: GIFs are the smallest, but are limited to 256 colours, don’t scale, and don’t support transparency; JPEGs compress to a small size, don’t scale or support transparency; PNG images retain the best image quality and support transparency, but don’t compress to the same degree, and don’t scale.
  • Work with the highest bit depth and full pixel dimensions until the compression stage.
  • If using Photoshop use the ‘Save for Web’ option rather than simply ‘Save As’.
  • Work in a consistent manner and make notes of your settings, once you develop a consistent workflow, Image Optimization can become a quick and simple process, that will lead to fast page loading.
More:

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Comments
RT_

The problem of making your pages look good on all sorts of screen sizes yet load fast is something that plays on my mind a lot. I got to the point where I use SVG for as much as I can, dispite some browsers not supporting it. It seems today you have pretty much 3 choices

  • Beautiful pictures at the expense of speed and UX
  • Beautiful SVG at the expense of people with old browsers loosing out (the minority)
  • No SVG or Pictures usually leaving your page boring and texty (I know all about that! stuck_out_tongue )

TBH these days I am getting to the point of just leaving users with old browsers with a warning message saying that to get all the benefits of the site they need to download an up to date browser.

Developing to always cater for the minority with old browsers holds back progress. It means the majority who do have up to date browsers don't get the responsiveness and functionality they should enjoy. It also makes it much more expensive because of all the work arounds and extra browser specific bugs.

An up to date browser is free, usually safer, and almost always better! Just download one for petes sake, it takes 2 minutes.

rant over

Having said that, I fully expect some people disagree with me on this.

rgalcf

Thanks for your very helpful article. I'm using this plugin https://wordpress.org/plugins/wp-optimize-by-xtraffic/ to optimize the image on my wordpress website. You can try this plugin, it's great smile

danowen777

Good article. A few points about GIF files. One of the 256 color values may be transparent. Also GIFs are of increasing popularity these days because they are currently the only image format which supports animations.

RT_

SVG supports animation too.

develare

Very good info in the article. I recently discovered a tool called Kraken for optimizing images. Takes the drudgery out of what could be a very tedious task. I was able to optimize all of the images on my WordPress website in a flash. They also support web uploading images, I believe Dropbox and other methods.

Now, Kraken doesn't resize images for you, but compresses them just right and removes unneeded data from the images. Typical savings for already compressed images was around 40% for me. Anyway, here is the link: https://kraken.io/

Enjoy!

MrMarkDobson

I agree with that, and we generally no longer support older browsers or check to see if sites work on them.
In saying that, we are doing some work on websites for some Asian countries where Internet speed and browser versions are slow/old so sadly we must make sure everything works and runs as fast as possible by keeping any raster image usage to a minimum

stephen_

Excellent article well done. I'm having serious problems in imporving thumbnail resolutions a common issue with WordPress sites.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in WordPress, once a week, for free.