What Is Image Optimisation for SEO?
Image optimisation is a critical part of SEO techniques. What makes it a key part of SEO is the reduction in load speed of a site. Optimising the images on your site gives it the enhancement needed for ranking higher on search engine result page.
However, higher ranking does not depend only on the optimisation of images; other essential techniques add to the ranking factors. In many cases, the load speed of a web page depends on the number of images on it. For this reason, web pages with fewer images load faster than those with large media.
Before you proceed, do note that this article is not about the image quality of your site. Also, it is not for those using a content management system. But this is about reducing the size of the images on your site and increasing its load speed.
So, if you develop your website from scratch and wonder how image optimisation works, this piece is definitely for you. However, others are welcome to read to learn about the importance of it.
What is image optimisation?
The image optimisation is the process of formatting the web images into the right sizes, pixels, heights, widths or resolutions without affecting the image quality. Image optimisation makes it easier for website audiences to view your pages in any device modes without having any display problem.
The essential thing about the optimisation of images is the reduction in the size of the images. For example, an image with 1426 x 760 pixels will fit rightly well on a device with similar screen size/resolution.
As shown on the figure below, if the 1420 x 760 pixels is open on a smaller device, without optimisation, the image will not fit the screen. So, a portion of the image will be cut off, and it will make the site navigation unpleasant for visitors.
This is not always the case since web development has improved drastically. You can have a large image on your site, and it will still fit on smaller devices due to the power of responsive design. But the impact of this will be on the speed of the site.
The importance of optimising web page images
By optimising the images on your site, you are in one hand demonstrating support for your audience. On the other hand, you are helping your business. It is a fact that image optimisation increases site visibility, and impact on the effectiveness of your overall SEO techniques.
These are clear reasons to optimise your site images:
- Improves the speed of your site: Different factors contribute to the speed of a site, and image optimisation is certainly one of them. By improving the site speed, you create a better experience for your audience and less ‘headache’ for search bots.
- Ranks your web page better on search results: Having a better experience surfing the web is what users seek, and so are the search engine bots. With good speed, your site is accessed and displayed quickly. Not optimising means other sites, with better speed, will be displayed before yours.
- Improves the experience of visitors: As stated earlier, a better user experience is important. So, if you want to make your site visitors return to the page again after the first visit, give them what they need. In turn, it will increase your leads and conversations.
- Saves internet data for your site visitors: Optimising your site images reduce the consumption of internet data of your visitors. An image that is not compressed or scaled down carries a lot of weight. Users with limited internet data will be forced to download the full size of the image.
How to optimise images for SEO
The methods of optimising your site images vary according to the design and the layout of your site. And there is no one strict way of doing it. However, the prevailing methods of image optimisation are by compressing the web page or formatting the images on the page to the same size as the <div> element.
According to Ilya Grigorik, ‘Image optimization is both an art and science: an art because there is no one definitive answer for how best to compress an individual image, and a science because there are many well developed techniques and algorithms that can significantly reduce the size of an image.’
1. Alt tag
This tag is an attribute used for describing the type of images used on a web page. And it is also known as the alternate tag. By giving a description of an image in a text format, it gives readability function to the blind/impaired people.
Example:
<img src="images/example.png" alt="A young boy holding hands with his sister" />In one hand, the alt tag is good for SEO. On the other hand, it helps others to know the meaning of the images used on your site. In essence, not only will people with good sight be able to understand them but also blind/impaired people can.
2. Naming the image
If the image name is clearly described, search engines know what they are about. So, when queries similar to the name of your image is searched, the images will be shown to the surfers.
If the image on your web page is a Red Mercedes-Benz Car, you should name the file as thus: red-mercedes-benz.png. What about an image of a place? You should do the same thing. Name as: greenland-in-paris.jpg or greenland-paris.jpg.
Undoubtedly, this is a clear way to use your keywords on the images. At the same time, it is a way of letting search bots index your images without submitting image sitemap to Google Search Console or Bing Webmaster Tools.
3. Resizing the image
Apart from using an image optimisation tool, there are two common ways to resize an image. It can be done either by using the image tag in the HTML markup, <srcset> or by using the CSS media queries.
Example 1: using image <srcset>
<picture>
<source media="(min-width: 760px)" srcset="sample.jpg, sample-2x.png 2x">
<source media="(min-width: 320px)" srcset="small-sample.png, small-sample-2x.png 2x">
<img src="sample-img.png" srcset="sample-img-2x.png 2x" alt="a flower in a bowl">
</picture>This is how you may set sizes for each image you specify without using general sizes as seen in the first example.
<img src="sample-200.jpg" sizes="50vw"
srcset="sample-100.png 100w, sample-200.png 200w,
sample-400.png 400w, sample-800.png 800w,
sample-1000.png 1000w, sample-1400.png 1400w,
sample-1800.png 1800w" alt="this is a sample image">Example 2: using CSS media queries
.sample {
height: 300px;
background-image: url(small-sample.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}@media (min-width: 500px) {
body {
background-image: url(sample.png);
}
.example {
background-image: url(large-sample.png);
}
}
After setting the properties to your taste and resizing the images to the required format, this is what you can expect to get on different devices.
Example 3: using the alternative to Ex. 1 and Ex. 2
An alternative way of resizing is to use a single sized image for all devices. This is OK if your image does not have to take up higher dimensions. For this, you will resize any image to the same size as the CSS properties.
As described in the image shown above, you can see that the <div> dimension is set to 300 x 200 pixels in the CSS. The same way, you can resize your image to 300 x 200 pixels or to a -100/+100 of the <div> element.
4. Compressing your site
The term for compressing the size of a site through the web server is called the ‘Gzip compression.’ It is a file format that allows the compression of a web page files into smaller size. Compressing your site is an easy way to save bandwidth and increase its browsers load speed.
There are several methods of activating the gzip compression. If you are using a shared hosting Apache server for your site, the easiest way is to update your site settings on the cpanel.
To activate this, login to your control panel (using cPanel as an example), and locate the SOFTWARE section. Then click on Optimize Website.
Within the following page, select Compress All Content, and click on Update Settings.
That is it. It is just as simple as that! Alternatively, you can compress the site by using .htaccess file. For more information on that, visit Varvy: Enable compression via .htaccess to learn more.
Summary
Knowing what image optimisation is and applying it to your site are among few of the things you should do when implementing any SEO techniques. Optimising images is a key ranking factor that will help to attract more visitors to your site.
You cannot categorically say one way is the best way to optimise images. Therefore, the structure of your site will determine which method is to be used. No matter which method is chosen, you should not exclude the Alt Tag and Naming the Image parts.
The whole thing about image optimisation may seem confusing to those without the knowledge of HTML and CSS. In case you have any questions or confused, feel free to contact me, and I will do my best to assist you.
