Responsive Images with srcset and sizes
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Example</title>
<style>
.responsive-image {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image Example with srcset and sizes</h2>
<img
src="images/medium.jpg"
srcset="
images/small.jpg 480w,
images/medium.jpg 800w,
images/large.jpg 1200w
"
sizes="
(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px
"
alt="A beautiful landscape"
class="responsive-image">
<p>This image will adjust its resolution based on the screen width.</p>
</body>
</html>