Learning objectives

When you have completed this session, you should be able to

• collect pictures from different "places",
• list the color depth values and file formats of an image,
• estimate the gain of size using lossy compression.

· Purchasing

Several companies are engaged in the business of producing, and selling images. One of the largest sources of vector-graphic images is the Corel Company’s clipart collection. In this collection they offer more than a million images to the users today.

· Scanning

Scanner is a device to digitalize texts and images. It is data input hardware. Images being on paper and texts can be input and transformed into computerized digital data with this device.

· Image Creation

Images can be created with the help of image editor programs. One of the most popular vector-graphic editor software is CorelDraw while one of the best pixel-graphic software is Photoshop program from the Adobe Company. Graphic designers can make miracles with these programs.

· Downloading from the Internet

The advantage of images downloaded from the Internet is that they seldom require supplementary work though it should not be forgotten that for any following publishing the permission of the owner is needed (which is also true in the case of any other type of sources downloaded from the Internet).

· Taking Pictures

Digital cameras extremely eased the storage and application of still (or motion) pictures because the created images can directly copied in the computer via the USB connection.

Storing Images

Color Depth, Memory Size, Size of Image Files

The data of images are stored in files on a disc . When the image is being displayed on the screen the image data are loaded into the memory with the help of an image editor program. The size of the file located on the hard disc may differ from the size of image loaded in the memory (in most cases they are different). The reason for this is the following:

When the image is being in the memory every image pixels have to be displayed. For this reason the color of each pixels must be known, all values of the pixels are needed. On the other hand, when the image is stored on the hard disk different data compressing techniques can be used since the image does not have to be shown. For instance when there are a hundred white pixels next to each other it is not necessary to save the data of the precise color for each in a file only the same data about one hundred following white pixels. This way the size can be drastically decreased. When the image is loaded from the disk in the memory the display software decompresses the data and creates a real image.

The Way Color Depth Gets in Focus

Let us look at how a 256 color image is stored. All pixels can have one of the 256 colors this way the value of a pixel is a number between 0 and 255. The representation of this number is done in one bite. So it can be said that one bite is necessary to store a pixel.

How is it done with true color images?

In this case all pixels can have some of the 16 777 216 kind of colors as a value. So, the value of each pixels is a number between 0 and 16 777 215. For representing such a large number one bite is not enough. Three bites are needed. Briefly, in this case three bites are required for storing one pixel.

From the above mentioned facts the following conclusion can be drawn. When we have two images with the same number of pixels but one of them is a 256 color image, the other one is a true color image the true color image takes three times more place in the memory (but not on the disk).

What is the situation with images having two colors? One bit is enough for storing a pixel because in this case a pixel can only have two values just like a bit. So this way a bite is enough to store 8 pixels.

Look at the different sizes of the following image with different color depths and compressions:

	24 bit color depth, average jpeg compression	8 bit color depth, gif compression
Picture size on the screen	945x716 pixel	945x716 pixel
Picture size in the memory	2 029 860 bite	676 620 bite
Picture size on the disc	115 110 bite	374 337 bite

File Formats, Compression Schemes and the Results

Every image is saved in compressed files on the Internet in order to have the smallest size possible. Basically there are two compression schemes:

• the lossy and
• the lossless .

When using lossy compression the quality of the image deteriorates but the compression ratio is higher. This way the size of the image data on the disk can be one tenth of the size taken in the memory.

When lossless compression is used the quality of the image is not spoiled (there is no loss of quality) but the compression is not so effective.

However there is a problem with the lossless compression: it can only be used with 256 color images. For this reason if we intend to compress a true color image with this scheme in fact we lose quality unless the image contains 256 colors or less.

Recently a new scheme has been developed for the lossless compression too. However earlier browser programs did not support it therefore it has not become so popular (though some people predict prosperous future for it).

Images made with lossy compression have jpeg format. Images created with lossless compression have gif format . True color images made with lossless compression have the file format png.

Each compression scheme has several ways of adjusting that influence the size and the quality of the compressed image.

