Don’t use `picture` (most of the time)

CSS-Tricks

Don’t use `picture` (most of the time)

Jason Grigsby:

Unless you're solving for art direction, you don't need to the
element. In fact, you're likely doing your users a disservice by using the <picture> element.

I'd wager that the majority of "responsive images" use is serving appropriately sized images for the situation. The situation = the size the image will be displayed at, screen pixel density, and bandwidth. That's exactly what <img sizes="" srcset=""> is best at. It does magical stuff that the browser can optimize for, whereas <picture> will only be as efficient as the rules you've explicitly set up for it (in which you almost surely weren't verbose enough with maximize efficiency). Only use the actual picture element when you need to do something very explicit (e.g. an exact breakpoint you need to swap out a totally different image).

Direct Link to Article — Permalink

---

Don’t use `picture` (most of the time) is a post from CSS-Tricks

more info...