There are a whole variety of ways that responsive images can be accomplished, but as of yet there is no perfect way of doing it without using a combination of .htaccess, javascript and css. My solution is no different and uses JavaScript (in the form of jQuery) as the coordinator of the images.
responsiveBreakpointJQ works by specifying the images that will show if the screen of the device is big enough. The data-XXX values are how the appropriate image is specified. If a screen is wider than the XXX value then that image is selected as the best one for the job.
1<img src="small.jpg" data-480="medium.jpg" data-960="large.jpg" alt="Image Alt text" /> If you would like to read more then take a look at the responsiveBreakpointJQ project on github . If you feel you can make it better then be my guest :D
Download the jQuery Responsive Breakpoint Image Plugin from git hub to checkout the code: https://github.com/Designer023/responsiveBreakpointJQ
Pros:
- Can add as many breakpoints as needed.
- Breakpoints will automatically work for retina displays if a breakpoint that is big enough is specified. i.e. data-2000 would act as a retina image for a screen with a width of 1000px.
Cons:
- Will always load the default images
- Needs jQuery/JavaScript
- Takes no account of bandwidth available, and just assumes that bigger screens tend to be connected to better connections