Generally, webmasters focus on optimizing text content on the site by changing titles, meta description and keywords. However, optimizing images on the page is as also equally important for improving page loading speed. An attractive image can easily engage the users to read your content. In addition, in this mobile world image search is getting popular like web search. In this article, we will explain image SEO basics and properly using images on your site for better user experience.
Related: How to optimize images and improve page loading speed for WordPress?
Importance of Image SEO
There are many users search images from Google Image search. This has a huge potential especially for photography and ecommerce niches. In addition, social networking sites like Pinterest and Instagram also using images to connect the interesting users around the world. Hence, it is a potential opportunity for webmasters to optimize images on their site for search engines and pull traffic from it.
Earlier, you could track the traffic from images.google.com in Google Analytics reporting. However, Google discontinued this and now you can use the “Performance” report in Google Search Console. You can click on any query and find the source of the traffic is coming from image.
Basics of Image SEO
Consider the below points for optimization when you using images on your site:
1. Caption of an image
Add a caption or name to every image on your site. This helps users to understand the image better and also easy for you to maintain the images especially when you are migrating a site from one platform to another. Remember, name of the image does not have any role in search engine optimization. However, when the image does not have alt text, search engines will try to understand it from the text content surrounding the image. Therefore, use appropriate image caption relevant to the text content.
2. Alternative Text (Alt attribute)
Providing alternate text to images is the most important thing you need to ensure. HTML alt attribute allows you to provide an alternate text for an image within <img> tag. Below is an example of using alt tage with image tag.
<img src="image.jpg" alt="SEO For Images">Alt text is useful in two scenarios – one is for the browser support and the other is for search engines. When a browser does not support your image for whatsoever reason, it will display the alt text instead of an image. This will help users to understand the possible image supposed to be displayed and continue reading without much disruption. Below is an example of the broken image showing alt text on the browser.
As search engines can’t completely understand the meaning of an image, they use alt text as the text equivalent of an image. So effective use of alt text increases the possibility of the site’s visibility on search results especially on image searches.
Search Engine Optimization Articles
3. Size of an image
Use appropriate size for the image so that users can see it clearly. Providing very small or very big image make the user embarrassed and leave your site. Large images also reduce the page loading speed and impact the ranking on Google search results. Ensure to use, correct image size that is suitable for your site’s layout and avoid resizing the images with CSS when loading.
We highly recommend to compress the image using third party tools before uploading on your site.
4. Use Responsive Images
Gone are the days to show larger images that do not fit on mobile device width. Use adoptive or responsive technology that automatically resize the images to fit on the viewing device’s width. This will ensure the readability hence users will tend to bookmark and come back to your site.
4. Placement of the image
Display your images in a place where users can see it easily related to the content. Displaying unrelated images or displaying it in inappropriate place will make the user confused about the purpose of the image. This is also applicable for the image ads if you display ads on your site.
SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.
5. Structuring Image Folder
Organize all the images on your site under the same folder instead of spreading them under too many different folders. This helps search engines to look and grab all the images of your site from one place rather than looking in different places. It is also recommended to classify the images under monthly subfolders for the purpose of filtering. Some of the content management systems like WordPress offer this feature by default making the housekeeping easy for webmasters.
6. Appropriate Image Type
There are many general image types like PNG, JPEG, GIF and BMP. Each image type serves different purpose and suitable for different occasions. Though, all browsers support these commonly used image types, check the quality and size of the images on your site and optimize accordingly. There are also new image types like JPEG2000 and WebP. Google pushes webmasters to use these optimized image types. However, not all the browsers support these new image types. Therefore, when you use new image types ensure to serve the standard PNG or JPEG images as fall back.
7. Image Sitemap
If you use images as a primary traffic source on your site then it’s a good idea to generate an image Sitemap and submit to search engines similar to normal XML Sitemap. Image Sitemap should contain the details of images on each page so that search engines can easily crawl and index them accordingly.
8. Lazy Loading
Lazy loading is a technique of deferring off-screen images that users not viewing currently. When you have lots of images on the page from top to bottom, it makes sense to show the images on the visible area of the screen to user. Other images down the page will load only when user scroll to that position. You can apply lazy loading independently using third-party script or find suitable plugin depending upon the content management system you use.
9. Serving Images from Subdomain
An image can tell thousand words. Though it is easy to convey a message with images, using multiple images on a page will drastically increase the page loading time. Each image on a page will send a separate http request to the server and make the loading slower than the text content.
The possible solution to improve page loading speed is to serve all your images from different domain or subdomain. This helps the images loading in parallel and improves the page loading speed. Since images are static files without any cookies, serving from separate subdomain will also increase the page loading score for your pages.
10. Use Caching and CDN
Users will access your site from all over the world. You can easily cache the static image files using CDN and serve from the nearest location to the user. This will improve the loading speed thus increase the search engine ranking. In addition, you can also use browser caching for images in server configuration file to inform the browser about the caching validity.
Dos and Don’t with Images:
Below table shows the dos and don’t when using images on your site to have better search engine visibility:
| Dos | Don’ts |
|---|---|
| Use descriptive name and alt text related to your content | Generic filenames like “untitles.bmp” or “image1.jpg” |
| Provide alt text for image links | Extremely lengthy filename and alt text |
| Submit an image Sitemap to search engines | Keyword stuffing into alt text |
| Using image links only when required | Extremely using image links for navigation |
| Compress and resize images | Using large number of uncompressed images on a page |
| Enable browser caching and serve from cookiless domain | Serving too many images from the same domain where text content is available |
Leave a Reply
Your email is safe with us.