If
java disabled or no main menu showing above - use links
below.
|
|
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.
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.
|
|
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!).
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
|
