How not to load an image on mobile devices?

Question

css

I know that you can use media spaces to hide pictures

@media screen and (max-width: 768px) {
          img {
                 display: none;
         }
}

I also know that using the same media queries, you can track the screen resolution and load the necessary pictures (for example, for retina)

#logo {
  background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/[email protected]');
    background-size: 200px 100px;
  }
}

So here it is! If there is any way (preferably through the same media queries), so that you can track the width of the screen and, depending on the width, load or not load pictures?

Answer 1

Do not use img , but instead use div and set the background image in CSS via media or not.

Answer 2

Use srcset.