Picture tag vs CSS media query

Picture tag vs CSS media query
0

#1

I want to know the benefits of using Picture tag vs the CSS media query in-terms of pure performance (website load time). I am developing a website and clients are forcing me to use picture tag but I think both are same. Let me know your input.

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

or

using media query and targeting separate image tags.


#2

They might be, they might not, it’ll be different per-browser, and will be heavily dependent on how you’re showing/hiding the images as to whether the browser downloads them regardless. Browsers shouldn’t download images when they don’t need to but that doesn’t mean they won’t. Using picture is easier and safer than figuring that out, and is much simpler to use.