Responsive Images (srcset & sizes)

Er. Manoj Kumar•Nextsem Academy Curriculum

1. srcset provides multiple image resolution sources.

2. sizes defines screen layout slot widths.

3. Mobile phones download smaller lightweight images.

4. 4K screens receive crisp high-resolution versions.

5. Drastically reduces mobile data network consumption.

<!DOCTYPE html>

<html>

<head>

<title>Responsive Images</title>

</head>

<body>

<h2>Responsive Nature Banner</h2>

<img

src="banner-small.jpg"

srcset="banner-small.jpg 480w, banner-medium.jpg 800w, banner-large.jpg 1200w"

sizes="(max-width: 600px) 480px, 800px"

alt="Scenic Mountain Sunset">

</body>

</html>

Loading course layout...