Hello SitePoint,
I always read this Retina Ready Images or Websites… I also did some Googling but didn’t understood it well.
What people actually mean by it? I think it means crystal clear images on all devices and my images also looks perfect in all devices… from desktop to ipad to mobile phones. So why do people stress on it. Is it really a marketing gimmick for them?
Thank you.
You’ve looked at your images using a device that has retina display?
If they had then they’d already know what retina ready means.
This may be a bit simplistic (just like me) but it goes something roughly like this.
Retina display devices show more pixels per square inch to allow for a crisper display and in order not to let the resulting display appear too small elements are mapped to 2 pixels instead of one (for retina2) (otherwise they would be tiny).
This means that if you have standard image of 100px x 100px then it is automatically resized to be 200px x 200px by the retina device so that when it is shown on the denser pixel display it once again ‘appears’ to be 100px x 100px (because of the double density pixels). However the browser resizing the image to 200% makes it blurry as is doesn’t now map pixel to pixel.
For retina devices it follows that you should make the image larger to start width (double the size for retina 2) and display it half the width and height on screen. Now when the retina device scales the image to 200% it will be back to its original size and look crisp and clear as it will map one pixel to one pixel rather than one pixel to two pixels as with the normal image.
You can’t simply take an existing 100px by 100px image and resize it in your paint package as that is just stretching it again. The image needs to be made larger at source to start with and then reduced.
As others have mentioned you will only notice if your images are sharp when viewed on the retina device.
Ohh OK… I see I see… Retina ready devices. Nope I was only seeing in my desktop by resizing browsers.
Thank you Paul. I still need to read more tuts and test it.
If this is the case, and folks are actually trying to support these retina displays, I should find web sites where I see something like this:
#mypic {width:200px}
...
<img id="mypic" src="pic.jpg">And then if I look at pic.jpg, I should find that it is actually 400px wide. Is that the implementation, PaulOB? It seems quite cumbersome, maybe I’m not getting it right.
And are folks here doing this, or ignoring the whole retina thing?
Yes but you just need to supply the new width and height in the image attributes (although you can still do it in css if you want).
<img id="mypic" src="pic.jpg" width="200" height="200">
If you then look at the original size of the image it should tell you it was 400px wide etc.
It depends on the site and if you want your images crisp then you need to do the above or use svg instead (which scales with no loss).
It is quite cumbersome but hopefully in the future the browser will pick the best image for the type of device but you will still have to make a series of images if you want to support multiple devices.
There’s a good write up here.
Thanks much Paul, and that link was an interesting read. I may be behind the times a bit on this; I have never even heard of “img srcset=…” , and frankly I don’t even remember seeing a forum post about it, while the author describes it as fairly well supported and the primary tool used to address images responsively. In any event, image handling in web sites looks to be getting more complicated than it was for the first 20 years.
For an example, see the displayed logo at
Compare with the actual logo image
https://discourse-meta.s3-us-west-1.amazonaws.com/original/3X/c/b
Interesting. So this implementation has the image set in css to: max-height:45px, and the actual image is 349px tall, 7.75 times as large as the max they will display at. So presuming this is done for varying retina-style image sizing, this is definitely being ready for some monster screen resolutions to come!
lol it will even look good using a 5 foot TV flat screen as the monitor !
It seems like a waste of bandwidth to me. Why send a heavier weight image file only to have CSS shrink it down to where a lighter weight file would have sufficed.
srcset looks promising (not the same thing, but somewhat related), but alas, not all browsers support it.
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
Do we need all these thingy in BootStrap? In BS, I generally use a very large image of 1000px width and use the class img-responsive.
That way the image resizes itself nicely to all devices… desktop, ipad,mobile.
Now thats a responsive image. I don’t know whether that is a retina ready image or not …
It doesn’t actually have to be a “heavier” (i.e. bandwidth hogging) image. One study found that, if you gave the image huge dimensions, but then greatly reduced the quality, the image still looks crisp on all devices (including retina) without have a large file size.
The thing I don’t like about the new srcset discussions is that they tend to talk about serving up heavier images to retina devices but often overlook the bandwidth issue—at least the things I’ve read. The method I linked to above covers all bases at once.
Yes, its not a straight forward problem as you have high displays but may have low bandwidth.
There’s a nice short article here on srcset and picture that make it easy to understand.
It won’t be retina ready on devices that have displays larger than 500px such as macs and ipads and may look blurry on those devices. The image needs to initially be at least twice the size that is going to be displayed at.
Whether this is a big issue or not depends on the type of site, the device and your eyesight. I’m not sure that most mobile users really mind (or would notice on a small device) unless its an app or something like that. On large retina desktops or large ipads etc then it probably will notice.
The image @Mittineague posted was a good example of this. It is actually only 4.53k.
Using the most appropriate or efficient method of compression is often overlooked. That is a png with 8bit indexed colour, png is very efficient with “flat colour” graphics. The same image at half the dimension (1/4 the pixels) saved as jpeg at medium compression is almost 10 times the filesize.
TBH, lots of images look awful on my phone, tablet and laptop these days—all of which have retina screens. It really stands out like a sore thumb to me.
Boasting again Ralph 
(I’m stuck on a iphone 4 and I only got that because it was given to me.)
I’m not sure it’s something to be proud of. It’s a bit of a curse in a way. My older 4S iPhone had a retina screen, so that must have been the first iPhone to have one. I wasn’t sure.
Especially tricky thing for full screen background images. For an icon you know it’s dimensions and double it up for retina screens but for a full screen background image… How do you deal with that when we have huge imac retina screens? 