How to Optimize Images for Site Speed, Search Engines & Social Media

One of the most common mistakes I find when exploring clients existing websites is how poorly optimized the images tend to be. Years ago we would find a website with lots of very small images and while that has its own concerns, in many ways it wasn’t as bad as the modern dilemma.

The issue is two-fold. Firstly images are very often 4 or 5 times the size they actually need to be which results in poor performance and leads to slow loading web pages. Slow websites have always been a problem but never more so than today as Google actively penalizes websites that are slow and customers tend to lose patience and bounce if a website hangs for several seconds.

Secondly, images are often poorly titled and contain no alt text. So let’s go through how an image really should be treated and consider the different scenarios.

So if you want to speed up your WordPress blog then you should start by making sure all of your images are well optimized.

Optimizing Image Sizes

Since everyone has a smartphone with a high megapixel camera many people take photos and just upload them to their WordPress website raw. This is a problem because the image can be between 3000 and 5000 pixels wide, which is far larger than is often required.

That said the size does depend on how and where you intend on using it. If an image is being used as a full width strip or hero area covering the website from left to right then it is understandable to want a large image and in this situation you would want to reduce it to perhaps 1600px wide to cover most screen sizes in high quality and allow the browser to stretch slightly for anything else.

A slightly lower quality image is far better than a website that takes 5 or more seconds to load. If however the image is to be used within the content, perhaps spanning the width of the text or floated half the width then you should resize the image accordingly, often 900-1000 pixels will be sufficient.

Reducing the image size drastically reduces the file size of the image so it can load significantly faster but we are not done yet. There are still a couple of other considerations, firstly the file format, for most cases jpeg is the most ideal and can be reduced in quality to make it smaller, the only time a png file required is if you plan on using transparency within the image as jpeg always converts transparent areas to white, jpegs tend to be far smaller in file size and so they are the best option.

Taking it one step further we would want to perform some lossless compression on the images which don’t reduce the physical size or the quality but does reduce the file size by removing bloated coat in the image file.

For lossless image compression we recommend TinyPNG which is a website where you can drag and drop an image and it will begin compressing. Once complete you can download the image and compare the file size. There is also a WordPress plugin however the free account only allows for 500 conversions per month. The website can be used infinitely without having to create an account or login.

Note: Don’t go too small! When you share your pages and posts on social media often they will try and grab either your featured image or the first image it finds on the page and then uses that as the thumbnail / preview image to accompany the social share.

While social networks tend to have different criteria several such as Facebook will not grab images smaller than 200px by 200px so keep that in mind when optimizing images for speed.

The ultimate aim is to reduce the size to something that is safe, we recommend trying to keep your images under 100kb at most unless they are the main feature image and need to span the full width of the screen and in that case, you could perhaps push the top limit to 200kb.

The image used at the top of this post courtesy of Pexels which is a great website to source royalty free images was 5000px wide originally and 10MB in file size, by reducing the pixel size to 1200 and losslessly compressing it the final version is just a mere 61kb and still high quality.

The alternative tools similar to TinyPNG that also offer lossless image compression online for free;

Smush.It
Krakken

Optimize Images for Search Engines

There are many search engines that use image-based search so providing them more information about the context of your image can help in your sites search engine optimization.

File Name

We always advise optimizing the name of your image to contain some primary keywords and no stop words, so removing pointless words like (the/and/or/a) and so on and ensuring words related to your article are included.

We also like to keep things consistent and tidy and find hyphenating the words and keeping everything lowercase works best. A hyphen is similar to a space but it translates better in the world of technology. Many also use underscores however personally I have always stuck to using hyphens and advise this to all clients.

Image Details / Meta

If you use a photo editing suite like Photoshop, GIMP or any of the other popular tools out there you will be able to set specific metadata and properties to your image. This can be a good habit to get into as it means all of the information is available when you upload your image.

You can set author tags, copyright information, keywords and more. This is not of the highest importance but can be useful to help people identify the source of an image when downloaded.

Title & Alt Tags

Alt tags are a great way to give search engines and visitors more context about a specific image. If you are confused as to what an alt tag is well you are certain to have stumbled across them in the past.

Basically, they are the light yellow text tags that sometimes appear over an image when you hover it for a couple of seconds. Also when someone with poor eyesight or those that are blind use a screen reader in the browser to read out a web page it is impossible for the software to understand the image properly, as a result supplying a sentence as alt text to accompany the image helps fill this void and can be understood by the screen reader software and read out.

Google also recommends supplementing the alt text with a title tag to further emphasize the image details. The advised max length for your alt text is 125 characters so don’t try and squeeze too much in.

WordPress Tip

If you are uploading your images to WordPress then the upload dialogue box allows you to input additional information once the image has completed its upload.

The available fields include.

Title – No longer than 60 characters.
Description No longer than 155 characters.
Caption – Optional, however, can look nice in some articles and give some permanently visible context beneath your image.
Alt tag – No longer than 122 characters and probably the most important to fill with your keywords and some information about the image.

Create Conventions / Protocols & Possibly Templates

To make the ongoing process easier when you are regularly publishing new posts on your website each of which should, of course, have an image, it is best to create yourself a set of protocols. These may vary from website to website but on a single site keeping to some consistent image sizes and possibly creating templates you and any guest authors can re-use can save time and make the website look more presentable.

Conclusion

It’s vital that you optimize your images before uploading them to your website or blog.

If you don’t your website may suffer from poor SEO scores as a result of slow loading and equally troubling this can also affect your conversion rate as people are likely to lose patience waiting for your website to load.

Here are some other articles you might find useful:

How to Optimize Images for Speed & Search Engines