Image Modes: Bitmaps a la Mode

[DTP Articles]
[Vector Articles]
[Bitmap Articles]
[Web Articles]
[3D Articles]

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Adobe-Macromedia]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Illustrator_Plug-ins]
[RGB to CMYK]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[BMP/TIFF/JPEG/GIF]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Tom Arah explores the different types of bitmap through Photoshop’s different image modes.

What is a bitmap? For most people it’s not an issue. Like most car drivers they aren’t interested in how the engine works, they are interested in getting from A to B. For the majority of computer users, especially digital camera owners, the answer is clear: bitmaps are how the computer handles photographs. However for those who are serious about graphics and design it’s well worth taking a closer look to see just what a bitmap is and what it does. Or rather to explore the many different types of bitmap and what they can be used for.

Each Photoshop Image mode represents a different type of bitmap.

It’s a journey with a number of surprises along the way. To begin with, while handling high-resolution colour photographs is the main function of bitmaps nowadays, their origin was very different. Back in the pioneering first days of computing, high-resolution was a dream and the handling of basic colour, let alone continuous-tone full- colour photographs, completely out of the question. In fact the first bitmaps weren’t designed for handling graphics at all – they were designed for handling text!

The core problem that needed to be addressed was how to convert computer data into characters and numbers on the first computer screens. The solution couldn’t be simpler. The CRT screen is coated with phosphor that emits light when hit by an electron beam with the smallest addressable unit of this display called a “pixel” (a contraction of “picture element”). These pixels are arranged in a rectangular grid so, by breaking this down into smaller rectangular grids of say 8 x 8, the basic shape of any onscreen character can be built up as a pattern of dots simply by switching each of the 64 pixels on or off. The two on/off pixel states can each be handled by a single 0/1 data bit and these bits are arranged in a simple addressable grid map. Put the two together and you have your “bitmap”, a simple matrix of on/off values.

1-bit Monochrome

These original 1-bit bitmaps were devised for handling low resolution screen fonts, but the simplicity of the grid-based architecture is easily extensible to handle any number of rows and columns of pixels. With more pixels and more resolution, customizable bitmap files could be used to describe an on/off pattern for the screen as a whole so moving beyond text to produce monochromatic graphic images. In fact there was no reason that the resolution of the bitmap needed to be tied to that of the screen at all. Crucially, by breaking this link, high resolution bitmaps could be used to control the output to printers in the same way that they controlled the output to screen, both via more detailed bitmapped print fonts and via high quality bitmap graphic files.  

These days printed type is no longer restricted to set sizes of pre-built bitmapped fonts but instead handled as scalable outlines that are “ rasterized ”, that is converted to bitmaps, on the fly. However 1-bit bitmaps still play an underappreciated but crucial role as a graphics format in professional design. When it comes to print their major limitation, that the images they describe are monochromatic, becomes their major strength. With no need for halftoning to reproduce the effect of colour (see RW79), the image can be printed at maximum resolution with each image pixel, ie each bit, controlling one output device dot. This makes the 1-bit bitmap format ideal for capturing the pin-sharp detail in black and white drawings and line art generally so long as it is output to a single colour separated plate – usually black or a spot colour.

True 1-bit bitmaps were originally designed for handling type onscreen.

To make the most of 1-bit bitmaps then you need as high resolution as the output device can provide natively - ie without halftoning - though there’s little point going beyond 1000dpi size-for-size even for typeset output due to the limitations of the human eye. By comparison when scanning for colour or grayscale output that does involve halftoning during print there’s no point going beyond around 300dpi, which means that it’s really only for 1-bit bitmaps (and resizing) that you need a scanner capable of more than 300dpi.

However when scanning line art it’s usually better not to use the scanner’s 1-bit mode but rather to scan in grayscale. That way you can use Photoshop’s (or any other bitmap editor’s) Threshold adjustment to take absolute control of where the dividing line is made between those pixels set to On and those pixels set to Off. When you’re happy with where the line is drawn, you can use Photoshop’s Image>Mode>Bitmap… command with the default “50% Threshold” Method to convert your adjusted grayscale to a true 1-bit bitmap. The best format to then save the results to is LZW-compressed TIFF which produces extremely small file sizes – smaller even than the colour-optimized JPEG format – which explains two other important uses for monochromatic 1-bit bitmaps: archiving and faxing.

8-bit Grayscale

High resolution 1-bit bitmaps still have a lot to offer for handling solid line art, but for a graphic format handling tone and shade is crucial. This is relatively straightforward to manage onscreen as, by varying the intensity of the electron beam, the brightness of each screen pixel can be controlled. All that is needed therefore is a way to adapt the bitmap so that each point on the grid can store more than two values. The answer is to increase the bitmap’s “Bit Depth”. Each extra bit doubles the number of possible values so that storing  two bits at each location enables four values/brightness levels to be specified, three bits eight levels and so on.

