How can you create a responsive image in HTML?

Use CSS or the HTML5 srcset and sizes attributes.

HTML Example:

<img

src="small.jpg"

srcset="medium.jpg 768w, large.jpg 1200w"

sizes="(max-width: 768px) 100vw, 50vw"

alt="Mountain view">

CSS Example:

img {

max-width: 100%;

height: auto;

Key Takeaway:

Responsive images adjust to different screen sizes for faster load and better UX.