Optimising Images for better Web Experience and SEO

Apart from bringing good visual presentation and engaging visitors are you aware that following best practices and recommendations for images as suggested by Google, it can boost up your SEO results too. Images are different to text in terms on how Search Engine Bot reads it. Text are easily readable and crawable and easily picked […]

Image Optimisation SEO Tips

Apart from bringing good visual presentation and engaging visitors are you aware that following best practices and recommendations for images as suggested by Google, it can boost up your SEO results too.

Images are different to text in terms on how Search Engine Bot reads it. Text are easily readable and crawable and easily picked up by Search Engine Bot. In case of  images Search Engine Bot simply scape pass the image. Instead it reads attributes defined for the image.

When any Search Engine Bot crawls the pages, it’s looking for image attributes such as alt tags, image file name etc to know about the images in details.

Good Practices on Publishing Images

  1. Naming the image

Filename provides a clue about the subject matter of the image. A short descriptive image name is always considered a good filename. For example I am writing an article about responsive web design and I am using a responsive devices picture, a good name can be responsive-web-design-devices.jpg

  1. Setting the proper alt attributes

The alt attribute describes the contents of the image. Apart from providing Google bot information about the content alt attribute can be important for several other reasons as:

  • It’s one of the factor that help Search Engine show the most relevant images on google search results
  • For user with visually impairments, or people using screen readers  or people with low bandwidth, alt attribute provides them the information about the image

One of the important thing here is to avoid using heavily keyword alt attribute, which is considered as bad practices.

  1. Assigning height and width attributes

Assigning the height and width attributes help browsers render and wrap around placeholder around the image. Other advantages being it does help in loading website faster as well as creating better user experiences.

Example of properly written coding:

<img src="responsive-web-design-devices.jpg" alt="responsive web design devices"  height="350px"  width="750px" />

  1. Image Optimisation

Are you aware using few quick tricks you can significantly cut down the file size of the image. This will help the website to load faster and consume low bandwidth.

Here is nice short video on how to optimise the web graphics.

Conclusion

Following best practices on web development can be rewarding. Things like On Page Optimisation, Image Optimisation are really easy and if done properly can be rewarding both in terms of SEO and creating good experiences. It might take a moment or two to do so, but they are worth abiding by.