Without a doubt, using images on your website is a good thing. There are people who just want text, facts and figures but then there are people like myself, who enjoy the visual representation of things. Using an image can enhance the user experience of your content and should be used. However, accordingly to Google, images are often responsible for the download speed of pages and posts.
And slow load time can result in visitors clicking away before they even read the page or, perhaps worse, poor search engine results. That doesn’t mean you shouldn’t use images though. What it means is that you need to be smart about the images you use and make sure they’re optimised for web use.
Practical Tips For Image Optimisation
Here are some practical tips you can use straight way for image optimisation
Crop whitespace out of images
A lot of stock photos are provided with whitespace around the actual images and some developers add whitespace in to give ‘nice spacing’ on a page. This space makes the image physically larger, and thus slower to download and render. Use CSS styling to add margin and padding around images and crop away.
Reduce the physical size of the image
Many images come ‘print ready’. For instance, an image taken from a mobile device is generally a large image – ready to print out and look great – but the size of these don’t translate to the screen and they are ‘scaled’ to fit in the screen real estate we have. When this happens, the full sized image (which could megabytes in size) is transferred to the visitors computer and then scaled down to the right size.
Visitors experience the time to download the image and then time to resize it. Albeit, the resize might only be fractions of a second but fractions of a second matter and when there are multiple images all receiving the same treatment – it all adds up.
By resizing an image appropriately when it is placed on a place, the filesize of the file and the processing time is reduced.
The other benefit of resizing images is that they take up less physical space on your webserver! This is why it’s important to reduce the physical size of an image before using it on your website.
In WordPress, if your theme is configured correctly, when an image is uploaded the system will resize the image into multiple different versions that are used in different situations. I’ll discuss this more in another article.
Compressing images deals with further reducing the filesize of an image. Above, I mentioned that most images come ‘print ready’ and whilst they look great, that level of detail simply isn’t needed for display on a screen. In many cases the human eye just can’t concern the difference.
Of course, there are compression algorithms that will minimize the filesize of a graphics file without degrading the quality of the image to an unacceptable level. One of these is the ‘export to web’ function in Photoshop but there are other methods available as well. A websearch will reveal a number of online tools that can be used and it’s worth tinkering with these to see which gives you the best result. After all, not all tools are created equal!
Strip Out Extraneous Data
Most image files have layers of data that aren’t ‘visible’ to the average user. This is, most often, called ‘metadata’ and includes things like EXIF data, colour profile information, date/location of the image. Whilst the data is useful for the owner of the image, it really isn’t all that useful when displayed on the web. Removing this information gives even more compression and optimisation for images, resulting in smaller filesizes.
Image Optimisation Tools
A few years ago, optimising images was a real chore. Some might say it still is, but the number of tools that are readily available to assist in this have increased greatly. Here’s just a few I found using a web search (although I haven’t tried many of them)
Allows you to upload up to 20 jpeg or png images and choose the settings you want.
Compression for jpeg and png images. It also provides a photoshop addon
For WordPress one of the best tools I’ve come across is WPMU Dev’s WP SMUSH plugin. I’ve not only compressed all the images that were previously uploaded to my website, each time I upload an image now, it is automatically compressed for me.
What other tips or tools do you use to optimise your images for your website?