61

Making images responsive has always been a troublesome aspect of responsive web design for many. I have gone through a few of the articles regarding the same and came across "srcset" and "picture" as a solution for this.

SRCSET Example

  <img src="flower_500px.jpg"
     srcset="flower_750px.jpg 1.5x, flower_1000px.jpg 2x"
     width="500px" alt="flower">

PICTURE Example

  <picture>
      <source media="(min-width: 45em)" srcset="flower_1000px.jpg">
      <source media="(min-width: 32em)" srcset="flower_750px.jpg">
      <img src="flower_500px.jpg" alt="flower">
  </picture>

I'm trying to decide which of those two methods to choose to make images responsive. What are the characteristics that I should consider in this choice?

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
Sha
  • 1,826
  • 5
  • 29
  • 53
  • `srcset`? Not sure what that is. I would take a look at using images as `background` and then setting the `background-size` to be `contain` or `cover` – aug Aug 06 '15 at 06:46
  • Why not learn for one of the most famous frameworks to date? bootstrap responsive image class: http://getbootstrap.com/css/#images-responsive – odedta Aug 06 '15 at 06:47
  • Please note that there are some compatibility issues with using `srcset`: http://caniuse.com/#search=srcset - Just use CSS to get the desired result, if that fails add a Javascript resizer function. – odedta Aug 06 '15 at 06:48
  • The picture tag is in working draft by W3C it will not work with all browser, but you can use if you need this for major browser. – Mukul Kant Aug 06 '15 at 06:52
  • 1
    @Maddy, why do they have to complicate things is beyond me, why not add this to CSS instead of HTML... this is image styling, should be done via CSS. :/ – odedta Aug 06 '15 at 06:57
  • 4
    @odedta: "When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. So if one wants to save bandwidth, they need better approach." [Source: developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Why_can't_we_just_do_this_using_CSS_or_JavaScript) – Bence Szalai Apr 05 '19 at 07:56

1 Answers1

99

As of 2022, both picture and srcset are compatible with all modern browsers. However, if an older browser doesn't understand the <picture> element, it will gracefully fall back to the <img> element inside of it. If an older browser doesn't understand <img srcset...> it will fall back to using the src attribute of the image.

The <picture> element (and <source> sub-elements) are the heavy guns you bring in when you want to do art direction on different sizes / aspect ratios of the image. The img srcset attribute is much more lightweight and is all you need if you want to design for different resolution displays.

Because both are widely supported, I would not worry too much about which one you use. If you're only designing for pixel density, I would recommend srcset because it's more lightweight.

Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
  • 2
    "Both picture and srcset are not 100% compatible with all browsers" perhaps in 2015, but now it's **2022** and all major browsers [have fully supported `` since 2016](https://caniuse.com/picture). – Dai Jun 18 '22 at 19:41