Pixels and Online Training

  • The page you requested does not exist. A search for Resource OR Center OR ELearning OR Resources OR tabid OR 142 OR Blog OR Date OR 2007 OR 07 OR 31 OR Date OR Type OR month OR Default OR aspx resulted in this page.
  • The page you requested does not exist. A search for Resource OR Center OR ELearning OR Resources OR tabid OR 142 OR Blog OR Date OR 2007 OR 10 OR 31 OR Date OR Type OR month OR Default OR aspx resulted in this page.
  • The page you requested does not exist. A search for Resource OR Center OR ELearning OR Resources OR tabid OR 142 OR Blog OR Date OR 2007 OR 09 OR 30 OR Date OR Type OR month OR Default OR aspx resulted in this page.
  • The page you requested does not exist. A search for Resource OR Center OR ELearning OR Resources OR tabid OR 142 OR Blog OR Date OR 2008 OR 01 OR 31 OR Date OR Type OR month OR Default OR aspx resulted in this page.
  • The page you requested does not exist. A search for Resource OR Center OR ELearning OR Resources OR tabid OR 142 OR Blog OR Date OR 2008 OR 02 OR 29 OR Date OR Type OR month OR Default OR aspx resulted in this page.
  • The page you requested does not exist. A search for Resource OR Center OR ELearning OR Resources OR tabid OR 142 OR Blog OR Date OR 2007 OR 08 OR 31 OR Date OR Type OR month OR Default OR aspx resulted in this page.
  • The page you requested does not exist. A search for Resource OR Center OR ELearning OR Resources OR tabid OR 142 OR Blog OR Date OR 2007 OR 11 OR 30 OR Date OR Type OR month OR Default OR aspx resulted in this page.

Submitted by lwarren on Fri, 02/03/2012 - 16:38

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,00,0,0,01,1,0,10,0,1,0
1,1,0,00,0,0,11,0,1,00,1,0,1
1,1,1,00,0,1,11,0,1,10,1,0,0
1,1,1,10,1,1,11,0,0,10,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 depthCalculationColors
1-bit monitor212
2-bit monitor224
4-bit monitor2416
8-bit monitor28256
16-bit monitor21665,536
24-bit monitor22416.7 million

"True-color" or 24-bit depth in 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, the topic of Monday's post: Graphic File Size and Format. Stay tuned!