Optimise your Website Images – How to
Note: This post may contain affiliate links; I may earn a commission (at no extra cost to you) if you make a purchase via my links. See my disclosure for more info.
Every website needs images in order to look good and to enhance the visitor’s user experience (UX). You will need to optimise your website images to make your website SEO friendly.
If you have lots of large images on your website, this will make your website slow to load and your visitors will leave. According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction. So it is very important not to forget to optimise your website images.
Table of Contents
What is image optimisation?
Image optimisation is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality.
While the process sounds complex, it’s actually quite easy these days. You can use one of the many image optimisation plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.
Smaller image file sizes mean:
- Faster website speed
- Improved SEO rankings
- Higher overall conversion rate for sales and leads
- Less storage and bandwidth (which can reduce hosting and CDN cost)
- Faster website backups (also reduces cost of backup storage)
- Outside of video, images are the next heaviest item on a web page. According to HTTP archive, images make up on average 21% of a total webpage’s weight.
Get rid of unnecessary images
The images you have on your webpage should reflect the content you have on it. This is because an image with related text, ranks higher than the keyword it is optimised for. Try to place the image near the top of the page and near the text that it describes. Use good quality, original images. You can use free stock images from websites such as Unsplash or Pixabay.
Be careful with the size of your images
The key to successful image optimisation for web performance is to find the perfect balance between lowest file size and acceptable image quality.
The three things that play a huge role in image optimization are:
- Image file format (JPEG vs PNG vs GIF)
- Compression (Higher compression = smaller file size)
- Image Dimensions (height and width)
By choosing the right combination of the three, you can reduce your image size by up to 80%.
Image Formats
For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimisation.
To keep things simple, you want to use JPEGs for photos or images with lots of colours, PNGs for simple images or when you need transparent backgrounds, and GIF for animated images only.
For those who don’t know the difference between each file type, PNG image format is uncompressed which means it is a higher quality image. The downside is that file sizes are much larger.
On the other hand, JPEG is a compressed file format, which slightly reduces image quality in order to provide a significantly smaller file size.
Whereas GIF only uses 256 colours along with lossless compression which makes it the best choice for animated images.
Compression
The next thing is image compression which plays a huge role in image optimisation.
There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use.
Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.
You can also save images normally and then use a web tool like TinyPNG or JPEG Mini for easier image compression.
Although it’s a bit manual, these two methods allow you to compress images before uploading them to your website.
There are also several popular WordPress plugins like Smush, Optimole and EWWW Image Optimizer that can automatically compress images when you first upload them. Many beginners and even large companies prefer to use these image optimisation plugins, because it’s easy and convenient.
Image Dimensions
Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions (height and width).
Typically, these photos have a resolution of 300 DPI and dimensions starting from 2000 pixels or more. These high-quality photos are well-suited for print or desktop publishing. They are not suitable for websites.
Reducing file dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using image editing software.
To keep your site light and fast, images shouldn’t exceed 2500px wide and 120-150kb.
Think about the file name of the image
You should give your image a filename that describes the image. So instead of let’s say, DSC 1234 it can be called ‘red-birthday-balloon’.
Add a caption to your image…
…if it makes sense to your content to have one. Captions under images are read on average 300% more than the body text itself. You do not want to miss out on an opportunity to engage a huge number of potential readers by not having a caption.
Add ALT text (alternative text)
This is the text that describes the image if it doesn’t load properly or to be read by a screen reader. Alt text describes what’s in the image. The SEO Plugin Yoast will help you to complete this task.
Integrate social media with images on your website
You can do this by adding social media sharing buttons. One of the most popular ways to encourage visitors to share your images to Pinterest is to add a simple “Pin It” button to each one.
A great tool to use is Image Sharer by SumoMe. With Image Sharer, you can easily allow visitors to share the images on your site and link back to you. It supports Facebook, Twitter and Pinterest. You can customise the way Image Sharer icons appear.
Add an image sitemap
In addition to a sitemap for your site, you should try to have an image sitemap. If you are running a WordPress website, you can also take an advantage of available plugins. For instance, Google XML Sitemap for Images and Udinra All Image Sitemap both automatically create Google XML sitemaps for images.
Of course, Yoast is a great plugin for all your SEO needs. This is an amazing plugin which is free and will help you to make sure that all your SEO setting are correct on your website. It will also create your site map for you.
Optimise your Website Images
Having the right images on your website goes a long way in improving the look of your website and the (UX) User Experience for your visitors. SEO image optimisation is often overlooked. Take time to talk to your website developer so that you understand what is being done to optimise your website images.
