Difference between srcset and media query?

Question

What is the difference between srcset and media query? Which is better and when to use them?

Thanks!

Answer 1

srcset lets you load different (content) images depending on the media.

media queries let you apply different CSS rules depending on the media.

Use one for images and the other for CSS.

Answer 2

Check this in-depth article about this.

Since you are asking about both of these together, I am going to assume that you are asking about how to achieve the goal of "responsive images" (the correct sized image served to every device based on resolution) using both.

Now, you could have some strategy of achieving this (display none the img elements that are not needed for a particular screen size) using media queries. However, there are a few down sides.

Let me quote the above linked article:

Media queries have limited support for pixel density. Because of this, images will not be properly selected on all devices & will look blurry. Also, unless you "lazy" load the images, the browser will load all sizes. (Even if they are set to display:none) This defeats the purpose. srcset does not have these problems.

Basically, srcset is the better tool for the job and is designed to solve this very problem.