Image Optimisation for WordPress

Fig 1: An HTTP error is shown when an image is too large.

Getting the most out of your images in your beautifully crafted WordPress site means being able to insert properly optimised thumbnails into your posts, whilst also offering the visitor the option to click on the thumbnail to view (and download) a full-sized version. The maximum allowed size of an image to be uploaded is defined at the server and this limit can cause strange and annoying behaviour. For example, the image appears to have uploaded, but the smaller  versions aren’t there.

Fig 2: The oversized image has uploaded but no smaller versions have been created.

Figure 1 shows what happens if an oversized image is uploaded: an HTTP error message is displayed. However, take a look in the media library and you will see that the image is there after all, but the dimensions are showing as “0 x 0″ and there are no smaller versions as shown in Figure 2. So what is going on?

The issue here is all to do with the image file format, compression and the number of pixels. Here’s what happens:

1. WordPress requires an image in the jpeg, gif, png or svg format. Here I’ll deal specifically with jpegs.
2. Jpegs are compressed. The higher the compression, the smaller the file size.
3. You have a jpeg which is, say, 235KB, ie much smaller than 8MB.
4. You upload it.
5. Once the upload is complete, the WordPress server scripts attempt to uncompress the file in order to then save copies at the various sizes defined for your website.
6. Once uncompressed the file size is actually 28.7MB – way too big!

Fig 3: the image size dialogue in Photoshop showing the actual pixel dimensions and file size

So what is the best way to get around this assuming that the aim is to create a jpeg that is the maximum permissable size? My approach is to first open a copy of the original jpeg in Photoshop (don’t work on the original – you may need it another time!) and then inspect the image size. In this example my original jpeg’s file size was 235KB. However opening the image size dialogue in Photoshop (from the menu: Image > Image size) shows the pixel dimensions to be 3872 wide by 2592 high, totalling 28.7MB (see Figure 3). All I have to do now is to resize the image by changing the pixel dimensions until the size is just below 8MB.

Fig 4: the image resized so the total pixel size is below 8MB.

I can completely ignore the “Document Size” section, which is only really relevant when you are dealing with documents for printing rather than the web. Just make sure that the “Constrain Proportions” and “Resample Image” checkboxes are ticked. A bit of trial and error gives the result as shown in figure 4. I can now click OK and save this resized image as a jpeg. At this point Photoshop will prompt you to define the image quality: you can leave this at its maximum for best quality or go for medium if you think it is good enough, either way the image should now upload successfully as shown in Figure 5.

Fig 5: The image has uploaded successfully and all the size options are now available.

I hope this little tutorial will help you if you have experienced strange goings-on with your images in WordPress. Following this procedure will ensure you can offer high resolution images to those who want them, but display optimised smaller versions in your posts so as to minimize  your valuable bandwidth usage and improve the visitor’s experience with fast page loading.

If after all this you find you still need to be able to upload files larger than the defined limit you will need to speak to your website host. You should also have very good reasons for needing to enable your visitors to download such large files!