There is a <picture> and <source> with which you can connect different images for different resolutions. I need to show certain images only for large resolutions, and that they are not loaded for small ones. I tried not to specify the file

 <picture> <source srcset="" media="(max-width: 600px)"> <img src="test.png"> </picture>

But this does not work, the picture still connects at a low resolution.

  • It is not entirely clear, you want to "hide the image" (as written in the title) or just "so that they are not loaded" (as written in the text of the post). - Bogdan
  • maybe it is better to solve this problem on js? - Konstantin Komissarov
  • Yes, I agree, it is not entirely correct. It is necessary that images designed for large resolutions should not be loaded on small resolutions. The answer given by humster_spb fits without js. - Alexander Khramov

2 answers 2

If only for large ones, then it is necessary to specify not max-width, but min-width. Well, in the default picture srcset do not specify - then for small screens will not be displayed:

 <picture> <source srcset="https://avatars.mds.yandex.net/get-pdb/33827/1f98fb5e-e06f-4ddc-afe7-c4a745ecea0e/s1200" media="(min-width: 600px)"> <img srcset="" alt=""> </picture>

  • Only this method will not work in browsers ie 11 and below. Need to watch <picture> tag support - Alexander Khramov
  • @AlexanderKhramov, and this is where? There was no support for the issue. - humster_spb
  • Yes, I understand. I am for those who stumble upon this method. - Alexander Khramov

Probably you can solve your problem on jQuery:

 if ($(window).width() > 720) { $('#img').attr('src', 'images/big-file.png'); } else if ($(window).width() > 480) { $('#img').attr('src', 'images/middle-file.png'); } else { $('#img').attr('src', 'images/small-file.png'); } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="img" src="">