7

I want to know if it is possible for my front page to load an image dedicated for mobile users only. I know it is possible with javascript, but I want to know if I can achieve the same using CSS only. I have tried to do some research but can't find what I am looking for. I do not mean resizing the image based on the screen size, but loading a mobile-friendly image.

S.Reyes
  • 91
  • 1
  • 6

4 Answers4

6

Make use of media query to change background-image at different screen resolutions as 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 this jsFiddle.

frnt
  • 8,455
  • 2
  • 22
  • 25
2

Yes this is possible. You can use Media Querys. Example CSS:

#yourimage {
    display: none;
}

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

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

https://jsfiddle.net/vqfLokpa/

Just hit run and then start to make your browser window smaller.

NullDev
  • 6,739
  • 4
  • 30
  • 54
  • Hey, thanks for your response. The scenario is, I have a two images. One of them is for the desktop website, and it is quite big. But for a smaller screen(mobile), I want to load the smaller version of that picture. – S.Reyes Mar 22 '17 at 09:28
  • Then just set the first picture to `display: none;` and the new picture to `display: block;` I edited the post with a JSFiddle if you're not sure on how to implement it. – NullDev Mar 22 '17 at 09:30
  • But won't this load both images, and slow down performance? Because In this case it is for my front page which has quite some media on it. :) – S.Reyes Mar 22 '17 at 09:31
  • 1
    Well, a browser only loads the CSS it applies to. So you could make a Media query for desktop and put the image in there. Then it will not load on a mobile phone. – NullDev Mar 22 '17 at 09:35
  • Ahh I see! Thanks dude:) I think this may be what I am looking for :D – S.Reyes Mar 22 '17 at 09:38
2

You can use media queries to apply classes depending on the 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) {

}
cnrhgn
  • 703
  • 4
  • 18
  • Hey, thank you for your answer! But if I were to take this approach won't it load all the images to the page and slow down performance? I was wondering if using pure css, I could load just the needed image to the page. – S.Reyes Mar 22 '17 at 09:34
  • All your images will load at the start no matter what, you will need to optimize your images so they won't slow down the site regardless of what you're showing on mobile or desktop. But this should allow you to hide and show what you need on whatever screen size. – cnrhgn Mar 22 '17 at 09:38
1

Based on your comment to @NullDev, you will need to create a div at the appropriate size and apply the image as a background image on an element in order to condition what is loaded via CSS.

For example:

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');
   }
}

I hope this helps.

thisiskelvin
  • 4,136
  • 1
  • 10
  • 17