Responsive Images - srcset and picture element

 

Almost every website using a fluid layout for responsive behavior "if you are not, you should", but what about images that has fixed sizes. 

To make image responsive and adjustable, many websites are using a large image for big screen and scaling it down to fit the small screen size with the help of CSS.

Example - 

  img { 
    max-width : 100%;
    height : auto; 
  }

In many cases it works such as logo, icon, badges and small images.

But for a large image, you have to think about different device's resolution, size of the viewport, screen size and there is also a retina.

Screen size: physical measurement diagonally of the screen in inches.

Resolution: number of pixels on the screen. 

Viewport: visible area of screen. 

Let's explore about our options. 

1. Load different images based on screen size

Srcset -

For small screen, large screen and retina screen, we can use three vision of the same  images with srcset.

We use srcset attribute with inline <img> element, based on size of viewport. This attribute helps you to optimizes bandwidth consumption for lower resolution display. It's a great way to avoid serving oversized or undersized images. 

Example -

<img srcset = "..." src = "..." alt = "..." >

We can specify image resources for different resolution in two ways. 

• W - descriptor
• X - descriptor

W - descriptor

We can specify width - descriptor, it allows the browser to pick one image for best situations. 

Example

<img srcset = "small-320.jpg 320w, large-960.jpg 960w, x-large-1400.jpg 1400w" 
     src = "small-320.jpg" alt = "..." >

Each image resources and width of the image (W-descriptor) should separate by comma, and instead of px we should use 'w'. 'w' is the actual width of the image.

Src  attribute for those browsers that not support srcset attribute.

Sizes:

We should always use width-descriptor with sizes attribute. It works with media condition and length of image. You can control images layout with this attribute. 

Example

<img srcset="small-320.jpg 320w, large-960.jpg 960w, x-large-1400.jpg 1400w" 
          sizes="(min-width:567px) 50vw, 100vw" 
          src="image.jpg" alt="...">

• Media Condition -

"(min-width:567px)" means the viewport size is 567px or up and supposedly it sets "(max-width:566px)" means the viewport size is 566px or below. 

• Length -

50vw, it is a slot width of the image. It determines what width of the image should display for a certain media condition.

(min-width:567px) 50vw means if the screen size is 567px or up, the image will be 50% of the viewport width or else 100vw means it will be 100% of the viewport. 

Image srcset size example 

X-descriptor (display density) :

It is the second way to display the image for high-resolution and low-resolution screen. 

Example -

<img secret = "small.jpg 1x, large.jpg 2x" src ="small.jpg" alt = "...">

1x and 2x is a display density descriptor, browser choose 1x for standard screen (low-resolution) and 2x for retina screen (high-resolution).

You can't mix it with sizes attribute and can't control the image layout. 

2. Display different images in mobile and desktop devices -

Art Direction - <picture> element:

To bring clarity and focus to the subject you can crop your images or present different images (like totally different) for different screen size.

Example -

<picture>
       <source media = "..." srcset = "...">
      <img src = "..." alt = "...">
</picture>

Let's break it little by little. 

Picture -

<picture> element contains one or multiple <source> element and <img> tag. It is a parent element.

Source element -

It gives a hint which image resource should use for a different condition. It contains global attributes like - required srcset, optional media and type.

Media attribute -

It works like CSS media query. You can specify the images for certain break - point.

Example -

<source media = "(min-width : 900px)" srcset = "beautiful-bird-with-sky.jpg">
<source media = "(min-width : 567px)" srcset = "beautiful-bird.jpg">

Explain - when viewport size is 900px and up browser will choose "beautiful-bird-with-sky.jpg" image. When it is 567px and up it will choose "beautiful-bird.jpg".

Srcset attribute:

You can set one image file path or use different images for different screen resolution as we discussed before with w - descriptor with sizes or x - descriptor. 

Full example -

<picture>
        <source media = "(min-width : 900px)" srcset ="beautiful-bird-with-sky.jpg, beautiful-bird-with-sky-2x.jpg 2x">
        <source media = "(min-width : 567px)" secret = "beautiful-bird.jpg, beautiful-bird-2x.jpg 2x">
        <img src = "beautyful-bird.jpg" alt = "beautiful bird">
</picture>

Type attribute -

Type attribute is for define MIME type. You can add multiple file formats by using the type attribute for browser support like - webp, svg, JPEG -2000.

Example -

<picture>
        <source type = "image/webp" srcset = "logo.webp">
        <img src = "logo.png" alt = "logo">
</picture>

Img tag -

When there is no match condition and type, <img> src path will be chosen.