Optimize Webpage with Images

How to optimize images for SEO, Website Performance, and User Accessibility – React JS, Next JS, Static.

by

Hey Programmers! In this blog, we will see how to optimize images for SEO (Search Engine Optimization for better ranking on Google, Bing, Yahoo etc), Website Speed & Performance and User Accessibility (In case the image doesn’t get load for any reason.). Optimizations means improving for the best and we will see how we can optimize images so that our page is visible to more users on the web. Images always plays a crucial part of any web page to reduce the bounce rate, as they provide additional information and helps the user to easily understand the content. They enhance the quality and understandability of the page.

Tips to optimize webpage with images & its properties

SEO Factors

  • Image Name
  • Alt Text
  • Image Resolution & Size (Loading Speed of Webpage)
  • Using figure & figcaption HTML Tag

Accessibility Factors

  • Alt Text

Performance Factors / Speed Factors

  • Image file size
  • Image format
  • srcset attribute
  • loading attribute
  • CSS Image Sprites

Here are few points that we need to emphasize on different factors like SEO – Search Engine Optimization, Accessibility, Performance, Bounce Rate or Website Speed:

Name of Image

The image name can help search engines understand the content of the image and the webpage where it is added. Try to keep the image names relevant to the topic so that it has higher chances to come up on the top pages during search.

It comes in handy not only for the search engines to understand the context of the image but also to rank it higher in the images search results (Additionally, Google may rank your images on Google Images.).

Example:

// Optimized Image Name
<img src="this-is-an-seo-optimized-image.jpg" />

// Non-Optimized Image Name
<img src="IMG1292.JPG" />

Alt text

Often we miss out this attribute thinking that it’s not that important. But Alt text also affects the SEO and it is important when we use an image in our web page. The proper image name should be immediately followed by the alt text. Each image should have the alt attribute containing the image description. It also helps people using assistive technologies like screen readers to understand the content of the webpage based on the alt text. Frameworks like React JS, Next JS will also give you the console warning if you miss to use an alt tag in your image.

Example:

// Optimized Image with Alt Tag
<img src="optimized.jpg" alt="Add your related text here for alt text" />

// Non-Optimized Image without Alt Tag
<img src="non-optimized.jpg" />

Image file size

It’s always recommended to check the image file size before adding an image into the page. The larger the file size the longer it will take to load, the more bandwidth it will use (and more server resources will be utilized). So image size can drastically affect your page load speed.

Hence, it’s advised to keep the file size small and optimized as per the page. If your image container size is smaller than the resolution of image then it’s recommended to use your image as per the size of the container where you would like to embed the picture.

Eg. Image container is of 150×150 (pixels) then you should be using the image of 150×150 (pixels) in some cases you might need 2x size of image for retina screens, but yes its still far better than having a image of 1500×1500 (pixels).

Suggested Tools:

If you’re on WordPress, you can consider to use plugins like Smush, EWWW.

Image Format

Common image formats are:

  • JPEG
  • PNG

But, there are modern image formats like WebP that provide optimized images without loosing much of its quality.

Modern image formats are:

The SVG images is great for assets like logos and line art.

srcset attribute

Example:

<img
 srcset="
  /img/resolution-320w.png 320w,
  /img/resolution-480w.png 480w,
  /img/resolution.png 640w,
  /img/resolution-800w.png 800w
 "
 src="/img/resolution-800w.png"
>

With the help of srcset attribute we can specify what images to be loaded on different devices based on their screen resolution. It ensures a better user experience because the image gets loaded faster.

Loading attribute

Page load speed is one of the most important Google ranking factors. Google have added a Tab under experience called core web vitals in Google search console (formerly webmaster) which deals with the page speed and user experience. Images and other assets counts to the overall page size and page load speed.

In an Img html tag we have an attribute named loading to lazy load images by assigning this attribute with a lazy value. The loading=”lazy” attribute helps the browser and the user to load the image only when the user is going to scroll near that picture.

<img loading="lazy" src="lazyloading.jpg" alt="The loading tag helps in optimizing the images with lazy loading" />

You can also consider to use the native way or JavaScript code to lazy load the images in your website irrespective of the platform.

CSS Image Sprites

With CSS image sprites we can load multiple small images with just a single image and the image can be used to extract out the smaller images by using the CSS with the background property (Example: background: url(‘socialmedia_sprites.jpeg’) -47px 0;).

Wrapping Images with Figure Tag

Wrap your img tag with figure tag and give it a caption with figcaption as show below to improve the SEO.

<figure>
  <img src="optimizedImage.jpg" alt="Image Optimization">
  <figcaption>This tutorial is about Image Optimization for better ranking.</figcaption>
</figure>

There are other ways also in which we can optimize the image in our page for better SEO. The points discussed above are some crucial ones and we need to take care about that.

Hope you liked the article and found it useful. Feel free to comment down your queries and we are happy to help.

Leave a Comment