Image optimization on website

Image optimization on websites is one of the most overlooked factors in SEO. Reasons for this are the lack of knowledge and graphic designing skills which webmasters typically do not have. Still, image SEO is a 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

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.

Image optimization on a website 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 for image optimization on the website

Use at least one image

Images help users to easily scan and understand the website. It also signals Google that the page 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 pixellate. 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 pixellate.

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. Either use any best online image optimizer tools available or a photo editing tool to keep the images light in size.

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               

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 option. 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 in handy.

Open Graph and Twitter Cards

You should add an 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=ogimage content=httpexample.comlink-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.

Check best online image optimizer tools

There are many online image optimization tools available for free that reduce the size of the images drastically while some of them claim to retain the image quality. Simply look for the best free image optimization tools for image compression on Google and try out the options available.

Being fluent in photo editing software like Photoshop helps and our team does not use or recommend these online tools. They are still a good option for people not well versed in photo editing software.

How to optimize images for WordPress

Image optimization in WordPress is almost similar to that in any regular website. As the framework is much matured, it has a lot of inbuilt features to optimize images and use as per the size of the device. Simple usage of a good caching plugin covers most of the image optimization work in WordPress.

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.

Image optimization on a website is like going an extra mile to ensure the users and the search engine are able to consume the image easily. This gets rewarded in form of improved ranking and traffic.

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