Media elements

Types of images

Aims of learning Learning objectives


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

  • make differences between the main two types of images,
  • calculate the various sizes of an image.

Types of ImagesVektor-graphic Image

The computer stores images in the form of numbers that describes the image data in some method. Basically, there are two ways of doing this. According to this images can be classified by two big groups as follows:

  • Vector-graphic and
  • Pixel-graphic images.

Vector-graphic Images

Vector-graphic images (shortly vector images) contain elements that can be well described by mathematic formulas. Lines, rectangles (especially the square) ellipses (especially the circle), Bezier-graphs, texts etc. belong here. In the case of these images the only stored information is where the given elements must be located in the picture, what color and what kind of contour line they have, etc. The computer creates the image according to these pieces of information. Mainly those pictures created this way that contains geometrical formations, texts, drawings. In the case of drawing cartoon like figures are considered here.

Pixel-graphic Images

Pixel-graphic images (pixel images) made of dots located in a bitmap (a grid) as the picture itself which appears on the screen. In the case of these types of images the color of each pixel must be stored. In the case of a 500x300 pixel image this means the color of 150 000 pixels must be stored!

Pixel-graphic Image

A pixel-graphic image is basically a huge grid. When the image is constructed the color of each dot (pixel) being in the grid is determined.

Another name of these images is bitmap images due to the fact that the image is similar to a huge map. (The name bitmap precisely only applicable for two color pictures but today the usage is expanded.)

As a result of the two different ways of data storage vector-graphic images take less area in the memory (and on the hard disc) however for color shaded images only pixel-graphic technology is suitable.

Summary:

There are two types of computer images:

  • Vector-graphic and
  • Pixel-graphic images.

The data of vector-graphic images are stored in the form of mathematic formulas while for pixel-graphic images the data of each pixel color must be stored.

Vector-graphic images need less memory space and mainly used for creating figures contrary to pixel-graphic images used for creating photo quality pictures .

Pixel Image

It can be a question: which kind of image to be applied vector-graphic or pixel-graphic?

For answering to the question let’s quote a sentence from the end of the chapter, Creating Web-Graphics from Deke McClelland (the author of Photoshop 5 Bible):

„I close the introduction with a basic statement, bitmap graphics reign the Web."

Summary:

Images can be purchased, scanned, created by picture editor software, taken as a picture or downloaded from the Internet. In every case copyrights must be taken into consideration!

Measurements and Sizes

In the field of defining the size of an image there is a great inconvenience among those that are involved in image editing only at a hobby level. At least four sizes of an image are taken into consideration:

· the image size taken on the disc,

· the image size taken in the memory,

· the image size on the screen,

· the image size when printed.

Most images are created to print at the end. For this reason image editor software show in default mode the sizes of printed images using measurements in inch (1 inch = 2.54 cm).In most cases it has very little to do with the size observed on the screen. It may occur that a full screen image has only the size of a stamp when printed.

The size of an image appearing on the screen is determined by how many pixels wide and high it is. This is the size of the image measured in pixels.

The Size of Printed Images

The size of printed images is determined by two things:

  • the size of the image measured in pixels,
  • the typographic resolution of the image (referred as resolution here from now on).

In order to understand the resolution of the image the principles of image making process with printers must be known. Printers create the images from tiny dots. In the case of printers the information of how many dots can be used for drawing a one inch long horizontal and a one inch long vertical line is given. These two values define the resolution of the printer. The higher the resolution is the better image can be printed with the printer. An average (household) inkjet printer has the resolution around 600x600 dpi. Dpi is the abbreviation for dots per inch. A typographic scanner can have the value of 2450 dpi.

Let us return to the image resolution.

Image resolution is defined by how many dots are printed by a printer in one inch. In accordance to this the size of a printed image can be calculated. Let us look at an example:

The picture size in pixels is 800x600. The resolution is 300 dpi horizontally and vertically as well. What will be the size of the printed picture?

Let’s take a look at the horizontal direction first. The printer must print all together 800 dots. 300 dots will make up 1 inch length. So, 800 dots will fit on 2.66 inch length which is about 6.7 cm.

In a vertical direction exactly 2 inch length is given due to the fact that 600 dots fit on 2 inches. This is about 5.1 cm. So, the printed image will have the size of 2.66x2.0 inches which is about 6.7x5.1 cm.

When images are designed for Web applications only fortunately the resolution is not so important. Only the size measured in pixels count because all monitors create the images from pixels and the resolution does not have any role in it.

Do not forget however to adjust the measurements of the image editor to pixels! Otherwise it will be more difficult to get oriented in the picture.


Let's try it! Exercise
Let's imagine you need a picture in your identity card. If you have a printer and a picture of good quality you can prepare it on your own. Now just calculate the size and resolution of the picture you need to have the best solution.