Images are a great thing to add to your website. They 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 the recurring 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 optimised for the web.
This tutorial will explain more about preparing images for your blog posts and web pages, so that you can 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 — especially 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 on a regular basis you may quickly find yourself running out of disk space, and that will bring your website down.
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 reuse 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.
Image file formats
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 (which is great 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, so thought it was worth pointing out.
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.
We already know that cameras produce images that are simply too big for web use. Other high-quality images (that you’ve obtained through the correctly-licensed channels, of course) 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 4000 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, and whilst the image may appear to be the right size on your website, that’s because your browser is resizing it after it’s been downloaded, which is a waste of bandwidth and processing power (think mobile).
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 working on the assumption that web page content areas are generally narrower than that, I’d suggest that 1280 pixels will suffice.
Don’t worry if the image you want to use is smaller than that already, many web pages are at most 960 pixels wide anyway. We’re allowing those extra pixels as a future-proofing measure, because once you’ve reduced the size of your image, upscaling it again will result in a loss of quality.
Tools for 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.
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, iResize allows you to specify the maximum width only and calculates the height automatically to ensure the appropriate dimensions are kept.
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 the free version for 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
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 penalise you for webspam. Always think about user experience first — how would you describe this picture meaningfully to someone who couldn’t see it?
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). If you’re adding an image to a blog post or page, you’ll need to add alternate text too. This is easily done in WordPress, but if you’re using a different platform and get stuck, just yelp if you need help.
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 it 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 get stuck on something. Please leave your comments below, and we’ll do our best to help out.