Mathias Rosenthal - Fotolia

How do I create Retina display images for mobile devices?

Developers want clever images that don't take long to download. Expert Matthew David reveals the secrets of making it work.

Apple started the craze: screen resolution so good that the human eye cannot tell the difference between print and digital. Apple calls it Retina display images. The rest of the world knows it as pixels per inch (PPI).

As a frame of reference, print is anywhere between 300 to 600 PPI. Most leading mobile devices are around 300 PPI. The problem is this: Many PCs are still around 120 PPI. For the Web, the difference between 120 PPI and 300 PPI for images can mean the difference between a small 50KB image downloading fast to massive multi-megabyte images that take time to download over slower connections.

The good news is that there are ways to get around this thorny problem. The first decision you need to make is whether to use a bitmap image (an image created pixel by pixel) or a vector image (an image created by lines mathematically formed). Both have disadvantages and advantages.

Let's start with vector images. The advantage vector images have over bitmap is that the image can scale elegantly to any size resolution and not become pixelated. The disadvantage is that you cannot have photo realistic images. But you can get close.

Vector images are created natively in Adobe's Illustrator program. Company logos, cartoon drawings and line art can all be drawn in vector. All leading browsers now support native vector presentation through the use of Scalable Vector Graphics (SVGs), a file format. Here is the good news: Illustrator and most leading line-drawing tools support SVG as an export.

Bitmap images get a little more complicated. There are many different formats for a bitmap that include JPEG, PNG and GIF. For Retina display images, you will want to stay away from GIF because the resolution for GIF images is very low. Frankly, I am amazed they are still popular.

JPEG and PNG are the two formats you will want to use for Retina display images. Many digital cameras take their photos in either JPEG or PNG at 8 to 20MB resolution. An 8MB image will look great when printed on poster-sized paper. For the Web, you need two types of image: hi and low res. Photoshop and other photo editing tools will let you export images in different resolution types.

Web content management tools, such as WordPress, now support presenting different resolution images to different browsers. Take advantage of this service. Give the iPhone an amazing image and your PC a fast-loading Web page.

At the end of the day, you have many choices. It is not a case of SVG versus JPEG or PNG; it's more a case of SVG or JPEG or PNG to deliver delightful, quality Retina display images.

Next Steps

Keeping one step ahead of mobile design challenges

Designing mobile apps

Determining mobile app design priorities

Dig Deeper on Topics Archive