如果访问者拥有移动设备，则阻止从站点加载图像...有何看法？

Question

I'm using media queries, but unfortunately they are inferior to a simple "monolithic" version of the site specifically for mobile devices in the determination of user agents (like Google, Facebook and other sites). I do not want to do a special version, because I have translated the entire site to media queries. The bottom line is that this method does not have the flexibility in terms of weight loading pages that are critical for owners of mobile phones (in our country the mobile Internet is still very at a high price + images reduce performance). I have matured the idea to use Javascript, which will prevent the browser to load the image at a certain rule (eg screen resolution). What do you think - is actually realized, and may already have implemented? I know that the site is visited by a lot of smart people and I would really like to hear from you invaluable experience in this area!

Sorry for bad English.

UPDATE: Prevent images from loading

Answer 1

There are a number of possible solutions to this question. I'll list the common three below.

A CSS only solution, a javascript solution, and a HTML5 solution if you don't care about older browsers:

CSS

I would suggest moving the images into style tags and use media queries to show the appropriate image:

<style>
/* mobile first */
.img {
    display:none;
}

/* tablet */
@media (min-width:600px) {
    .img {
        background:url('/path/to/image-tablet.png') no-repeat scroll 0 0 transparent;
    }
}

/* desktop */
@media (min-width:1280px) {
    .img {
        background:url('/path/to/image-large.png') no-repeat scroll 0 0 transparent;
    }
}
</style>

<div class="img"></div>

Assuming this is a dynamic webpage, you would include the css in the page withing style tags instead of in a css file.

HTML5

If you are not bothered about complete browser coverage ( canIuse ), you could also use the new HTML5 picture element:

<picture>
  <source 
    media="(min-width: 1280px)"
    srcset="/path/to/image-large.png">
  <source 
    media="(min-width: 600px)"
    srcset="/path/to/image-tablet.png">
  <img src="/path/to/image-mobile.png" /> <!-- a 1x1 empty pixel -->
</picture>

In this example, mobile browsers and browsers that do not support it will load the img tag. Other browsers will load the appropriate image for the media query.

If you like this solution but also want it to work on older browsers, there are JS scripts you can find that will implement the feature if the browser does not support it.

Javascript

This approach feels the most hacky to me, but that is just my opinion. It has a very large browser coverage, with IE supporting this method since 10.

Create an image tag without the src attribute, and the image size versions as data attributes:

<img data-tablet="/path/to/tablet.png" data-desktop="/path/to/large.png" />

<script>
var $el = jQuery('img');
if(window.matchMedia("(min-width: 600px)").matches) {
    $el.attr('src', $el.data('tablet'));
}
if(window.matchMedia("(min-width: 1280px)").matches) {
    $el.attr('src', $el.data('desktop'));
}
</script>

I've used jQuery to demonstrate, but the important part of this is the window.matchMedia . This does a media-query like check and returns a boolean value.