Exploring Digital Images

Digital images are a web designer’s stock-in-trade. Yet, if the images repulse or annoy people — no matter how informative the content of the site — they’ll never give your web page the time of day. Thus, before jumping into your web design efforts, it’s helpful to familiarize yourself with some digital image basics.

Understanding Digital Image Color
If you were to stick a magnifying glass up to your computer monitor, you’d find the screen consists of hundreds of individual dots or units called pixels. These pixels remain in rows and columns, just like a table.

Computer monitors essentially have a palette that holds the following colors:

• A blob of red paint
• A blob of green paint
• A blob of blue paint

You can create other colors by mixing these colors together. Because red, green, and blue are a computer monitor’s primary colors, computer monitors work in RGB color space.

In your computer monitor, each primary color allows for 256 individual shades (ranging from 0 to 255).

Caution: Besides RGB, you may have heard of CMYK. CMYK is another color model, which stands for cyan (blue), magenta (red), yellow, and black. The differences between the two are that CMYK removes color from a white background, whereas RGB adds color to a black background.

So what does all this mean to you? Essentially, RGB works best with electronic display devices (for example, monitors), whereas CMYK works best with color printers. Thus, for our purposes, since we’re designing for the World Wide Web, we’ll use the RGB color model. This will ensure that what you see in Photoshop is what will display on a finished web page.

Digital Image Dimensions
The number of pixels contained in the width and height define the dimensions of an image.

For example, say you’ve got an image 25 pixels wide by 25 pixels high. Web designers typically express that image as having dimensions of 25x25.

As a web designer, you’ll always need to keep image dimension in mind. Your canvas (the computer monitor) contains fixed display dimensions ranging from 640x480 to 1280x1024. Most people keep their monitors at 800x600 or 1024x768. Figure below displays the Walt Disney web page on an 800x600 screen and on a 1024x768 screen.

Viewing the same web page at different monitor settings Courtesy of www.disney.com
The Disney web page was designed for best viewing on a 1024x768 monitor display. You can view the Disney web page on a 800x600 monitor display; however, the page requires vertical scrolling.

Tip I’d recommend designing your images for an 800x600 screen. This will ensure that those looking at your images won’t have to scroll to view your entire screen.

I wouldn’t worry about designing web pages for those using a 640x480 screen setting. Hardly anyone uses that large of a screen resolution anymore, and if they do, they’re probably used to using horizontal scroll bars.

A good rule of thumb is to not make any web image larger than 775 pixels wide. It’s OK to have users scroll vertically if needed, but avoid making images so large that users have to scroll horizontally. No one likes to do that.

When defining your image dimensions, not only will you want to account for the screen dimension, but you’ll also want to account for the web browser. For example, if you know you’re designing for an 800x600 screen (which is the norm), you’d also want to subtract some space for the browser.

Table below shows the dimensions you can use for your web pages and images depending on the monitor screen size.

In this tutorial:

1. The World of Web Design
2. Information Every Web Designer Should Know 
3. Exploring Digital Images
4. Types of 2D Graphics