how to specify a different image in css depending if the user visits on a desktop or a mobile browser

Question

Just a question about css for mobile devices,

i have an image that is 1260px wide on my website and when i look at it on the phone it destorts the website as the rest of the website is based on a 960px layout.

I have made these images to be now 960px wide for the mobile device but how do i specify in css that if it is a mobile use mobile optimized image instead of the one on the regular website.

So basically if a user goes on the website on a desktop computer it will show the 1260px image

and if they visit the website on a mobile it will display the 960px image

any ideas guys?

Answer 1

Im not sure if you want JS, i decided to answer your question if you want CSS3, try this:

HTML:

<img src="image.jpg"
     data-src-960px="image-960px.jpg"
     data-src-1260px="image-1260px.jpg"
     alt="">

CSS:

 @media (min-device-width:320px) {
        img[data-src-960px] {
            content: attr(data-src-960px, url);
        }
    }

    @media (min-device-width:960px) {
        img[data-src-1260px] {
            content: attr(data-src-1260px, url);
        }
    }

jQuery version:

 $(document).ready(function() {

 function imageresize() {
 var contentwidth = $('#content').width();
 if ((contentwidth) < '960'){
 $('.imageclass').attr('src','image-960px.jpg');
 } else {
 $('.imageclass').attr('src','image-1260px.jpg');
 }
 }

 imageresize();//Activates when document first loads    

 $(window).bind("resize", function(){
 imageresize();
 });

 });

Answer 2

Inspired by Ivan's answer, here is a jQuery version that uses media queries to be as close as possible to his CSS3 solution (which doesn't work for me in Firefox 31 and Safari 7):

$(document).ready(function() {
    var mqsmall = "(min-device-width:320px)";
    var mqbig   = "(min-device-width:960px)";
    function imageresize() {
        if(window.matchMedia(mqbig).matches) {
            $('img[data-src-1260px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-1260px'));
            });
        }
        else if(window.matchMedia(mqsmall).matches) {
            $('img[data-src-960px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-960px'));
            });
        }
    }

    imageresize();

    $(window).bind("resize", function() {
        imageresize();
    });
});

Answer 3

You're looking for media queries. You can write styles conditional on width:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.w3.org/TR/css3-mediaqueries/