How to prevent an image from uploading to mobile?

Question

I’m trying to prevent certain images to be uploaded on mobile, all are with display:None but know that they will be loaded by default, anyone knows any alternative that nay either using the background-image?

Answer 1

Passing src by javascript if the screen size is larger than the mobile screen (stipulated at 480px). Or if you start the resized page at a width less than 480, you will not load the image either.

<script>
window.onload = function()
{

	if( window.innerWidth > 480)
	{
		document.getElementById("minhaimagem").src="https://graph.facebook.com/1299814340/picture?type=large";
		document.getElementById("minhaimagem").style.display="block";
	}
}
</script>

<img id="minhaimagem" style="display:none" />

Answer 2

Using CSS3 media query only loads if resizing the page, so that’s what you’re looking for.

Example - You will load pink div with the smaller view when you click the Run button, and if you are viewing with a resolution greater than 1200 and click on the "Whole page" link, your photo will appear (you will only request the image when you see it in full screen). Tested with Firebug and nay preload the image in memory.

<style>

.minhaimagem 
{

	background-color:#f00;  
	
	height:200px;
	width:200px;
	
	border: 1px solid #000;

}


/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
	
		.minhaimagem 
		{
			background-color:#f0f;  
			background-image: none);
		}	

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
	
		.minhaimagem 
		{
			background-color:#f0f;  
			background-image: none);
		}		

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
	
		.minhaimagem 
		{
			background-color:#f0f;  
			background-image: url("https://graph.facebook.com/1299814340/picture?type=large");
		}	

    }


</style>

<div class="minhaimagem">...</div>