Image optimization on website

Image optimizations in websites are one of the most overlooked factors in SEO. Reasons for this are the lack of knowledge and graphic designing skills which the webmasters typically do not have. Still, image SEO is crucial on-page SEO strategy that is easy to be employed and gives good results.

Images form an integral part of websites and add to aesthetics along with conveying information in a short crisp manner. They also help to break the monotonicity in the web page and keep the users hooked on to the website.

A picture says a thousand words

Steps to do image optimization on the website are:

• Use at least one image
• Keep the image quality high and copy free
• Keep the image size low
• Select file type as per the purpose of the image
• Name and Alternate text of the image
• Use captions
• Use schema for images
• Lazy loading in a website
• Open Graph and Twitter Cards
• Include image in XML sitemap

What is image SEO?

Image SEO is basically the optimization of the images, infographics, and icons on the website to boost SEO rankings and visibility.

This also makes the images appear in the Google image search results.

Google removed its view image button which is displayed on image searches in Feb 2018. This makes users go directly to the website page generating traffic

Steps to optimize images on your website.

Use at least one image

Images help users to easily scan and understand the website. It also signals Google that the page is is valuable and thus should be indexed. All this makes using images as one of the best practices you should follow.

There are many image sites that provide copy free images like Unsplash, Pexels, Freepik.

Keep the image quality high and copy free

Make sure that the images do not have copyright issues and are of high quality. They should not pixelate. You can try the image for various screen sizes by simply zooming them to at least 1920 pixels width. Generally, desktops have this peak screen size.

Keep the image size low

Images take up a lot of bandwidth in downloading the page and should be kept as low as possible without making them pixelate.

If you are resizing the images on Photoshop or any other photo editing tool, check for a tool that renders images for the web. You can also play around with decreasing in the image quality to further reduce the size. As long as the final image does not pixelate and the changes are not too drastic, it should do.

Select file type as per the purpose of the image

You can play around with file types also if it leads to a reduction in image size finally. Below guidelines will help you to select the image types

Photos:                For Simple plain photos, use jpeg. For screenshots also you should use jpeg as the size is considerably less than any other image type.

Logos, graphics:  Use PNG as they do not have backgrounds and the page background can be used easily. However for any reason, if you need to have a background, switch to jpeg as it renders in lower size.

Icons and logos:  You can try SVGs as the first options. SVGs do not pixelate and the image qualities are of pretty high quality required in logos and icons.

Animation: If there is a bit of animation to be placed on the website, use GIFs. Be very selective when using GIFs as they are high in size than any of the above types.

Name and Alternate text of the image

The name of the image should have keywords in them and use “-“to separate the words. You should definitely not name the image like image001.jpg which graphic designers generally do to speed up the work.

Similarly, the alternate text (Alt text) can be used to target the keywords. It should never be left blank or filled with random texts having no relation to the page.

The name of the image and alt text helps in SEO of the page by boosting the keyword being targeted. Moreover, they are the best ways to use the semantic keywords you must have kept to support the primary keyword.

Use captions

Captions appear at the bottom of the image and give a short kind of description of the image. They are read 3 times more than the body text. Although captions are optional, you should not miss out on them.

Use schema for images

You should make the most out of the schema for your website. Simple code like intemprop=”photo” will suffice. This code helps the search engines to understand that the entity is an image and thus show it on image searches.

Lazy loading in a website

Lazy loading basically loads images as and when they come on the screen. This reduces a lot of load from downloading the images while rendering the page.

Wordpress and other frameworks have many plugins for the lazy load which should come handy.

Open Graph and Twitter Cards

You should add og :image meta tag to the head of the page to use the image while sharing on social media. Simply put the below code in head tags.

<meta property="og:image" content="http://example.com/link-to-image.jpg" />

In WordPress Yoast plugin has a social section specifically for this.

Include image in XML sitemap

Once the page is published, you should include the image in the XML sitemap as well. This allows the images to get indexed properly and also boost their ranking in Google image searches. There are no limitations on the number of images you can include in a sitemap for a page. You can also try out the online image sitemap generators available.

You can also include additional information like caption, title, geographic location in the sitemaps.

Once the sitemap is created, provide the link inrobots.txt file as well.

If there is any point that I might have missed out, do share in comment and I would be happy to edit the article.