Image Matters Logo
The Essence of

Image Anatomy


If java disabled or no main menu showing above - use links below.
Image Introduction
Image Basics
JPG ''Lossiness''
Picture ''Anatomy"
Color Models
Colors - More Facts
Image Tools
Image "Tweaks"
Animated Images
Resolution and DPI
Printing after
Digital Cameras
Binary and Hexadecimal
with Color
Picture Taking
Image ''Burden''
Image edits
Posting Pictures
Posting Attachments
Posting with
"Hot Links"
Photo Facts
Photo Facts - Diagrams

The ''anatomy'' of a digital image-

This is another look at how a digital image is constructed, because there often seems a lot of confusion about an image's various size characteristics.

We have three aspects, the physical size which is the size that will print out from your printer (x inches by y inches)- the pixel size, which determines the apparent size displayed on a monitor, and finally the size of the image as a digital file.

To remind you, a digital image is made up of many building blocks called pixels - individual squares of color. Rather like the color phosphor dots on your TV screen, once there are enough at a high density then the eye interprets the whole collection as a color picture. This means of course each pixel must be small.

Let us start here by looking in real close at a very small part of an image -

The Close Up Inspection-

This first picture shows a 6 x 10 pixel very small portion of an image as if we have zoomed in very close, with a figure ''2'' and figure ''1'' - the grid lines are there just for emphasis of the ''cell' structure. Stand back or squint your eyes and it will appear more normal.

Each single pixel has three color attributes, one for Red, one for Green and one for Blue. Each attribute has 255 levels of value which in binary is from 00000000 bits to 11111111 bits, or 00 to FF in hexadecimal (see page on binary and hex for more details).

The eight bit unit is called a Byte. For the most part we are dealing with 24 bit color - three sets of eight bits per pixel or three bytes. All values at zero when mixed will give black - all values at 255 (FF hex) will give white. If you consider the permutations of colors available you'll see that 255 x 255 x 255 is nominally 16 million - the reason we talk often of ''16 million color'' options on your computer. See color models and colors for more details on what happens when you mix values.

A Close-in look

This 10 x 6 grid gives 60 pixels - so if each has three values to cover Red, Green and Blue - then total bytes required to record color values is 180.

Let's zoom out a bit -

Now the above small section has been placed within a 72 x 72 pixel square - so at 72 pixels per inch resolution, this would print out as one inch from a printer.

There are some fact figures mentioned - and we see that 72 x 72 = 5,184 pixels, which each again carry three color byte attributes so - the file size will be a theoretically 5,184 x 3 = 15,552 bytes (15.5k bytes), uncompressed.

Zoom back for one inch

Finally, a 4" x 6" physical size image -

Let us now zoom back even more, to see our original small sample with the ''21'' in place, per the above picture, placed within a whole image (top left square)- one which with 72 PPI (pixels per inch) resolution prints to a true 4" x 6" size. This is shown larger than actual to aid clarity.

If we now total up all the pixels we have 288 vertically times 432 horizontally, giving a total of 124,416 pixels. We again apply the three bytes per pixel for 24 bit (16 million) colors we find the final total bytes required is 373,248 or 373.2k bytes.

We could say too, as that original 1" square was 5,184 pixels then for 4 x 6 = 24 square inches, we have 5,184 x 24 total pixels. No surprise, that is 124,416!

Consolidate what we know -

At 72 pixels per inch we now know our full demo' image will print to 4" x 6" (remember, demo pic's are actually larger than actual). However this has little relevence to screen display on the web. We do though know also that at this size and resolution - 288 x 432 pixels, will be how it will display on our screens. Here is a real example below, with a small 6 x 10 pixel region blown up 16x to show pixels, all 60 of them!.

Print this and it'll be 4" x 6" but on screen here it is displaying at the pixel size of 288 x 432. Do try and see this difference between screen display size and print actual size. If a camera or scanner has higher resolution than 72 - say 150 PPI for example, then though the selection of screen display size will follow the easy rules, the actual size printed will seem smaller (more pixels per inch, so fewer inches printed!).

Actual 4' x 6' at 72 ppi

Finally - file size. I continually try to encourage folks to firstly, not post pictures too large in pixels, 640 x 480 is often well adequate - but then how about this ''compression thing''!? The basic bitmap (max filesize) image has a size as we have discussed with its pixel count times 3 in bytes.

Fortunately we can ''compress'' with the JPG algorithm and so, if we look at this picture here it is, as we might expect from examples above, a bitmap of some 370k bytes. By compressing this with a 10:1 ratio I have finished up with a final size as displayed of 34k on the server. Some people may not have a ratio method of compression so - try different qualities or percentages to achieve this sort of reduction in file size.

Finally - remember that JPG compression is a compromize and so too much compression can degrade an image - as during expansion for display some losses can be excessive. For the average picture tho a filesize reduction of up to 20 times will not severely prejudice perceived quality. Check this page for some examples of moderate and excessive compression.

This page does repeat some aspects already discussed but is just another way of trying to explain the structure of a digital image.

Back to Top

©AlumBankWeb 2004 - 2012