Learn HTML – Part 56 – picture Tag – Responsive Images

The HTML picture tag is used to display responsive images based on different screen sizes or conditions.

It allows you to define multiple image sources and lets the browser choose the most suitable one.

What is the picture Tag?

The picture element contains multiple source elements and one img element.

The browser selects the best image based on screen size, resolution, or media conditions.

Basic Syntax

<picture>

   <source media="(max-width:600px)" srcset="small.jpg">

   <source media="(max-width:1200px)" srcset="medium.jpg">

   <img src="large.jpg" alt="Image">

</picture>

Example – Responsive Image

<picture>

   <source media="(max-width:600px)" srcset="https://via.placeholder.com/300">

   <source media="(max-width:1200px)" srcset="https://via.placeholder.com/600">

   <img src="https://via.placeholder.com/900" alt="Responsive Image">

</picture>

Output:

How picture Works

• The browser checks each source condition
• The first matching condition is applied
• If none match, the img element is used as fallback

Why Use picture?

• Displays responsive images
• Improves performance by loading appropriate image sizes
• Enhances user experience on different devices
• Supports art direction (different images for different screens)

The picture tag allows you to display different images based on screen size and conditions.

Common Mistakes Beginners Make

• Forgetting to include the img fallback
• Using incorrect media conditions
• Confusing src and srcset

Conclusion

The HTML picture tag is used to create responsive images that adapt to different screen sizes.

It helps improve performance and ensures a better user experience across devices.

What’s Next?

Now that you understand the picture tag, the next step is learning about the source tag, which defines media resources for elements like picture, audio, and video.

Next: Learn HTML – Part 57 – source Tag – Media Sources →

Series: Learn HTML Series