Changing Image depending on Mobile or Desktop HTML & CSS

Question

So im trying to change the image depending on if the user is on mobile or desktop version.

I have two different images, the one with an "m" in the end is a mini-version which is for desktop, and the other is for mobile. I cant get it to work though.

Here's some code:

HTML (Using Razor, so C# code works):

<img id="ifMobile1" src="images/arts/IMG_1447m.png" alt="">

CSS:

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
    }
}

Help me please.

Have you tested on a mobile device? If so - what's the scale resolution of the device? I know my S5 is 3x — Jack hardcastle, Mar 10 '15 at 14:20
Yes I have tested it on a mobile device, the rest of my CSS code works so it's fine. — Andre Korosh Kordasti, Mar 10 '15 at 14:22

score 16 · Answer 1 · answered Mar 10 '15 at 14:34

16

If you want to live in the future, the <picture> element is the way to go. It still has really bad browser support (only blink based browsers, and firefox beta as of now). The good news is that it falls back to a dumb <img> tag, so no harm done except a little slower loading if it's not supported.

Alright, so how does it work?

Most of this example is taken from html5rocks with some modifications

A picture element looks like this:

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

Try the example for yourself at http://googlechrome.github.io/samples/picture-element/, simply resize the width of the browser to see the kitten change.

The cool thing about the picture element is that it allows you to specify media queries to each of the <source> elements. The last <img> is shown if no source is matched, or if the picture element is unsupported.

answered Mar 10 '15 at 14:34

Henrik Karlsson

5,559
4
25
42

Ahh the future... looks awesome. – Aaron Mar 10 '15 at 14:35
Yes, the picture element has less support than srcset, but I don't see it as srcset version 2. They "kind of" do the same thing, but in different ways. srcset is better if it's the same image with different resolutions - the browser could then decide for itself what image to load depending on resolution, pixel density, and probably network speed in the future. The picture element on the other hand you decide the images. This can be good or bad. If you want a different image on smaller devices it's the way to go. – Tony Gustafsson Mar 11 '15 at 10:16
@tony.gustafsson Oh thanks for the info! I thought the picture element was the thing that would stay. Do happen to know if one of them is on the way out? – Henrik Karlsson Mar 11 '15 at 10:25
@Ineentho No I think they are both here to stay :) There are parts of these standards that is not yet implemented in any of the browsers, but it will be awesome when we can use it better. – Tony Gustafsson Mar 11 '15 at 10:28

score 9 · Accepted Answer · answered Mar 10 '15 at 15:28

9

Another trick would be to have two img tags, and hide one depending on the device.

HTML

<img id="img1" src="images/arts/IMG_1447.png" alt="">
<img id="img2" src="images/arts/IMG_1447m.png" alt="">

CSS

#img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}

answered Mar 10 '15 at 15:28

WebbySmart

666
6
12

5

Display none does not prevent the browser from loading the image still. So this is actually worse as both images are loading on every device. – Todd Padwick Sep 29 '17 at 09:05

WebbySmart · Answer 3 · 2015-03-10T14:41:56.413

3

Updated: Please have a look at http://jsfiddle.net/p96denv4/2/

Here's what you would do.

HTML

<div id="ifMobile1"></div>

CSS

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
    width: set your width  ;
    height: set your height  ;
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
        width: set your width  ;
        height: set your height  ;
    }
}

edited Mar 10 '15 at 14:41

answered Mar 10 '15 at 14:24

WebbySmart

666
6
12

Try display: block and also make sure it is pointing to the right path of your image. Is your stylesheet in your main root? – WebbySmart Mar 10 '15 at 14:28
Please see my JSFIDDLE - http://jsfiddle.net/p96denv4/2/ Your background image should be showing. I don't think you can really use img tag to change the image source for mobile at this day and age. Due to browser support. – WebbySmart Mar 10 '15 at 14:47

score 0 · Answer 4 · answered Mar 10 '15 at 15:32

0

img#id {
    content:url(http://example.com/image.png);
}

this may be of use to you, define each of your images in the respective media queries.

answered Mar 10 '15 at 15:32

Jack hardcastle

2,748
4
22
40

This is not useable on all browsers. IE, Firefox will fail as content:url() isn't supported – Aaron Mar 10 '15 at 15:34
Tested in firefox version 36.0.1 and nothing shows? http://jsfiddle.net/3BRN7/406/ – Aaron Mar 12 '15 at 15:07

score -3 · Answer 5 · answered Mar 10 '15 at 14:20

-3

you can't change an image source like that. You'll need to use a div with the original as a background image for this to work.

<div id="ifMobile1" style="background-image: url(images/arts/IMG_1447m.png);"></div>

answered Mar 10 '15 at 14:20

Aaron

10,187
3
23
39

And what about the CSS? – Andre Korosh Kordasti Mar 10 '15 at 14:24
lol @Jackhardcastle really?? you think you can change an image source with css? you've down voted my answer and you have no idea what you're talking about? – Aaron Mar 10 '15 at 14:25
That did not work, it has to be an img element, the div didn't show anything at all. – Andre Korosh Kordasti Mar 10 '15 at 14:25
Use your original css with the height and width of the image applied. – Aaron Mar 10 '15 at 14:26
Yes, I do believe that @Aaron – Jack hardcastle Mar 10 '15 at 14:27
do you have a working example of this magic you speak of @Jackhardcastle – Aaron Mar 10 '15 at 14:30
@Jackhardcastle I didn't think so... BECAUSE IT'S NOT POSSIBLE! – Aaron Mar 10 '15 at 14:36
@Aaron I was on the phone with my bank. Hold on. – Jack hardcastle Mar 10 '15 at 15:00
@Aaron http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/ – Jack hardcastle Mar 10 '15 at 15:01
wow @Jackhardcastle, one of the options here hides and shows 2 different images? nowhere on the example page you've provided does it change the source of an image?? Like I said originally, you have no idea what you're talking about. – Aaron Mar 10 '15 at 15:25
@Jackhardcastle The majority of that article is talking about swapping a background image like my suggestion above (That you down voted!) – Aaron Mar 10 '15 at 15:26
@Aaron I never downvoted it. Ofcourse you can replicate background-image as a CSS selector just as you can with background-color, background, ... I've no idea what I'm talking about, but I won't go into my profession, because this isn't the place. :^) – Jack hardcastle Mar 10 '15 at 15:27
http://stackoverflow.com/questions/9506069/media-queries-and-background-images @Aaron – Jack hardcastle Mar 10 '15 at 15:28
@Jackhardcastle you're point is still totally invalid, you can not swap the source of an image tag. – Aaron Mar 10 '15 at 15:29
At my time of commenting @Aaron, that edit wasn't made to his example. – Jack hardcastle Mar 10 '15 at 15:30
And yes you can, not with barebone CSS - but you can. – Jack hardcastle Mar 10 '15 at 15:30
img { content:url(http://example.com/image.png); } For example, add this into your media queries. – Jack hardcastle Mar 10 '15 at 15:31
great if you're only looking at the site in chrome? – Aaron Mar 10 '15 at 15:32
@Aaron - tested fire IE11 and FF and works for both. – Jack hardcastle Mar 10 '15 at 15:33

Changing Image depending on Mobile or Desktop HTML & CSS

5 Answers5

Alright, so how does it work?

Linked