RWD Images

RWD Images are those which work well on devices with widely differing screen sizes, resolutions, and other such features.

RWD Images-importance

 A typical website may contain a header image and some content images below the header. The header image will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. 

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

RWD Images-background

background-size┬áproperty is set to “contain”, the background image will scale, and try to fit the content area.

div {
  width: 150%;
  height: 350px;
  background-image: url('https://www.tutorialsart.com/tryit/media/aaaaaaaa-1.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid blue;
}

HTML <picture>

The srcset attributes contain the path to the image to display. Just as we saw with <img> above, <source> can take a srcset attribute with multiple images referenced, as well as a sizes attribute. So, you could offer multiple images via a <picture> element, but then also offer multiple resolutions of each one. Realistically, you probably won’t want to do this kind of thing very often.

<picture>
  <source srcset="media/aaaaaaaa-1.jpg" media="(max-width: 300px)">
  <source srcset="media/flowers.jpeg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>