PNG Image quality on iPhone retina display

ionic-v1
1

I used the following code to place an image on the title of the header:

The template:

<ion-view title="{{ headerTitle }}">

And on the controller:

$scope.headerTitle = '<img src="../img/logo.png">';

logo.png is a 103x34 png that when viewed on an iPhone appears all blurry. I guess that’s because of the retina display.

How do I place an image that’s ready for a retina display as well as others devices?

2

From what I’ve read, you’ll need an image twice as large for a retina display. So maybe, save your image in 206x68 and fix the real size in css.

Otherwise there’s a Javascript library which can manage different image versions for retina and non-retina displays : http://imulus.github.io/retinajs/

Anyone, feel free to correct me, I’m just guessing.

3

Just saying…SVGs would be perfect