Image size
Image
size can be interpreted in two ways:
Dimension of the image, measured in pixels.
File size, how many bytes the image requires.
These
two, dimension and file size, are of course closely related. A 10 x 10
pixel image will be smaller in file size than a 1000 x 1000 pixel image.
Important for the Internet is the file size (how many bytes have to be
transferred over the Internet). The smaller the amount of bytes to be
downloaded, the quicker the surfer will be served with the data. If a
visitor to your Website has to wait too long to view the page, he or she
probably will surf on. Mostly the Websurfers are not the most patient
people on the globe.
 |
 |
 |
|
3,48 K |
3,91
K 120 x 177 pixels low quality 2 seconds |
26,51
K 120 x 177 pixels high quality 8 seconds |
These
three images are give some indication of the relation between dimension
and the file size at the same quality setting (images one and three) and
maintaining the same dimension but with a different quality setting resulting
in a smaller file size (images two and three). The images use the JPEG
compression. The time in seconds give an indication of download times
when using a 28.8 K speed modem.
Quality versus size
The
designer always has to make a choice; what is more important (quality
or size) has to be judged in relation to the result required. Mostly one
can find the best solution somewhere in between. Highest quality is mostly
not needed, differences are not visible. When working on an image that
has to be placed on the Website, try to work in the following way.
Always
start with the best quality you can get. Then start to reduce the file
size (and maybe image size) to just below what you think is acceptable.
The final step is to increase quality to the just acceptable level, compared
with the best.
Image and browser
Finally
you have managed to bring the file size down to an accaptable level, it's
small and will be downloaded quickly. On the browser side the downloaded
image is not shown as a JPEG or GIF, but is de-compressed to screen display,
using the system's colour depth settings. The actual size can be calculated
by multiplying the total number of pixels in an image by the colour depth
setting of the system. For the right image above this gives actual (120
x 170) image pixels x 24 bits (colour depth for millions of colours) =
489600 bits. 489600 : 8 = 61200 bytes (1 byte = 8 bits) is the same as
61,2 Kbytes. In itself not dramatically much more than the compressed
file. However, the middle image produces exactly the same result, and
this is a bigger difference. Larger dimensions, (or when files are scaled
in the browser) can give real problems for the users system.
 |
||
 |
 |
 |
 |