CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3
Reddy
Reddy

Reputation: 1497

CSS Responsive Images - Don't Load / Remove large size images in mobile

I am working on Responsive site which has many large images...

I am aware of how to resize/hide the images for mobile devices. In this case, images are loading and hiding which is causing more internet data from the user's device.

Instead, I dont want to load the large images if somebody is viewing on the mobile

Any Help Please?

Upvotes: 0

Views: 834

Answers (1)

Alexis
Alexis

Reputation: 5831

You can import you're image in css like that :

@media screen and (min-width:800px){
    .class{
    background-image:url('large.png');
    }
}

and redefine you're class for mobile

@media screen and (max-width:500px) {
   .class{
      background-image:none;
   }
}

Upvotes: 2

Related Questions