How to sharpen your web graphics for the iPhone 4 retina display
- August 10th, 2010
- Write comment
I’ve been the lucky owner of an iPhone 4 since launch day and i’ve been blown away by the retina display.
One problem though, is the support of the graphics in a UIWebView inside an app, or just browsing your favourite sites in Mobile Safari.
Some of my apps have UIWebViews inside them, and whilst I’ve updated all the other graphic elements that are hard coded inside the app using the @2x trick I was struggling how to actually get the web graphics to be nice and crisp on the retina display.
It turns out it is dead easy!
Let’s say you have a graphic that needs to be 20×20 pixels in size. Simply make it 40×40 pixels, and set the actual display size on screen to 20×20 like this…
<img src=”images/myiPhoneGFX.png” width=”20″ height=”20″ border=”0″/>
On a regular iPhone it’ll display as normal, on an iPhone 4 it’ll be crystal clear!
Easy peasy!





