Responsive Images for web

Recently I learned a new thing about responsive images and want to share it here.

As we all know, we can create responsive images through CSS and media queries but <picture> element allow us to show multiple images according to the browser viewport.

With CSS

First, let's see an example of a responsive image using CSS

<img
    src="./src/desktop-img.png"
    alt="desktop"
    class="responsive"
    width="100%"
  />

and give it CSS properties

.responsive {
     width: 100%;
     height: auto;
  }

As you can see, image will get adjusted according to the width of the screen but this solution is not very convenient on smaller screens if the image is designed for large screens and also if the image contains text then that information can get lost.

With Picture element

<picture> element gives us the flexibility to use different images for different screens.
The <picture> element contains two tags: one or more <source> tags…