Responsive Images

All HTML topics
∙ Chapter 22

Responsive Images (srcset)

Modern HTML can load the best image size for the user's screen. This makes pages faster, especially on mobile.

🖼️What changes

src is the default image.

srcset provides multiple sizes. The browser chooses the best one.

sizes tells the browser how wide the image will be on the page.

responsive-images.php
📝 Edit Code
👁 Live Preview
💡 width:100% + height:auto keeps images proportional.