How to Optimize Images for Search Engines?

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.

Related: How to optimize images and improve page loading speed for WordPress?

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.

How to Optimize Image for Search Engines?

Consider the below points for optimization when you use images on your site:

  1. Caption of an image
  2. Alt text
  3. Image size
  4. Placement of the image
  5. Structuring image folder
  6. Format of the image
  7. Image Sitemap
  8. Lazy loading
  9. Serve from subdomain
  10. Caching and CDN

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 as “<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.

Alt Text in non-compatible Image
Alt Text in non-compatible Image

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.

SEO 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.

Responsive Site
Responsive 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.

5. Structuring Image Folder

Organize all the images on your site under the same folder instead of spreading over under too many folders. This helps search engines to look and grab all the images of your site from once 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 image as a primary 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:

Use descriptive name and alt text related to your contentGeneric filenames like “untitles.bmp” or “image1.jpg”
Provide alt text for image linksExtremely lengthy filename and alt text
Submit an image Sitemap to search enginesKeyword stuffing into alt text
Using image links only when requiredExtremely using image links for navigation
Compress and resize imagesUsing large number of uncompressed images on a page
Enable browser caching and serve from cookiless domainServing too many images from the same domain where text content is available

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Connect with us in Facebook and Twitter.

Recommended Articles:

Leave a Comment