Atlas supports Retina graphics
30 Aug 2012 - iphone, ipad, retina, atlas
Like I wrote about before, this Retina thing is putting up a fight for us web developers. Since I wrote that, I've had a pretty clear solution in my head but I haven't come around to implement it until today.
It's really quite simple, and in the end I added about six lines of code, really. Atlas have since day one had a function for resizing images, so all I had to do was to remake that. It's quite simple and looks something like this:
printimg("ok.png", 32);
That function takes the image "ok.png" and resizes it to match a vertical size of 32 pixels and then returns an IMG tag.
So when Atlas detects a Retina-capable device in the other end, it just simple changes the 32 to 64 but still returns an IMG tag where the size is et to 32, so the resized image is four times as big but is shown at half the size. On a "normal" display, this would be wasted pixels, but on a Retina display, it becomes crisp and nice.
Here's an example of the difference. On the image to the left you can see how Atlas displayed images earlier. All text is very sharp but the images are fuzzy since they are half the resolution of the text. The image to the right shows how it looks after the Retina support has been added. Sharp and crisp images and icons gives a much better appearance.
The effect is more prominent on an actual Retina display, so use your iPhone or iPad to surf to sandman.net and you'll see.
Mer i Webblog
Nyckelord: iphone, ipad, retina, atlas, webb, design or ikoner
