Wednesday, September 4, 2013

Web Images and Resolution Limitations

Web publishing of images can serve as an example for the many challenges of working with images with limited resolution. One of the most extreme instances is with favicon images. These are the small "Favorite Icons" that can be customized for your site, and that web browser programs use in different ways for displaying your content.

This small icon (the small "K" seen above) is only 16 x 16 pixels in size. From a distance it seems clear enough, though once zoomed in for a closer look it is interesting to see how something that is readable from a distance can be so odd and almost unrecognizable up close.

For web publishing, the standard for image resolution typically has been described as 72 pixels per inch (PPI). At this scale and size, these pixels are rather large though our eyes tend to blend them together in ways that seems to add clarity. By comparison, for print production, most print shops require a minimum resolution of 300 PPI for grayscale and color images (photographic type images), and for line art images (such as high contrast one color images without gradients of tones; without grays), much higher resolutions are needed. So in comparison, it would be accurate to describe web images as low resolution, and as such, as images of lesser quality for detail.
     The reason for this can be explained by considering the devices being used for displaying web content. Computer monitors are limited by the mechanics of the actual screens, and the number of screen pixels that can be packed together as individual spots of red, green, and blue lights. (Image pixels being the square shaped spots in the digital image, as seen with the "K" above, and screen pixels being the physical pixels within the device's screen.) Computer monitors typically limit image resolutions to about 72-96 pixels per inch. (The photo below was taken of the surface of my LCD monitor.)

With the advent of smart phones and tablets, and more specifically their screens, the density of screen pixels has greatly increased. Screen pixels are now available at densities of 200 to 300 plus per inch. (The photo below was taken of my tablet's display, which I believe has a count of 216 PPI.) Even though this advancement with screen capability kind of makes the "per inch" distinction rather obsolete, it is still fair to say that web content and images is limited for resolution. Though the density of the screen pixels has increase, keep in mind that the overall size of these displays are considerably smaller than that of a monitor. Even with a large tablet, the total number of pixels that is available (left to right; top to bottom) is limited and all content needs to be able to fit within the overall screen dimension.

Though this post as been primarily about using images to describe resolution limitations with web content, it is worth noting that this also relates to typography and fonts used for web content. As seen in the examples above, when viewed up close letters and words are really rather nondescript and rather lacking in detail. In web publishing the general recommendation is that sanserif and simple looking fonts be used for main text, and that ornate fonts be reserved for instances where their size can be greatly increased, such as for titles, headings, etc. (There are of course many other considerations for web typography; for now just focusing on how this relates to pointing out the limitations of devices for showing detail.)
For web images, it is good to remember to treat them all as low resolution versions of their originals (be it from scans, cameras, etc.) and to maintain a separate collection of the originals with their full resolutions. These too would be the ones to use in the event that images are needed for print production where much higher resolutions are needed.  

No comments:

Post a Comment