What are the best practises to support switch sourcing images for retina display/non-ratina mobile devices?

Retina Display is Apple’s brand name term which refers to a liquid crystal display that displays pixels at higher density.
A simple visualization will explain this concept well so take a look at the image below which compares the pixels between Retina and a standard definition display.
In Retina Displays, you get double the pixels in the same amount of space as you would with a traditional display.
This is why icons or text on an iPad2 looks blurrier then on iPad3 How to create Retina ready images in Responsive Web Design? There are various tool and methods out there.
I will discuss only a few mostly because they best accommodate the responsive aspect of this problem.
SVG SVG is an image format for vector graphics that allows those vectors to scale up or down in size without losing their shape.
Because vectors are composed of a fixed shape instead of pixels, they can be manipulated in many ways and still have their shape be kept intact and sharp.
Unfortunately, raster images – which are JPG, PNG, or GIF – cannot do that.
Because of the unique ability to resize flawlessly, SVG is a great format to use in Responsive Web Design.
Photographs and Raster Images I understand that not all images can be a SVG format especially if they are a photo or are already a raster image.
There is a possible solution to this issue which is to use image at twice its desired size and display it at50% of those dimensions.
What I mean is that if you have a photo in a website that is150px wide by150px tall, use an image that is actually300px x300px in size but still display it at150px x150px.
This way, on a Retina Display the image will show nice and sharp.
There are many ways to have2x images implemented into your website via HTML, CSS or JS.
I will not go into detail about them here but I will show you just the basic methods.
First, if you have an image that is the size of300px x300px, in your HTML you can simply declare the height and width of the image to be150px.
Additionally, you can change an image’s width and height in CSS by either declaring the image to be50% of its size or literally defining for it to be half if you know what half is.
img{ width:50%; height:50%; } .box img{ width:150px; height:150px; } Lastly, if the image you want to downsize is a background, this is the code to do the trick: .box{ background-image: url(myIMG.png); background-size:150px150px; } There is a big downside with this method.
First, you cannot have a double sized image unless you have access to a bigger image.
Obviously, blowing one up and using it isn’t the way to go at all! Additionally, if your website had many images or even some images that are just big in size, the load time can be greatly affected by having to load these now giant file.
This is an especially big bummer as many mobile devices use crappy connections whether it is a low Wi-Fi bandwidth or low or slow cell phone service.
But there are ways to fix it too.
Media Queries When creating a CSS media query you are able to specify more than just device widths or heights.
The following code is a sure way to detect if the device has Retina Display.
This works best when the images you use on your site are backgrounds of divs so that in the media query you just change the image with the one that is double in size.
This way, the big images are only loaded for the Retina Display devices.
@media only screen and (-webkit-min-device-pixel-ratio:2), only screen and ( min--moz-device-pixel-ratio:2), only screen and ( -o-min-device-pixel-ratio:2/1), only screen and ( min-device-pixel-ratio:2), only screen and ( min-resolution:192dpi), only screen and ( min-resolution:2dppx) { /* Retina replacement CSS here */ } Retina.js If you don’t fancy the media query solution that is perfectly fine.
There is a JavaScript plug in to solve this issue! “retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.” How this plug in works is that when you have two images, one of the intended/original size and the other one double that size, retina.js detects when there is a Retina Display being used and changes the images accordingly.
It is very simple to work with and I suggest checking it out.
All you have do is to make sure that you name your images accordingly to work with the plug in.
Icons Thanks to @font-face and fonts that are made up of icons instead of letters, you are welcome to utilize them instead of images.
I very well support this method for two reasons.
First, fonts are great at scaling in a similar way that SVG do, therefore they not only scale to different screen sizes but also to different resolutions such as Retina.
Also, currently @font-face browser support is very high and is only growing.
Most current browsers – mobile and desktop – support @font-face which allows many users to see your icon fonts perfectly.
To learn more about @font-face check out http://www.font-face.com/ Hope this answer is helpful Regards