Responsive Images in CSS3

 Responsive Images in CSS3

Responsive Images allow you to display different images based on the device or screen size. This can help to improve the performance and user experience of your web page on different devices.

html

<picture>

  <source media="(min-width: 768px)" srcset="large.jpg">

  <source media="(min-width: 480px)" srcset="medium.jpg">

  <img src="small.jpg" alt="Example Image">

</picture>

In this example, we have used the <picture> element with multiple <source> elements to provide different images based on the screen size. We have used the srcset attribute to provide a list of image sources with different resolutions. The browser will choose the appropriate image based on the screen size and pixel density. If none of the <source> elements match, the <img> element with the src attribute will be used as a fallback.