html
/

HTML Picture & Srcset: Responsive Images

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Picture & Srcset: Responsive Images

What are Responsive Images?

Responsive images adapt to different screen sizes and resolutions, improving performance and user experience.

Using srcset Attribute

HTMLRead-only
1
<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
     alt="Responsive Image">

Using Picture Element

HTMLRead-only
1
<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Responsive Image">
</picture>

How srcset Works

The browser selects the most appropriate image based on device width, resolution, and the sizes attribute.

Sizes Attribute

Defines how much space the image will take in different viewport conditions.

HTMLRead-only
1
sizes="(max-width: 600px) 100vw, 50vw"

Art Direction with Picture

The picture element allows you to show completely different images for different screen sizes.

HTMLRead-only
1
<picture>
  <source media="(max-width: 600px)" srcset="mobile.jpg">
  <source media="(min-width: 601px)" srcset="desktop.jpg">
  <img src="default.jpg" alt="Art Direction">
</picture>

Best Practices

  • Use srcset for resolution switching
  • Use picture for art direction
  • Optimize image sizes for performance
  • Always include alt attribute
  • Provide fallback image in img tag

Common Mistakes

  • Missing fallback img tag in picture
  • Incorrect sizes attribute usage
  • Serving large images unnecessarily
  • Not optimizing images for web

Conclusion

Using srcset and picture ensures images are optimized for different devices, improving performance and user experience.

Try it yourself

<img src="small.jpg" srcset="small.jpg 500w, large.jpg 1000w" alt="Responsive">

Test Your Knowledge

Q1
of 3

Which attribute provides multiple images?

A
src
B
srcset
C
href
D
alt
Q2
of 3

Which tag is used for art direction?

A
<img>
B
<picture>
C
<source>
D
<media>
Q3
of 3

What does sizes define?

A
Image color
B
Image size on screen
C
File size
D
Format

Frequently Asked Questions

What is srcset?

It provides multiple image sources for different screen sizes.

What is picture element?

It allows different images based on media conditions.

Why use responsive images?

To improve performance and adapt to various devices.

Previous

html image maps

Next

html form advanced

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.