Download image for mobile only

Question

I want to know if my first page can upload an image intended only for mobile users. I know this is possible with javascript, but I want to know if I can achieve the same using only CSS. I tried to do some research, but cannot find what I am looking for. I do not mean resizing the image based on the screen size, but loading the image convenient for mobile devices.

Answer 1

Use media query to change background-image in different screen resolutions , as shown below,

 div{ width:100%; height:400px; background:url('http://placehold.it/350x150/f22/fff'); background-size:100% 100%; } @media screen and (max-width : 480px){ div{ background:url('http://placehold.it/480x150/f12/fff'); background-size:100% 100%; } } @media screen and (max-width : 320px){ div{ background:url('http://placehold.it/320x150/e12/fff'); background-size:100% 100%; } } 

 <div></div> 

Check jsFiddle .

Answer 2

Yes it is possible. You can use Media Query. CSS example:

 #yourimage { display: none; } @media (max-width: 500px) { #yourimage { display: block; } } 

This code is for tho html images. Here is the JSFiddle:

https://jsfiddle.net/vqfLokpa/

Just hit mileage and then launch a browser window.

Answer 3

You can use media queries to apply classes based on screen size.

 #img { display: none; } /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { #img{ display: block; } } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { } 

Answer 4

Based on your comment on @NullDev, you will need to create a div with the appropriate size and apply the image as the background image for the element to determine what is loaded via CSS.

For instance:

HTML:

 <div id="image"></div> 

CSS

 #image { position: relative; width: 400px; height: 400px; background-image:url('/path/to/image'); background-size: cover; background-repeat: no-repeat; } 

Then apply the media query:

 @media only screen and (max-width : 480px) { #image{ background-image:url('/path/to/mobile/image'); } } 

Hope this helps.