The pixel is a concept you need to understand in order to comprehend computer monitor resolution and color depth. Both factors influence the way your online courses appear. If you don’t consider pixels as they apply to monitor resolution and color depth, you may make some unintended mistakes.
Estimated reading time: 5 minutes
Computer Monitor Resolution
Computer monitor resolution is measured in units called pixels – short for picture element. Monitor resolution is the number of pixels displayed in a specific area.
If possible, you want to find out what computer monitor resolution your target audience is using. For example, you might design a course to be displayed on a 1024 x 768 monitor.
This is a screen capture of an online lesson at a monitor resolution of 1024 x 768 pixels.
If a user is viewing a lesson designed for a 1024 x 768 monitor, but has a maximum resolution of 800 x 600 pixels, part of the screen will not be visible without scrolling.
This is the same lesson at a screen resolution of 800 x 600 pixels. You must scroll vertically and horizontally to see the entire graphic.
As these two screen captures demonstrate, it’s important to know your target audience’s screen resolution (pixel count) because it is hard to understand graphics when you only see a portion of them.
Users can adjust their monitor resolution and each monitor has a maximum setting. When you increase screen resolution, you increase the number of pixels displayed on your screen. Each pixel gets smaller in size. The trend in monitor design is greater resolution (or more pixels), resulting in the ability to display greater detail.
Today many people design for a screen resolution of 1024 x 768 pixels. However, older monitors may not go beyond 800 x 600 pixels. On the other hand, high-end users may have 1280 x 1024 monitors. This variability in monitor resolution is one of the challenges in designing web-based training. A large part of your success is tied to knowing your audience members and the technology they use.
Pixel Depth
Measuring screen resolution is one important way pixels are referenced. Color depth is another. Understanding pixel depth (color depth) is important for understanding the amount of color information a monitor can display. A bit is the computer’s smallest unit of information. A bit can be either off or on (value of 0 or 1).
Early computer monitors were 1-bit monitors, meaning each pixel (individual unit in a monitor) could interpret only one bit of information at a time. A pixel could be off or on – black or white.
Pixel state equivalent values: 0 / off / black
Pixel state equivalent values: 1 / on / white
As monitors advanced to the next higher level of sophisitication, it became possible for pixels on 2-bit monitors to interpret two bits of information simultaneously. That made it possible for one pixel to be in any of four different states.
| Both bits on: | 1,1 |
| Both bits off: | 0,0 |
| First bit on, second bit off: | 1,0 |
| First bit off, second bit on: | 0,1 |
The next higher level monitor was 4-bit. Each pixel could hold four bits of information at one time, meaning it could have 16 different states.
| 1,0,0,0 | 0,0,0,0 | 1,1,0,1 | 0,0,1,0 |
| 1,1,0,0 | 0,0,0,1 | 1,0,1,0 | 0,1,0,1 |
| 1,1,1,0 | 0,0,1,1 | 1,0,1,1 | 0,1,0,0 |
| 1,1,1,1 | 0,1,1,1 | 1,0,0,1 | 0,1,1,0 |
Pixel depth can be calculated by raising 2 (number of states) to the number of bits a pixel can hold at one time.
| Monitor bit depth | Calculation | Colors |
|---|---|---|
| 1-bit monitor | 21 | 2 |
| 2-bit monitor | 22 | 4 |
| 4-bit monitor | 24 | 16 |
| 8-bit monitor | 28 | 256 |
| 16-bit monitor | 216 | 65,536 |
| 24-bit monitor | 224 | 16.7 million |
“True-color” or 24-bit depth is achieved when a monitor displays millions of colors. True-color monitors allocate 24 bits to each pixel – 8 bits for red, 8 bits for green, and 8 bits for blue. Red, green, and blue are the three colors in the additive color model used by all monitors.
Wrap up
The reason I care about monitor color depth is because the amount of color information I can convey in an image is determined by the monitor’s color depth. Fortunately, learners in my target audience (and probably your audience too) have monitors that can display millions of colors. Pixel depth is a greater factor when I use color in web graphics. For more information on graphic file size, read Web-Ready Images: Graphic File Size and Format.
Related Posts:
Looking for more information on web-based training? Linda has developed a series on converting instructor-led training to web-based training called Great Voyages. The slide decks from all five presentations are available for download.
Contact our Learning Developers
Need to discuss developing e-learning? Creating curriculum for classroom training? Auditing and remediating e-learning for accessibility? Our learning developers would be glad to help.