Figure, Picture & Lazy Images

All HTML topics
∙ Chapter 30

Figure, Picture & Lazy Images

Use <figure> + <figcaption> for images with captions, and <picture> when you need different sources (formats/sizes).

Add loading="lazy" to non-critical images to improve page speed.
figure-picture.php
📝 Edit Code
👁 Live Preview
💡 <picture> chooses the best source; CSS controls layout and size.