1

So I've set image to display:none using a media query.

@media only screen and (max-width:530px) {

    img  {
        display: none;
    }

}

I have also tried putting the image/s in a parent div, then setting that display to none. That didn't work either.

<div id="right">
    <img src="images/meeting.jpg" />
</div>

But if you view Chrome dev tools, you can see that it still requests it.

Image

How can I disable the image from being requested but only when in mobile view or specific width (using a media query)

fwzmhmd
  • 23
  • 2
  • 7

2 Answers2

0

When you run the snippet below and check with developer tools, you will see that 100 and 200 are downloaded. But 300 is not.

.hide {
  display: none;
}
/* demo with placehold images */

/* this image is downloaded */
<img src="http://placehold.it/100">

/* this image is downloaded */
<img class="hide" src="http://placehold.it/200">

/* this image is NOT downloaded */
<div class="hide">
  <img src="http://placehold.it/300">
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • If you check the network tab you will see that it sent a request for both images and downloaded them, but it did not display them. My question is how do I disable it from sending a request for a specific image. – fwzmhmd Jul 26 '17 at 11:31
  • Apparently this is not working for all browsers yet :( – Gerard Jul 26 '17 at 11:47
0

You could also move all css to media query:

 @media only screen and (min-width:530px) {
  
  #right>img {
   display:block;
   content: url("https://i.stack.imgur.com/5Sdkx.png");
  }

 }
 @media only screen and (max-width:530px) {

  #right>img {
   content: '';
  }

 }
<!doctype html>
<html lang="">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div id="right">
  <img src="" />
 </div>
</body>
</html>

EDIT

Please, see this link

yanntinoco
  • 152
  • 7
  • Even if I were to do that it would still send a GET request to get the image since it's in the HTML file. What I need is for it not to send a GET request, only when in mobile view. – fwzmhmd Jul 26 '17 at 11:47
  • That is not what I was looking for. You either don't understand my question or don't know how to solve it. Still thanks. – fwzmhmd Jul 26 '17 at 13:11
  • The two last lines of your question, below to your Image link, is what you're looking for, right!? open the link in my answer, press F12, scale the screen(you'll see the resolution appearing at the top of the screen) to less than 530px, check network tab and press F5, you'll see that the image wasn't loaded(to screen smaller than 530px) that, i guess, is what you're looking for. After that, scale your screen higher than 530px and press F5, check network tab and see that the image was loaded... If you see anything different from it, please, let me know – yanntinoco Jul 26 '17 at 14:24