4

To maximize efficiency for mobile devices, I would rather not have images that are used for the desktop version. Through research, I have learned that simply using display:none; css or jQuery('img').hide() will only hide the image, but still use the resources to load it.

How can I take this:

<div class="com_router_img">
<img src="http://www.example.com/wp-content/uploads/2013/05/img.jpg"
 alt="img" width="700" height="350" class="aligncenter size-full wp-image-307" />
</div>

And NOT display it on my mobile stylesheet? Here is mobile stylesheet query:

<link rel="stylesheet" media='screen and
 (-webkit-min-device-pixel-ratio: 1.4) and (-webkit-max-device-pixel-ratio: 1.5)'
 href="<?php bloginfo('template_url'); ?>/smallphone.css" />
Chris
  • 889
  • 4
  • 14
  • 21
  • Just so you know, *every* stylesheet is downloaded by every device, even if they do not meet the media query requirements. – cimmanon Sep 17 '13 at 19:19
  • I would use the information in [here](http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript) and the media-query element of modernizr to do this, assuming it can be achieved. – Andy Sep 17 '13 at 19:23
  • This is definitely a pressing topic right now, and I have no doubt we'll be seeing an agreed upon solution soon. But the one workaround which I've really come to appreciate is using `svg` to handle responsive images. Have a read through [this article](http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/) and try out their approach. – Suvi Vignarajah Sep 18 '13 at 02:06

3 Answers3

7

It is common practice to use images as background images through CSS when this level of optimisation is required. A mobile browser will only load the CSS that it applies to it.

CSS

<style>
@media (max-width:600px) {
   .image {
      display:none;
   }
}
@media (min-width:601px) {
   .image {
      background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg);
      width:700px;
      height:350px;
   }
}
</style>

HTML

<div class="image">

</div>
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
1

There are multiple approaches to this. Personally I like the technique they use here: http://adaptive-images.com/

It keeps your code simple and the HTML semantically correct

You could also write your own js solution.

Your HTML could look something like this:

<img alt='some image' src='blank.gif' data-src-mobile='my-mobile-version.jpg' data-src-desktop='my-desktop-version.jpg />

The blank.gif would be a 1px transparent gif. With javascript you could detect wether on mobile, and then replace the src atribute with the appropriate data-src attribute.

This should be an easy solution, but it will require your js to ru before the images start loading, and technically speeking it is not semantically correct. Also search engines will have troubles indexing your images.

Pevara
  • 14,242
  • 1
  • 34
  • 47
  • The technique by Adaptive Images uses `user-agent` to decide whether or not the device is mobile. That's [not really a good idea](https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent). – Tijmen Sep 28 '17 at 15:48
  • Note really @Tijmen, actually it uses screen size, which it stores in a cookie and sends along with any request, which, in my book, is feature detection. It has a fallback to user-agent detection for default mobile/desktop images, which is fair enough imo. No js means inferior experience. – Pevara Sep 29 '17 at 17:34
0

for preventing images to load, you can use remove() object function to remove img tags from your code: 

$('img').remove();

Or you can remove src attribute, NOTE: they have their CSS values like width and height if defined and have their places in code:

$('img').removeAttr('src');
01e
  • 691
  • 3
  • 14