Which Compression Scheme to Use?

On the Internet there are three wide-spread image formats: JPEG, GIF and PNG. Which one is to be used for a given situation?

Few standpoints:

JPEG format results the best compression ratio and perfectly useful for true color images especially when they contain many color shades. It is developed typically for compressing photo images. Besides the good compression ration it can not offer any extras (but this is enough advantage).

GIF images are made when large continuously colored areas are in the picture. Typically useful for compressing figures (e.g. diagrams). Storage in GIF format allows some parts of the image to be transparent. When using this possibility for GIF format; do not forget first to convert the image to a 256 color image.

The advantage of PNG images is the lossless compression in the case of true color images too. Furthermore the transparency of images can be controlled freely. Images can be created that continuously changes from being entirely transparent to fully covering. (According to my experiences this quality the browsers cannot really utilize.) PNG does not even come close to the ratio of JPG compression.

Lossless Compression Schemes

Lossless compression schemes operate with the method that equal parts in the data stream can be substituted by shorter symbols. These substitutions are listed in a chart at the beginning or the end of the file. For example if the numerical sequence of 0, 1, 2, 3, 4, is applied at several places in the file this can be substituted with the number 1. In the chart number one is listed as equal to numerical sequence of 0, 1, 2, 3, 4. The Huffmann coding is also based on this methodology.

Lossy Compression Schemes

JPEG is the widest-spread compression scheme in case of pictures. This method divides the picture into 8x8 pixel grids and for all grids the average color of the pixels is calculated. After doing so for each pixel only the difference from the average is stored. If the difference is small it will be zeroed. The goal is to zero the most numbers possible.

This method results the loss because obviously this way not the original color but a color nearby it is being stored. The larger difference allowed for the zeroing the greater the loss will be but at the same time the smaller the size of the file will be.

After zeroing most pixels a lossless compressing scheme is applied for the file.

Standpoints of Image Editing

Images are typically files that take some very large area in the memory and on the disc too. However data flow on the Internet is not exactly fast (especially when using a modem) therefore a very important criteria when creating a Web image its size measured in bites. Certainly, keep in mind the other very important standpoint; the aesthetics of the image. Shortly a web image should be small and nice.

The question which size of the picture should be small the size in the memory or the size taken on the disc shall arise. Due to the fact that the file must be transmitted on through the net the size of the file must be created as small as possible. When the file arrives at the computer (being downloaded) it is the task of the browser to unpack and display it. This happens very fast compared to the time of downloading.

When an image is being aesthetic is certainly a subjective matter but there are a few basic principles that should be kept in mind:

• possibly not every one watches our image on the same monitor which we used to create it and this effects the colors and the brightness,
• with a different resolution the image may appear smaller or larger than designed and this may be disturbing especially in the case of texts,
• if the image is scanned disturbing interferences may arise that can be eliminated if scanning is done with the highest resolution,
• if an images downloaded from the Internet is being edited the quality may worsen greatly,
• if jpeg compression is used do not use the image so much as the quality becomes inadequate.

What to Use Images for?

Since downloading images takes a long time consider well how many images you place on your site. Larger texts should be inserted as images too because this gives a more aesthetic result. These days almost in every web page there is some sort of menu with switches made of images. Moreover switches have more status (they look different when the mouse is above them and different when they are activated) which must be designed separately.

The backgrounds of web pages are also some kind of patterns. Usually they are small size images displayed by the browser as mosaic filling out the pattern of the screen this way. This is why the backgrounds of many web pages appear like wallpapers.

Search the Internet for websites where you can download images, photos of good quality maybe for free. Share the links you have found useful!

---

You can find detailed description about editing a picture in the book TC03 - Picture editing !

---

Reference Works:

[1] Tay Vaughan: Multimedia, Published by Osborne, Berkeley, California, USA, 1996.

[2] Csánky Lajos: Multimédia PC-s környezetben, LSI Oktatóközpont, Budapest, 2000.