Mathias Rosenthal - Fotolia
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.
Keeping one step ahead of mobile design challenges
Designing mobile apps
Determining mobile app design priorities
Dig Deeper on Topics Archive
Related Q&A from Matthew David
Many enterprises still rely heavily on consumer-grade mobile applications, but making your own may not be as complex as you think. Here are three ... Continue Reading
There are several platforms available for creating apps for improving the driving experience. Expert Matthew David discusses why it may be easier ... Continue Reading
As the mobile industry is maturing, so is the way apps are being designed. Learn about the latest tools and software updates to help support and ... Continue Reading