Prevent image from loading on mobile devices

Question

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" />

Octans

Just so you know, every stylesheet is downloaded by every device, even if they do not meet the media query requirements. – Travers

I would use the information in here and the media-query element of modernizr to do this, assuming it can be achieved. – Stevenstevena

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 and try out their approach. – Cohosh

Answer 1

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>

Varion

though it is indeed common practice, I believe there is a semantic difference between a <img> and a background-image so strictly speaking this is bad coding... – Kalmuck

@PeterVR I just posted the answer, I haven't commented. – Varion

Google seems to not use background-images when including a featured image in google search. – Cockatoo

Answer 2

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.

Kalmuck

The technique by Adaptive Images uses user-agent to decide whether or not the device is mobile. That's not really a good idea. – Yama

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. – Kalmuck

Answer 3

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');

Button

Answer 4

To make sure that the image is loaded only on desktop devices and not on mobile devices, you can make use of the HTML element and combine it with media queries. The element allows you to define multiple sources for an image, and the browser will choose the most suitable one based on the media query and the device's capabilities.

Here's how you can modify your code to achieve this:

<div class="image_holder">
    <picture>
        <source media="(min-width: 768px)" srcset="assets/images/background/bg_0.avif">
        <!-- The img tag below is a fallback and will use the source defined above if the media query matches -->
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Overflow Image">
    </picture>
</div>

Here's what's happening:

The element with the media="(min-width: 768px)" attribute tells the browser to use the bg_0.avif image only if the viewport width is 768 pixels or more (typically desktop screens). The tag acts as a fallback. If none of the media queries in the elements match, the browser will use the image specified in the tag. In this case, we're using a tiny transparent GIF as a placeholder, so no actual image is loaded on mobile devices.

This way, the image is only loaded on desktop devices, and mobile devices won't load it, saving resources.

Exigent