Automatic Retina Images for Web Sites

Preparing the images for retina-ready (web)

The question you link is correct. You need to double the size of the image to double the resolution.

What you are getting confused over is the PPI. PPI is Pixels Per Inch, it is simply a measure of how big a picture is, same as display dimensions.

One is not independent of the other.

An image of 400x200 will take up as much screen space on a 72 ppi display as a 800x400 image on a 144 ppi display. The difference is simply that the 144 ppi device is able to fit more pixels in one inch of screen space than the 72 ppi.

So, by doubling the resolution of a 72ppi image, you are indeed insuring that it looks the same/takes the same amount of screen space.

Image icons in HTML that display nicely in Retina displays

There are several different approaches out there, and they have upsides and downsides. Apple themselves actually serve both retina and standard images to retina devices, which works but obviously results in pretty heavy downloads.

If you want something that's semi-automated, try Retina.js. From the description:

When your users load a page, retina.js checks each image on the page
to see if there is a high-resolution version of that image on your
server. If a high-resolution variant exists, the script will swap in
that image in-place.

The script assumes you use Apple's prescribed high-resolution modifier
(@2x) to denote high-resolution image variants on your server.

Using Retina images in a local UIWebView

Make sure you are specifying height and width on your <img> tags. You certainly need at least width to make this work.

---

Related Topics