Grayscale bitmaps enable continuous tone images.

Crucially by storing eight bits - a single byte of information per pixel - 256 values and so levels of brightness can be specified which is more than enough to fool the eye into seeing apparently continuous tones of a single colour. With early white phosphor based monochrome screens this enabled smooth gray shading between white and black to enable the display of continuous-tone “Grayscale” photos (commonly called “black and white” just to confuse things), while halftoning enabled these 256 gray levels to be simulated in print. Handling continuous-tone photographs like this is essential for huge areas of the publishing industry (think newspaper photos and two- colour print) and the necessary 8-bit bitmaps are easily created with Photoshop’s Image>Mode>Grayscale command with the resulting image most commonly saved to TIFF format.

8-bit Indexed Colour

Grayscale bitmap images are great for storing tonal information, but of course what designers and artists need to handle above all else is colour. Again the system for simulating colour onscreen was well-known involving combining red, green and blue ( RGB) phosphors at every screen pixel. By varying the RGB brightness levels for each pixel a huge gamut of different colours from right across the spectrum can be produced. What is then needed is a way for the values at each location in the bitmap to specify a particular colour. The solution is a “ Colour Table” an embedded Look-Up Table in which all possible pixel values are mapped to “Indexed” colours each specified as RGB values.

This means that, while an 8-bit Grayscale bitmap can specify 256 brightness levels for a single colour, an 8-bit Indexed bitmap can specify up to 256 colours from across the spectrum. For the computer-based designer this move into the rainbow world of 8-bit colour was a huge leap forward. Nowadays of course full colour is the norm but the 8-bit Indexed bitmap still has an essential role to play when it comes to the Web. Here the restriction to 256 colours or fewer enables optimized compression to the browser-native GIF format and so efficient web-based transfer.

Restricted palette GIFs are crucial for web work.

With computer-generated images made up of less than 256 flat colours you can simply save directly to GIF format. Where there are more than 256 original colours the major decision to make is just which colours to keep. Converting a full- colour image with Photoshop’s Image>Mode>Indexed command shows the main options available. Using the Palette dropdown you can choose between three main fixed presets based on the default system palettes for the PC and Mac and the subset of 216 Web-safe colours that they both share. Nowadays most screens are capable of full colour display so you can choose to generate a custom palette of any 256 colours (or fewer) based “Adaptively” on the actual colours in the current image or “Perceptually” based on those the human eye is most sensitive to. You can also choose three types of Dither pattern to simulate those colours that have had to be dropped.

24-bit RGB Colour

The results possible with Indexed bitmaps can be surprisingly photorealistic at first sight but clearly the holy grail for colour is to support continuous tones across the spectrum to enable the handling of true full- colour photographs. The answer once again is to increase the Bit Depth. Crucially by storing three bytes of data rather than one, ie 24 bits rather than 8, for each image pixel the number of different colours that can be specified rises to 16.8 million! That is more than enough to fool the eye into seeing continuous tones of full colour.

Just as significantly the advent of 24-bit bitmaps means that the need for an embedded Colour Table disappears as the necessary RGB brightness levels can be stored directly. Crucially this is done by dividing the 24-bits into three separate 8-bit “channels” for each of the Red, Green and Blue colour components. These channels can be thought of as multiple overlays on the bitmap grid or as colour separated printing plates each of which can be viewed separately using Photoshop’s Channels palette. Each of these 8-bit channels can specify 256 different brightness levels and by varying the combination of 256 levels of Red, Green and Blue the full range of 16.8 million colours is possible (256x256x256).

Full- colour bitmaps are built up from multiple grayscale image channels.

With the spread of 24-bit RGB handling, screen, scanner/camera and bitmap technology came together in a natural partnership providing the default image mode for all today’s photo-editing applications (and the fact that colour inkjets are effectively treated as RGB devices helps close the circle). It also provides the natural image medium for digital photography especially when based on the RGB-only JPEG format that uses advanced compression technology optimized for the way that the human eye perceives colour. There’s no doubt that 24-bit RGB is today’s most common and important bitmap format though, as we’ve seen, that doesn’t mean that the earlier 1-bit and 8-bit formats are superceded.

16-bit Grayscale / 48-bit RGB Colour

Nor for that matter does it mean that 24-bit RGB is the last word in colour handling. To begin with, these days scanners and high-end digital cameras are capable of discriminating more than 256 levels of Red, Green and Blue. By moving to 16-bits per channel (another option accessible from Photoshop’s Image>Mode menu) each channel (or a standalone 16-bit Grayscale bitmap) can specify over 65,000 brightness levels. That means that a 48-bit RGB image (with six bytes of information at each bitmap grid location) can contain up to 281,474,976,710,656 separate colours! Of course no output device can produce 281 trillion distinct colours, nor the eye discriminate between them (nor 16.8 million for that matter), but the extra colour information is still very useful for ensuring maximum quality when processing by avoiding undesirable histogram spikes.

