Photoshop and other graphics tools can offer an intimidating range of image settings, ready to suit any circumstance; but choose the wrong ones and your images will display poorly when viewed online. It is not that these tools are “bad,” it’s just that Photoshop in particular is configured by default for photo printing — a task with a very different set of requirements than those for optimized online display.
The following is a brief look at three of the most important settings for prepping web-ready images for online display: resolution, color mode and color profile:
Of course, variances in user monitor configurations and eyesight quality all come into play when dealing with color settings.
Resolution. A measure of how large or “sharp” an image is, based upon its component density (typically expressed as a value in dots or pixels per inch or centimeter); optimum image resolution is dependent upon the application. For example, images destined for print may start at 300dpi and go up from there. Online display, however, doesn’t require such large images, due to the limited resolution of monitors and other graphical display devices — while “dpi” only applies to the print, not digital, realm — where pixels per inch is the appropriate measure.
Designers commonly recommend sticking to “standard” 72ppi or 96ppi images for web work, but these values have no bearing on online display when the image size in pixels remains the same — despite the misconception that 96ppi images appear visibly “sharper” onscreen than their 72ppi brethren. In other words, a 300x400 pixel image will appear identical online, quality-wise, whether it is rendered at 72 or at 96 pixels per inch.
Try it yourself and see.
Although some folks suggest that web pages that are printed out will feature sharper images when those images are created at a higher resolution (with some websites running 120–180ppi images online), the premise has been vigorously decried and debated.
Wikipedia offers an intriguing tale of the genesis of 72 and 96 as numeric standards that’s worth reading; while scantips.com/no72dpi.html offers more on this topic than you ever wanted to know. Regardless of the reality or perception, this author “feels better” sticking to 96ppi images for typical online display uses (unless end-viewer printing is desirable).
Color mode. Whereas selecting the appropriate resolution for web-ready images may be confusing (and even unnecessary), choosing the color mode is straightforward and very necessary — with several common choices including the Grayscale, RGB and CMYK color modes.
Here, even if you’re dealing in black-and-white imagery, the richness of RGB may be a better choice than smaller file-sized grayscale, and opens the door to color watermarks. This leaves the former’s red, green and blue color mode, which is tailored for onscreen viewing, as a superior choice — at least if TVs, computer monitors and mobile devices are intended to be the primary viewing platforms — to the print-optimized CMYK (cyan, magenta, yellow and black) color mode; with its richer hues and deeper tones.
Color profile. This is a tricky one in that a mismatched color profile has likely frustrated the efforts of more Photoshop users than any other setting; whether those users even knew it or not.
Have you ever used Photoshop’s “Save for Web” command, only to notice that the resulting “optimized” image appeared de-saturated or otherwise lackluster in comparison to the colorful glory of your original PSD file? “Eyedropper” tests confirm a color shift when there shouldn’t have been one, such as with lossless PNG files, but you can’t figure out why it’s happening?
Let me tell you.
Photoshop allows users to employ a range of color profiles, including those tailored to the working RGB space such as a custom profile matched to a specific monitor or printer, or standard color profiles such as Adobe RGB, Apple RGB, sRGB and other variants.
The default Adobe RGB color space renders roughly 50 percent of visible colors in order to produce vivid prints. Computer monitors and other “on screen” displays are only capable of limited color and resolution by comparison, and so use the sRGB standard that displays approximately 35 percent of visible colors. Thus, when you “Save to Web” with a default Photoshop setup, the software dumps a big chunk of those colors you worked so diligently to select.
I chose “North America Web/Internet” as a preset from Photoshop’s “Color Settings” dialog to use sRGB throughout my photo editing and “Save for Web” process, helping to ensure that what my site’s visitors see is what I wanted them to see. It’s vital to sync your software to the color space, so I clicked View > Proof Setup and selected “Monitor RGB” from the dropdown box. I also selected View > Proof Colors, to match what I saw on my Photoshop screen with what I saw in my browser window.
Of course, variances in user monitor configurations and eyesight quality all come into play when dealing with color settings, but at least specifying sRGB when doing the final output to web will dramatically boost cross-platform color consistency.
While there is more to the process, such as proper monitor calibration, these settings are the foundation of proper web imagery and will help you get started on the right foot.