Responsive Image:

• Responsive design is an approach that enables your website to fluidly adjust within the parameters of any device – involving a minimum of scrolling or zooming.
• Responsive Image creating great-looking sites which are dynamic and flexible enough to be visually responsive to any screen, from mobile widths right up to desktop format. And to make that possible a flexible approach to images.
• Responsive Image is an image which is displayed in its best form on a web page, depending on the device in your website is being viewed from.
• Responsive Images are now widely used and fairly easy to use in basic layouts

How to Enable Responsive Images

There are a number of ways to enable responsive behavior of images. We need a better way to deal with responsive images. The recommended ways are,

• srcset attribute
• sizes attribute
• picture element

The srcset Attribute:

Srcset is a new attribute which allows you to specify different kind of images for different screen-sizes/orientation/display-types. The usage is really simple, you just provide a lot of different images separating them with a comma like this,

<img src=”image.jpg” alt=”image” srcset=”<img><descriptor> ……. <img_n><descriptor_n>”>.
Example: srcset=”image.jpg 160w, image2.jpg 320w, image3.jpg 2x”

The sizes Attribute:

The actual implementation where you would want a different size image (different height, width) on different screen sizes is accomplished by using sizes attribute along with the w descriptor of srcset attribute. A couple of examples are,

Example 1

<img src=”images/space-needle.jpg” sizes=”50vw”
srcset=”images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w”>

Example 2

You want the image to be displayed in half of the viewport width when the viewport width is greater than 40em, but the image should occupy the complete width when the viewport width is less than or equal to 40em. This is how you’ll approach it:
<img src=”images/space-needle.jpg” sizes=”(max-width: 40em) 100vw, 50vw”
srcset=”images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w”>

The picture Element

The Picture element is used when you want to show a different image depending on the rendered size of the image. The picture element is a container which contains other elements that control the image to be downloaded.

The picture element itself does not display anything. Even the source element within the picture element does not represent anything of its own. The source element must contain the srcset attribute and it may have sizes, media and type attributes. It’s necessary to add img element within picture. You won’t see any image without the img element. The examples are,

Example

<picture>
<source media=”(max-width: 20em)” srcset=”images/small/space-needle.jpg 1x,
images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x”>
<source media=”(max-width: 40em)” srcset=”images/medium/space-needle.jpg 1x,
images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x”>
<img src=”space-needle.jpg” alt=”Space Needle”>
</picture>

Advantages of Responsive Images

• Super Flexible
• Excellent User Experience
• Cost Effective
• It is Recommended By Google
• Very Easy to manage
• Improved Online Browsing Experience
• Easier Analytics Reporting
• Faster Webpages
• Faster Mobile Development at Lower Cost