More possible colour is one thing but most designers would happily swap that for more reliable and accurate colour. Here the RGB model is fundamentally flawed as it is Device-Dependent. Essentially this means that a given colour say (R106, G011, B250) can look completely different on two different monitors or even on the same monitor with different contrast and brightness settings. However the beauty of the bitmap architecture is that you can store any data in the pixel-based grid - it isn’t tied to a particular colour model. You could just as easily store each colour value as a combination of Hue, Saturation and Brightness levels for example though this would also be device-dependent.

Instead Photoshop offers its Image>Mode>Lab Color command which again uses three channels: “L” for luminance or brightness, and “a” and “b” chromatic channels which define their inputs on a spectrum from green to red and from blue to yellow. The strength of Lab colour is that it is based on how the eye actually perceives colour rather than how a particular device produces it. You can then save the results to the ever-adaptable TIFF format but application support for Lab bitmaps is limited. Instead the format is primarily used as an intermediary in colour-managed workflows where you need to translate between two colour spaces - say the RGB values as produced by a particular scanner and the RGB handling of the monitor.

32-bit CMYK Print

By far the most important colour space that the professional designer needs to cater for is colour-separated commercial print. Print works on an entirely different colour model based on controlling the reflection of light based on the mixing of “subtractive” CMYK inks (Cyan, Magenta, Yellow and blacK) compared to RGB ’s “additive” system based on the mixing of Red, Green and Blue light. However, by using Lab as a fixed reference and with each colour space profiled accordingly, each pixel’s colour value can be mapped to its nearest, or at least most desirable, counterpart (see RW103).

32-bit CMYK bitmaps enable reliable colour-separated commercial print.

That’s what happens whenever you take a full- colour RGB image and convert it to CMYK using Photoshop’s Image>Mode>CMYK command. The result is a 32-bit CMYK bitmap that can again be saved to TIFF format for use in high-end DTP applications. Each bitmap is built up of four 8-bit Cyan, Magenta, Yellow and Black channels each of which can specify 256 brightness levels. Despite the 32-bits of data however CMYK bitmaps don’t offer the wider range of colours that you might expect, primarily because the black plate is used to enable pin-sharp non- halftoned solid text and so doesn’t extend the gamut. In fact due to the vagaries of the printing press the CMYK gamut is actually considerably smaller than that offered by RGB which is why you’ll often see colour shifts and a deadening of colour when converting. What 32-bit CMYK bitmaps do offer though is absolutely essential – a way for designers to reliably control and output full- colour continuous-tone bitmaps for commercial separated print.

MultiChannel Press Bitmaps

Four- colour CMYK print is the staple of the full- colour publishing industry but it’s not the only route. When budgets are tight, or you’re looking for a particular effect, excellent work can be produced with two and three inks. Here, starting with a grayscale original, it’s Photoshop’s Image>Mode>Duotone command that comes into play. This lets you split the image’s tone map across two, three or four spot colour inks as “Duotones”, “ Tritones” and “ Quadtones” respectively so adding colour and depth to your photos. In fact these images are slightly different to the other colour modes described above as they aren’t handled directly by separate channels that are stored in the bitmap itself (this enables greater editability). Instead the separate channels are created during output as a PostScript-based transfer function which is why you need to save to Photoshop’s EPS or PDF file formats for use in publishing workflows.

Photoshop’s Duotone and Multichannel mode enable print effects based on spot colour.

However you can save any combination of separate process and spot colour channels as a bitmap by using Photoshop’s Image>Mode> Multichannel command. Apply this to a Duotone image for example and the current component spot colour channels appear as 8-bit grayscales in the Channels palette. You can also add your own spot colour channels based on a current selection using the Channels palette’s New Spot Channel command and then specifying a library-based colour and its Solidity. Again the results must be saved to Photoshop PSD or EPS formats with PDF support presumably on the way.

With Photoshop’s multichannel mode supporting high resolution full- colour-plus images built up of up to 56 16-bit channels we’ve come a long way from those original monochrome single channel 1-bit screen fonts. In each case though, whether the colour of each pixel is determined by 1-bit, 8-bits, 16-bits, 24-bits, 32-bits, 48-bits or more, the fundamental architecture of the data-based bitmap grid remains the same. The underlying bitmap engine is constant, but what you can do with the different implementations varies widely from handling detailed line art and efficient web graphics through full- colour photographic work to colour-separated print and advanced press-based effects. To really understand what a bitmap is you have to understand them all.

Tom Arah

March 2005


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.