With the advent and popularization of devices with high pixel densities (such as Apple’s “retina” devices), web developers are talking a lot about how to serve images that look great on retina devices without increasing the download burden. One technique I’ve seen which seems to have a lot of traction is to serve an image that is double the dimensions (meaning 4 times as many pixels), but at a lower quality setting and scaled down for display in the browser. I had to try it out myself. Here’s what I found.
400×600 pixels, high-quality, 144kb
Low Quality, larger dimensions
800×1200, low-quality (20%), 151kb
If you’re viewing on a desktop computer (that doesn’t have a retina display), you really won’t be able to discern any difference between these two images. However, if you view this page on an iPad with retina display, the difference is VERY clear. The original image looks fuzzy, while the larger, scaled down version looks nice and crisp, and without much addition to file size.