i have what i believe to be a successful responsive web design website. however, some of the images are quite large and they could take up time loading on mobile browsers. i know how to use breaking points with media queries to show different images, the thinner the screen the smaller the image of the same image, but this would add even more content to be downloaded. now not only must the mobile device download the image for its particular width it will also download the images for wider widths in the background. is there a way to prevent this? some code to say if device width is 'x' only load this image? thanks!
you could search for some code to check browser & device of clients. However please remember that the small screen does not mean small resolution. Today many smartphone have a larger solution like samsung galaxy s3 , google nexus , iphone 5 which have width larger than 1000px. So I think you should not to take care how to show small images in mobiles.
when you separate the images into different css parts (screen x size) using mediaqueries, will it still load all the images defined in different path? or it will only load the images defined in the css related parts?.
There's 2 ways you can do it. 1. You could create 2 different stylesheets (desktop and mobile) and have javascript check what the browser size is and load up the relevant sheet: if ( $(window).width() < 960) { $('head').append('<link rel="stylesheet" type="text/css" href="mobile.css">'); } else { $('head').append('<link rel="stylesheet" type="text/css" href="desktop.css">'); } 2. Create conditionals via media queries (which I'm sure you're already using) to load different images for different queries. This link explains it in details for different resolution devices: javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Even so, the image would be loaded full size and squeezed smaller which will still put a load on data usage. I've mentioned a couple of times on here that the 960 grid system works perfectly apart for this problem. The work-around is using a script to upload a single image which will duplicate the image, 1 being full size the other being cropped to a size suitable for tablets/mobiles and use like you said above the switched stylesheet to select which image is shown to the user.