Prohibit uploading images to a page from a mobile site

Question

How can I make sure that images in the mobile version of my site are not downloaded from the web server, since these are large files that are not needed and are not used and therefore greatly affect the use of the mobile version of the site. Looking at previous streams of this nature, I saw that it might come in handy to hide the parent image of the image using code such as below.

.parent {display:block;} .background {background-image:url(myimage.png);} @media only screen and (max-width:480px) { .parent {display:none;} } 

The problem is that I don’t want to use the CSS of the background image for the related SEO problems, because I like to use Schema tags, etc .... how can I prevent the IMG tag from loading because display: none; only hides the image, and does not stop its loading.

Note. This does not apply to copyright protection issues, for example. preventing right-clicking, etc., but for the speed and, ultimately, the size of the downloaded content for mobile devices.

Answer 1

This solution uses CSS to prevent background images from loading, and jQuery to prevent images from loading. I am not familiar with any CSS solution that will prevent image loading.

JS Fiddle: http://jsfiddle.net/CoryDanielson/rLKuE/6/

If you know the height and width of the images (or even the ratio) well in advance, you can set the background-image for a fixed-size DIV group. This may be applicable for images and layout images. The following is an example of HTML / CSS.

Background Images

 /* hidden by default */ aside { display: none; } /* Pictures load for 'big screen' users.. pcs/tablets? */ @media screen and (min-width: 750px) { aside { display: block; } .catpicDiv { height: 100px; width: 100px; display: inline-block; border: 1px solid red; background-image: url('http://img2.timeinc.net/health/images/slides/poodle-1-400x400.jpg'); background-size: cover; } } 

and HTML

 <aside> <div class="catpicDiv"></div> <div class="catpicDiv"></div> <div class="catpicDiv"></div> </aside> 

---

---

Image elements are another story ...

I don’t know any pure CSS solutions to prevent them from loading images. Therefore, I would solve it as follows:

Define IMG tags as follows

 <img src="" data-src="url-to-image.jpg" /> 

Then, somewhere at the beginning of the document you need a similar javascript

---

1) Function to download all images

 function loadAllTheImages() { $("img").each(function(){ $(this).attr('src', $(this).attr('data-src')); }); } 

2) A code to determine if the user is on a mobile or PC (slow and fast connection), and then upload images. This code is not bulletproof, there are much more accurate and reasonable tests than this.

 $(window).load(function(){ if ( $(window).width() > 750 ) { loadAllTheImages(); // ! } else { $("body").append("<a id='mobileCheck' href='javascript: void(0);'>I GOTS 4G, LEMME HAVE EM!</a>"); } }); 

3) Like and maybe some kind of code to activate the button to upload images? Why not, I think ...?

 $(document).ready(function(){ $('body').prepend("<h1>" + $(window).width().toString() + "</h1>"); $('body').on('click', '#mobileCheck', function(){ loadAllTheImages(); // ! $("#mobileCheck").remove(); }); }); 

---

A similar solution, as here, and what I suggested in the comments:

Delay loading images using jQuery

Answer 2

There is no built-in solution in CSS that would prevent images from loading even if you hide them or set the display to none.

You must use some JS to achieve this result. If you are familiar with JS, this should not be a problem at all. There are several plugins ready to go do what you want. You can also write your own JS, because it is not so difficult.

Here is my code that loads images depending on screen size:

DEMO AT CODE PEN

It works without any libraries, such as JQ, but if you use one of them, it will automatically switch to it (configure it for specific needs).

Js

 // use jQuery or pure JS if (typeof jQuery !== 'undefined') { // jQuery way // alert("jquery"); $(function() { $(window).on('load resize', function() { var products = $("[data-product-image]"); products.each(function(key, value) { var bg = null; if (window.outerWidth < 500) return; if (window.outerWidth < 1000) bg = $(value).data("product-image-s"); if (window.outerWidth >= 1000) bg = $(value).data("product-image"); console.log($(window).outerWidth); $(value).css({ 'background-image': 'url(' + bg + ')', 'background-position': 'center', 'background-size': 'cover', }); }); }); }); } else { // Pure JS way // alert("JS"); (function() { window.addEventListener('load', wlImageLoader); window.addEventListener('resize', wlImageLoader); function wlImageLoader() { console.log('event! Trig trig'); var all = document.getElementsByTagName("div"); var products = []; for (i = 0; i < all.length; i++) { if (all[i].hasAttribute('data-product-image')) { products.push(all[i]); } } Array.prototype.forEach.call(products, function(value) { var bg = null; var curent = window.getComputedStyle(value).getPropertyValue('background-image'); console.log(curent); if (window.outerWidth < 500 || curent != 'none') return; if (window.outerWidth < 1000 && curent == 'none') bg = value.getAttribute('data-product-image-s'); if (window.outerWidth >= 1000 && curent == 'none') bg = value.getAttribute('data-product-image'); // if (window.outerWidth >= 2000 && curent == null) bg = value.getAttribute('data-product-image-l'); if(bg == null || curent != 'none') return; value.style.backgroundImage = "url(" + bg + ")"; value.style.backgroundPosition = "center"; value.style.backgroundSize = "cover"; curent = window.getComputedStyle(value).getPropertyValue('background-image'); console.log(curent); }); } })(); } 

HTML

 <div data-product-image="img/something_normal.jpg" data-product-image-s="img/something_small.jpg" id="p3" class="product"> 

However, if you download freaks, you probably prefer to write your code natively in JS, as you often don't use most of the jQuery library. For a quick Internet connection, this is not a problem, but if you are targeting mobile devices on a country side, it can make a difference.

Answer 3

I would suggest combining, perhaps, the @import and @media commands, so that only the @import style sheet contains images if the @media tag matches your criteria (say, by a certain resolution).

Thus, by default, you will not import a stylesheet that uses the BG image, you will only finish this if you determined that the site was "non-mobile" .. if that makes sense!

The W3c website has some good examples of combining rules:

http://www.w3.org/TR/css3-mediaqueries/#media0