Optimising images for WordPress

So you’ve finally got your hands on a shiny new WordPress website and now it’s up to you to add new content. Images are a great way to add interest to your posts and encourage shares on social media, but do you know the correct way to add images to your site?

We often find our clients aren’t aware there even is a ‘correct’ way, and it is very common for people to upload image files that are much bigger than they need to be. This is a problem because a larger file size equates to a slower loading time. According to Kissmetrics, 40% of users will abandon a website if it takes longer than 3 seconds to load (and that was back in 2011, a lifetime of user expectations ago). Google is also aware of how impatient people can be, and you may find you are penalised in rankings for a slow loading site as well.

So, how can you add images whilst keeping loading times to a minimum? If you’re not used to handling image files this can be a little daunting, so I have created some simple rules for you to follow:

1. Instead of just uploading images straight into the Media Library, you need to take the time to save them in the best format. This means you are going to need to open them up using graphics software. My preference is to use Photoshop, but if you don’t have access to that there is some great software you can download for free, such as GIMP.
2. Images should never be saved at sizes larger than they will be seen on your site. Photographs taken with a digital camera are generally very large in size. Don’t force your users to wait to download images thousands of pixels wide if they will only need them at a few hundred pixels wide. Do remember though that your website may be viewed on screen sizes very different to your own. If you are unsure what size is required, ask your web designer for advice.
3. Once you have resized the image it is time to re-save. Choose the ‘Save for Web’ option if it is available. This will mean you have more choice in what manner and at what size you save your file. It will also strip any metadata normally saved with the image that is unnecessary for the web (e.g. camera model used, what time the image was taken etc) that would usually make the file size larger.
4. Now you need to select the file type to save as: JPG, GIF, or PNG. A JPG should be used for photographs, a GIF for simple block colour graphics and a PNG if any transparency is required.
5. If you are saving as a JPG your graphics software may also allow you to define a smaller file size even further. In Photoshop there is a sliding scale of ‘Quality’ and ‘Blur’ and an estimate of loading time dependant on each. Aim for a balance between display quality and file size.
6. It’s good practice to give your file a descriptive name, and it may help you with SEO too. Don’t start stuffing keywords in there though, just make sure it’s something relevant. You’ll also find that ‘managing-director.jpg’ is a lot easier to search for in the WordPress Media library than something generic like ‘ISO446437.jpg’.
7. Don’t upload images more than once if it’s not required – images in the Media Library can be used in different locations across your site. Also be sure to delete old images that you don’t need on your site anymore.
8. Finally, when you upload an image you should fill in the Alt Text field in the Media Library. This is added into the code of your site as an alt tag, and helps users to know what the image is if it hasn’t loaded properly or if they are using a screen reader. Although Alt tags are primarily for accessibility, they can also offer a SEO advantage as Google will be able to know more about what your image contains.