CODEWITHSUNDEEP
javascriptjquerycssresponsive-designmedia-queries
Chris
Chris

Reputation: 949

Prevent image from loading on mobile devices

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

Upvotes: 6

Views: 13223

Answers (4)

Etienne678
Etienne678

Reputation: 454

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.

Upvotes: 0

01e
01e

Reputation: 701

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

Upvotes: 0

Pevara
Pevara

Reputation: 14310

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.

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24703

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>

Upvotes: 7

Related Questions