The Untold Awful Truth Behind Retina

I put in place a very simple test page made out of circles

• first one is in svg without touching its ratio
• second one is a canvas with anti aliases, if any, and with same svg size multiplied its ratio
• third one, an image out of the previous canvas
• forth one is just same canvas without anti alias, if any

At the end, little one in the left corner, the current used ratio the moment you see the page, out of my display script logic.
Discarding basically second and third circle, here the untold story about retina.


Above is the difference within SVG and same image with 2X ratio on a Nexus 5.

2X Images Aren't Enough

The fact Apple keeps telling developers "just use 2X images and you gonna be OK" does not mean it's OK. The iPad mini retina, together with the iPod retina, and I expect all others, are actually trapped behind this mythologic 2X.
That's correct, the border of both svg and aliased canvas circles in iPad retina look the same. What's the issue in here? That in 326 pixels per inches the quality cannot be that 2X same of 264 ppi or just 220 in case of MBP so basically the display is capable of more, but the software (or trapped hardware?) won't show you any difference.
How can I tell? If you check circle borders you can tell it too!

Nexus 5 3X Isn't Enough

If you check the border of both svg and aliased canvas circles again but with your Nexus 5, you'll notice that while SVG is very sharp and perfectly aliased, the canvas 3X version is not.
In order to obtain a similar result you might want to scale up the ratio a little bit, let's say 4X ... you see? with this latest link the canvas is almost as sharp as the SVG. Still not a perfect ratio with 445 pixels per inches.

Those Bad Boys

So the honest Blackberry 10 with its 2.2437500953674316 (!) ratio looks actually sharper once forced at 2X with less artifacts visible on such good display.
Android 2.X on Samsung Galaxy Y with its 0.75 ratio looks smooth and antialiased enough.
The least considered device, at least in the US, aka Windows Phone that has a ratio of 1.5 since version 7 devices, looks very sharp! It is possible to compare with blurry circle perimeter forcing ratio at 1X ... that's how every logo and/or graphics is looking these days in Windows Phone: crap, because most likely you, your framework, or your CDN, is serving 1X images thinking that's enough for that screen. I tell you there is already a huge different, you should try it!

This Is MA MA MA MA MA MA MA MA Mad Mad Madness

The last project I am working on some spare time over the week end ended up with some code like this:

function createShortcutIcon(iconCreator) {
  for(var
    link1, link2,
    // used to generate icons at runtime
    canvas = document.createElement('canvas'),
    // where to place links
    fragment = document.createDocumentFragment(),
    sizes = [
      30, 57, 60, 72, 114, 128, 144, 173, 196
      // completely random , hopefully future proof, entries
      , 214, 256
      // btw, the whole sizes and 2X idea is so wrong ...
    ],
    i = 0; i < sizes.length; i++
  ) {
    link1 = document.createElement('link');
    link2 = document.createElement('link');
    link1.rel = 'shortcut icon';
    link2.rel = 'apple-touch-icon';
    link1.type = link2.type = 'image/png';
    link1.href = link2.href = iconCreator(
      canvas, sizes[i], '#E6A72A', '#286868'
    ).toDataURL();
    link1.setAttribute('sizes', link1.sizes = sizes[i] + 'x' + sizes[i]);
    link2.setAttribute('sizes', link1.sizes);
    fragment.appendChild(link1);
    fragment.appendChild(link2);
  }
  (document.head ||
   document.querySelector('head')
  ).appendChild(fragment);
}

Above non-sense creates every sharp icon for Home Screen saving in every bloody device I have to deal with, where it does not make sense to talk pixels when we cannot know dynamically/upfront how many we need.

The FirefoxOS Joke

There is a manifest validator, which is nice, that tells you that the icon supposed to be 60x60, or 90x90, but maybe 120x120 is good too, and if you really want to cover everything, provide 256x256, 128x128, 64x64, 32x32 and 16x16 ... are you mo$#^*@&^#&*^fu&#&*!^%$#&@ng kidding me?

An Epic Fail, IMHO

This part of moving the web forward, including the inline CSS data URI that unfortunately cannot scale as well with all sort of devices pixels ratio, unless you don't inline SVG directly, took a very weird direction where nobody knows anymroe what to do to make an image, an icon, looks good across all platforms.
Raster Images Are Death, IMHO, and we should provide maximum 3 sizes for these, as it is already for stremed video: from the very-high quality, to the medium, and low one for those that have to pay for bandwidth but holy crap there's no way even Akamai will ever provide the right ratio for every device so why on bloody earth we should write stuff like this?

<img srcset="
  320.jpg .89x 400w, 480.jpg 1.33x 400w, 640.jpg 1.78x 400w,
  480.jpg 1.04x 520w, 640.jpg 1.39x 520w, 960.jpg 2.09x 520w,
  640.jpg 1.1x 639w, 960.jpg 1.66x 639w, 1280 2.2x 639w,
  320.jpg 0.89x 800w, 480.jpg 1.33x 800w, 640.jpg 1.78x 800w,
  480.jpg 1.09x 959w, 640.jpg 1.45x 959w, 960.jpg 2.18x 959w,
  320.jpg 0.89x 1200w, 480.jpg 1.33x 1200w, 640.jpg 1.78x 1200w,
  480.jpg 1.09x 1440w, 640.jpg 1.45x 1440w, 960.jpg 2.18x 1440w,
  480.jpg 0.86x 1920w, 640.jpg 1.14x 1920w, 960.jpg 1.71x 1920w, 1280 2.29x 1920w,
  640.jpg 0.86x, 960.jpg 1.29x, 1280 1.71x, 1920 2.57x
">

This is not me speculating, Mr. Tab Atkins Jr wrote a post about this and he is one of those guys that are trying to make good standards for everybody future ... do you see the problem I am talking about now?

Solution

I wish I had a silver bullet for this, unfortunately nobody can tell hardware and screen developers that they should stick with few predefined resolutions: they are competing with each other to put as many pixels as they can in a smaller part to make it sharper ... and while somebody complained our eyes cannot even spot the difference, I have created the circle test that is showing to my eyes that circles are not so sharp and crisp yet, but I don't think the web will ever go far using raster images, no matter how optimized are these since these do not scale.
SVG or make it vectorial All The Things is my current mantra ... that does not require a new manifest for FirefoxOS per each new device with a better screen in the near future.