Image icons in HTML that display nicely in Retina displays - html

Question

I want to have nice images in my HTML that display very nicely on browsers in computers with Retina displays. I'm guessing I just have to have a high resolution image in my img tag. But then the lower resolution browsers will all have to download this bigger file and then downscale it, maybe resulting in a lower quality image than if I downscaled it in a tool like photoshop.
I'm hoping there's something like this I can do:
<img src="/example.png" src-retina="/example-high-res.png"/>
What's the proper way to display 2 different images, 1 for normal displays and 1 for retina displays?

Answer 1

With CSS it's easy
With an image source attribute, there is less of standard way to do it. I've used a JS based approach myself checking window.devicePixelRatio:
<img id="example-img" width="100" height="100"/>
<script>
if (window.devicePixelRatio > 1) {
$('#example-img').src = "/example-high-res.png";
} else {
$('#example-img').src = "/example.png";
}
</script>
But if you can, use CSS and media queries. It's far cleaner.

Answer 2

There are several different approaches out there, and they have upsides and downsides. Apple themselves actually serve both retina and standard images to retina devices, which works but obviously results in pretty heavy downloads.
If you want something that's semi-automated, try Retina.js. From the description:
When your users load a page, retina.js checks each image on the page
to see if there is a high-resolution version of that image on your
server. If a high-resolution variant exists, the script will swap in
that image in-place.
The script assumes you use Apple's prescribed high-resolution modifier
(#2x) to denote high-resolution image variants on your server.

Answer 3

You need to make two (or possibly more) CSS files and use them depending on the user's browser settings with the help of JS. The css file for mobile site should make a new layout that is fully visible in a mobile phone.
Check out this SO Question to make a better understanding of the topic.

Answer 4

Use the responsive design principles for scaling up or down the image size depending on the device screen resolution.
In CSS you may define the max-width and max-height of the target device. This is how you declare it in CSS:
#media only and (max-device-width:1024px) and (orientation:portrait)
After that you have to specify the element width and height in percentage, relative to the parent element. This is the working method, however not the best one in terms of bandwidth consumption on mobile devices, because even if we set the percentage lower, the image is uploaded in it's native size and the downscale is done after the browser parsed the CSS document.
There are some proposals from W3C on terms how should the image been handled by different devices, but none of them are commonly accepted and standardized.
One of the most well received proposal is the new <image> and <source> tags, which accept different image source and depending the screen resolution use the most opportune image dimension.
<picture alt="">
<!-- low-res, default -->
<source src="small.jpg">
<!-- med-res -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- high-res -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content -->
<img src="small.jpg" alt="description of image">
</picture>
There is a polyfill which mimic the proposed picture element: https://github.com/scottjehl/picturefill
Here are two thoroughly explained article about the concept:
http://nicolasgallagher.com/responsive-images-using-css3/
http://css-tricks.com/on-responsive-images/

Answer 5

You could use a div with css background definition that specifies the image. Using css media-queries you could pick the right css definition when the client is a Apple device with a 'retina-display'.

Answer 6

You can do it with jQuery:
HTML:
<img src="/example.png" src-retina="/example-high-res.png"/>
Javascript:
if (window.devicePixelRatio > 1) {
$('img').each(function() {
var src_retina = $(this).attr("src-retina");
$(this).attr("src", src_retina);
});
}
This demo shows the way it works: http://jsfiddle.net/TLz7S/.
Note: I may be detecting the retina display wrong; I don't actually have one. If someone finds that incorrect, please let me know.