Adding images to your website is a great idea. Images add colour, catch the eye, and help to break up long blocks of text. Images reinforce the point you’re trying to make and can communicate complicated ideas more effectively than words alone.
But the first rule of using images on the web effectively is to use them sparingly. The second rule is to make sure they’re as small (in terms of file size) as possible, or in other words, optimised for the web.
Remember that every image you add to your pages and posts will be an addition to all the other images that appear in your header and footer, your social icons and logo. It’s easy to slow down your website by adding too many images, especially if you upload images that aren’t properly optimised.
This tutorial will explain more about preparing images for your blog posts and web pages. By the end of this lesson, you’ll be able to make your website look attractive without slowing it down too much. And as a bonus, I’ll even show you how to get an SEO boost by naming and labelling images correctly.
Why optimise images for your website?
The main reason anybody would want to optimise their images for the web is to reduce file sizes so that their website loads more quickly. Don’t be misled by modern broadband speeds.
Whilst it’s true to say we’re no longer waiting for images to download on dial-up connections, making images as small as possible is still best-practice in web design. This is especially true when you consider the rapid growth of mobile web browsing.
It’s also worth considering storage space on your server too. Many modern cameras create huge files that can be 5MB or more in size. If you upload photos of that size to your website on a regular basis you may quickly find yourself running out of disk space. A web server that has no disk space then won’t be able to serve your website until you’ve freed up some room.
A sea of free images
For the purposes of this tutorial I will assume you already have some images that are correctly licensed for web use. If you have your own images, great. Otherwise, if you use images you’ve found on the web, you must make sure that the associated license allows you to use them.
If your website represents a business or conducts any kind of commercial activity, you also need to make sure that the license permits commercial reuse. And most importantly, if you can’t find a license for the image in question, don’t use it! It really is better to be safe than sorry.
In the near future I’ll be publishing tutorials to help you find appropriately-licensed images for your website, for free!
Three steps to optimising images
There are three main steps to ensuring your images are as small as possible:
- Choose the right image file format for the type of images you’re working with
- Resize images to sensible dimensions
- Use compression appropriately to reduce file sizes further
I’ll explain each of these steps in more detail below.
Choose the right image file format
If you’re creating your own images, make sure you’re saving them using the correct file format. In a nutshell, if it’s a photo be sure to use JPEG, otherwise use PNG. PNG is best for line drawings, diagrams and anything with a transparent background.
This decision may have already been made for you if you’re importing images from your camera or downloading them for the web. But I often still see people using the wrong formats, which can lead to enormous file sizes!
The most important thing to be sure of is that you’re not saving photos as PNG, because that will create larger files than JPEG. And line drawings saved as JPEGs just look naff. If you can handle acronym overload, read this HowTo Geek article about the differences between image formats.
Resize images appropriately to reduce file size
We already know that modern cameras produce images that are simply too big for web use. Images from stock sites may also be too large, even though you downloaded them directly from the web.
The aim of resizing images for web use is to turn an enormous image that could easily be 6000 pixels wide into something that more closely matches the maximum width of the typical screen it’ll be displayed on.
Any surplus will be wasted. It’s important to remember that whilst the image may appear to be the right size when viewed on your website, it’s only because your browser is resizing it after it’s been downloaded. This is a waste of bandwidth and processing power (again, think about mobiles).
Be led by the data
Computer screen sizes vary enormously so we’ll just have to pick a sensible average and work with that. According to StatCounter, the most common screen size is currently 1366 x 768 pixels. But don’t just take my word for it. Ideally, you should look at your website analytics data to find out the most common screen resolution amongst your audience.
WordPress just made adding full-width images to your website much easier, thanks to Gutenberg. So, with that in mind, let’s set the maximum image width to 1366 pixels. We’ll then double that number to make sure our images display nicely on retina screens too. This gives us our maximum image width of 2,732 pixels.
Don’t worry if the image you want to use is smaller than that already. Many web pages are often narrower anyway. We’re allowing those extra pixels as a future-proofing measure. The reason being that once you’ve reduced the size of your image, upscaling it again will result in a loss of quality.
Tools for image resizing
If your site runs on WordPress, you’ll find it has decent built-in image editing tools. The problem is you’ll have to run through the resizing process manually for every image you upload which will quickly become tedious.
A much faster way is to use a free batch image processor such as XnConvert, which runs on Windows, Mac and Linux.
However you resize your images, it’s important to make sure you retain the image aspect ratio. I often come across images that have been resized disproportionately. The results can be quite comical but always look unprofessional. To prevent this problem, your image editing tool will allow you to only specify the maximum width whilst calculating the height automatically. This will ensure the appropriate image dimensions are maintained.
Compressing images to save even more space
Compressing images is not as painful as it sounds, but you’ll be surprised by the results you get. Again, a couple of brilliant batch processing tools come to our aid here.
You might be tempted to think you can easily skip this step, but believe me, I’ve reduced file sizes by more than half by using the following tools together:
- For JPEGs, JPEGMini is absolutely essential. You can download a free version for both Windows and Mac. It is limited to processing only 10 photos a day but that’s good enough to get started. It’s important to remember that JPEGMini uses lossy compression. That means that the image quality will be reduced by the compression process, albeit to an extent you’ll most likely never notice.
- For Mac users, I recommend ImageOptim. It’s fast, free, and easy to use. It works on both PNGs and JPEGs and uses lossless compression, so you won’t lose any quality by using it on your images.
- If you’re looking for an equivalent to ImageOptim for Windows, have a look at some of these recommendations.
For both these tools, you only need to install, then drag and drop your images into the program for it to work its magic. I’d recommend using both on JPEGs (JPEGMini doesn’t do PNGs) — just don’t run both programs on the same files at once!
Get an SEO boost from your images
Use descriptive image filenames
The final stage before you upload your images to your website is to rename the files. Yes, I know that sounds like an awful chore, but you have a brilliant opportunity to get descriptive keywords into every image filename. This means that the URL to the file on your server will contain those keywords, and guess who’s going to notice that?
Don’t overdo it — the keywords should be relevant to the image itself, not spammy repetition. Remember, if Google sees the same words over and over again on your website it will probably conclude that you’re a spammer. Always think about user experience first — how would you describe this picture meaningfully to someone who couldn’t see it?
Use alternate text to describe the content of an image
And finally, on the subject of describing images to people who can’t see them, always make sure you add alternate text to every image you upload to your website (unless it is purely decorative).
It goes without saying that alternate text must describe the image accurately. Yes, you will get an SEO boost from adding it, but that is not the aim of the game here.
Blind people rely upon useful descriptions of images to make sense of your content. They’ll leave pretty quickly if they think you haven’t got their best interests at heart. For more information, watch a video of Matt Cutts (head of Google webspam) explain more about how to use alt tags.
That’s all for now
We’d love to hear more about whether you found this resource useful, or how it could be improved. In particular, we’re happy to help if you got stuck on something. Please send us your comments and we’ll get cracking!
Image by Marie-Lan Nguyen (Own work) [CC-BY-2.5], via Wikimedia Commons
