SEO image optimization - Simple image enhancement for better SEO

Using properly sized images is significant for mobile websites. Properly sized images weigh less kb's, therefore occupy less bandwidth on mobile devices where bandwidth may come with an additional cost.

Let's find out how we can utilize the simple HTML tag to deliver optimized images to browsers based on their size.

Deliver the properly sized image to the browser

The HTML picture element can be used to deliver the right size image based on the device screen size. With the regular tag, all the browser sizes are served with the same sized image, and the image resizing happens on the browser, leading to the use of bandwidth unnecessarily.

<picture>
  <source media="(min-width: 600px)" srcset="banner-medium.jpg">
  <source media="(min-width: 400px)" srcset="banner-small.jpg">
  <img src="banner.jpg">
</picture>

In the above code, the element contains multiple elements with own srcset attributes referring to different images. Depending on the browser size, the browser triggers the media query and renders the matching image. If the browser does not support the tag, the default falls back to where all browsers support.

Different image format support

There are certain image formats optimized for the web, but not all browsers support them. For example, WebP from google is a great way to deliver your images, but Internet Explorer doesn't support it. To overcome this, we can use the tag to deliver multiple image formats and let the browser decide what format to display.

<picture> 
<source srcset="banner.webp" type="image/webp"> 
<img src="banner.jpg"> 
</picture>

With the above code, browsers that support WebP (Chrome, Edge, Firefox, Safari, Opera) will benefit from the smaller size WebP image while older versions of browsers and browsers that don't support WebP will fall back to the standard element.