Difference between vector and raster image. Differences between raster and vector graphics

What is the difference between raster and vector images? This question is asked by many beginning designers, webmasters, marketers, and other people whose profession requires them to be interested in this topic. Sometimes the answers to it are unclear, like the names of raster and vector images themselves. It's time to clarify what the difference between them is.

Raster images are produced by increasing the number of pixels, each of which has its own color to render the image more correctly.

A vector image is produced by specifying mathematical formulas (vectors), which indicate how it is created and what colors are used for this.

The main difference is that bitmap images do not retain their appearance when enlarging them - if you enlarge the photo, it will become blurry. Vector images maintain their appearance regardless of resizing because mathematical formulas dictate how they will react to it.

Pros and cons of raster and vector images

Raster images allow you to display many colors and change or add colors, unlike the vector version. They can convey the smallest nuances of light and shadow in the desired resolution. The vector image is scalable, so after creating it once, you can later unlimited amount Change its size several times – from the size of a business card to the size of a billboard.

Raster images cannot be enlarged without compromising their quality. Vector images cannot fully display the richness of natural colors and details. Raster images tend to be large and heavy, while vector images are quite lightweight. Raster images are used for web development, printing, while vector images cannot be used for these purposes in their original form– they, first of all, need to be converted to a raster. Vectors are displayed correctly when high resolution allowed by the device, while rasters become blurry when enlarged.

When should I use a raster and when should I use a vector?

Raster images are typically used for photographs, so Photoshop is a raster program. On the other side Adobe Illustrator– a program for working with vector files that automatically creates formulas during the image creation process. Logos, letterheads and others graphic elements It is best to create vector images, while photographs are best created using raster images. All vectors must be converted to rasters for use in web development. Text is usually created in vector format.
If you are debating whether to create a vector or raster image, use a simple rule: if you are designing it from scratch and it only needs a few colors, opt for vector. If you are working on editing an image with rich color scheme, it is better to use raster format. For many projects, vector and raster are used simultaneously. For example, for a brochure you can create a vector logo, and a photo that shows happy clients– raster.

Differences between raster and vector graphics when they increase.

Work theme

Differences between raster and vector graphics

Composition of the group

9th grade students

Project Manager

Goal of the work

Evaluate the advantages and disadvantages of both raster and vector graphics.

Fundamental Question

What are the differences between raster and vector graphics?

Problematic question

How to distinguish raster image from vector?

Study questions

What is a raster?

What is vector graphics?

What graphic editors are there?

Project plan

Stage 1 Development of design specifications. Objectives of the stage - defining the topic, clarifying goals, selecting working groups, identifying sources of information, setting tasks

Stage 2. Project development. The objectives of this stage are to collect and clarify information.

Stage 3. Evaluation of results The tasks of this stage are to analyze the implementation of project tasks.

Stage 4. Project protection. Lesson - presentation Objectives of the stage - collective defense of the project

Information found

Vector image (work Giuseppe Mariotti)

Vector computer graphics has today a very wide range of applications in the most various areas human activity, from advertising on the pages of newspapers to the development of projects in such an industry as space. It is especially important that the vector image initially allows you to perform precise geometric constructions, therefore, drawings and other design documentation. Note that almost all systems computer-aided design It is based on vector computer graphics. Needless to say, vector computer graphics, along with raster graphics, are widely used by artists and designers, and this is primarily due to the features of this type of computer graphics. A vector image (vector graphics) is represented as a collection of straight line segments (vectors), rather than points, which are used in raster images. Vector graphics describe images using straight and curved lines called vectors, as well as parameters describing colors and layout. The advantage is high-quality scaling in any direction. Increasing or decreasing objects is done by increasing or decreasing the corresponding coefficients in mathematical formulas. Another plus is that vector graphics do not depend on resolution, i.e. can be displayed in a variety of output devices with different resolutions without loss of quality. But unfortunately, vector format becomes disadvantageous when transmitting images from big amount shades or small parts(for example, photographs). After all, every smallest highlight in this case will appear not as a collection of single-color dots, but as a complex mathematical formula or as a whole graphic primitives, each of which is a formula. This makes the file heavier. The most popular graphics programs designed for processing vector images are Adobe Illustrator And Corel DRAW

Raster image

Raster image- an image that is a grid of pixels or colored dots (usually rectangular) on computer monitor, paper and other display devices and materials. Raster graphics is a rectangular matrix consisting of many very small indivisible points (pixels). Each such pixel can be painted in any one color. For example, a monitor with a resolution of 1024x768 pixels has a matrix containing 786432 pixels, each of which (depending on the color depth) can have its own color. Because pixels have very small size, then such a mosaic merges into a single whole and when good quality images (high resolution), the human eye does not see the “pixelization” of the image.

The main advantage of raster images is the ability to convey a huge number of shades of color and smooth transitions between them, therefore, when digitizing photographs, they use the raster method. One of the main disadvantages is the impossibility of correct transformations of the raster image, such as rotation, enlargement, reduction and various types of curvature. The most popular graphics programs designed for processing vector images are Adobe Photoshop, GIMP, SAI

Now let's talk about the problem of file sizes. Vector image files have much smaller size than raster ones, since in the computer memory each of the objects of this graphics is stored in the form of mathematical equations, while the parameters of each point (coordinates, intensity, color) are described individually in the raster graphics file, hence the huge file sizes.

Before we talk about the differences and similarities between Raster and Vector graphics, we need to understand how a computer sees, remembers and shows us an image.

Since a computer is a machine, there are no colors or even images for it. Moreover, he does not distinguish between words and does not “think” in words at all. For him it only exists binary code
(approx. 01000110), which is information.

Everything: programs, images, texts, sound files, video files; The machine “knows” all this in the form of binary codes that make up information about the file object. The same thing happens with pictures in the computer's memory. Every time you open any picture, the computer “draws” the image according to given parameters. But we’ll talk about the features of computers later; it’s better to talk about the types and features of electronic graphics. There are 4 main types of graphics: Raster, Vector, Fractal, Three-dimensional. However, today we are only interested in the first two.

Raster graphics

Raster graphics- an image constructed from many dots (pixels), the color scheme of which forms, when zoomed in, a pattern that merges for the human eye into a single composition. Image storage formats: BMP, TIFF, JPEG, GIF, PNG, WMF, PSD, TGA, ICO, FPX.

Principle of operation:

The image file stores information about each pixel and its location coordinates in the image grid. This:

1. The number of pixels in width and height, as well as their total number in the image.
2. The colors and shades used.
3. Color scheme (model) for constructing an image (RGB, Lab, CMYK, HSB, XYZ, etc.).
4. For each pixel: light level, saturation, color, hue, size... .
5. Recommended resolution information.

When you open an image, the computer, using the information loaded into the file, creates a grid on which the pixels are painted in accordance with their parameters. The shades of adjacent pixels are selected so that with a high-resolution image, the human eye sees a single composition. And she looks quite natural compared to vector picture. However, when you zoom in on the bitmap image, the entire architecture becomes visible. Naturally, if there are such parameters in the file, its volume takes up relatively large space on the hard drive and random access memory during processing. Fortunately, there are many raster formats that allow you to compress an image to small volumes memory.

Vector graphics.

Vector graphics- a picture constructed from simple geometric shapes(geometric primitives): points, straight lines, circles, polygons, etc. Image storage formats: SVG, CDR (graphics format), DXF, WMF, OpenVG, AL, EPS, GXL, CGM, SWF.

Principle of operation:

The image file stores information about the location of geometric shapes in the picture and the features of each shape separately. This:

1. Shape coordinates.
2. Size on canvas.
3. The distance from the center of the figure to its border.
4. Radius of a circle.
5. Color and shades of color of a figure.

Another feature of graphics is that the figures are set independently of each other, therefore they can overlap each other. When you open a picture, using the information loaded into the file, it creates a coordinate grid on which shapes are drawn and painted in the desired colors. Thanks to this approach, the image, when converted to larger size does not lose quality, and the file size occupied on the hard drive does not increase at all. And all thanks to the fact that the data on the figures remained the same.

You might think that a raster image consists of pixels, and a vector image consists only of geometric shapes... THIS IS NOT SO! Both raster and vector images are made up of pixels. In general, any picture in electronic format consists of pixels. Both there is a pixel grid, where each pixel is painted in its own color. The difference between the graphs occurs only in the method of creating and constructing the image. In one case, priority is given to the color of each pixel, and it is fixed; in the other, the priority is the size and shape of the shapes themselves. And by the way, the screen of any monitor also consists of many pixels.

Let's summarize.

Conclusion: Raster graphics are best used when processing photographs, working with a scanner and artistic work, because the this type graphics provides a more natural transfer color palette in the image. Vector graphics, due to their unnatural color palette, are best used in computer design, modeling and design.

In order to have a discussion about graphics programs, you first need to understand the concepts and differences between the two main types of 2D graphics: raster and vector images. This is a very important lesson, especially if you intend to work with graphics.

The concept of a raster image

Raster images are images that consist of tiny rectangular points individual color - pixels combined together. Each pixel has its own special location in the picture and its own individual color value.

Each image has a fixed number of pixels. You can see them on your monitor screen, most of which display approximately 70 to 100 pixels per inch (the actual number depends on your monitor and the settings of the screen itself).

To illustrate this, let's take a look at a typical desktop icon, My Computer, which is typically 32 pixels wide by 32 pixels tall. In other words, there are 32 points of color in each direction that combine to form the image of such an icon.

When you enlarge this drawing as in the example, you will be able to clearly see each individual square a certain color. Note that the white areas in the background are also individual pixels, although they represent one solid color.

Image size and resolution

Raster images are resolution dependent. Image resolution is the number of pixels in an image per unit length. It is a measure of the clarity of detail in a raster image and is usually referred to as dpi (dots per inch) or ppi (pixels per inch). These terms are somewhat synonymous, only ppi refers to images and dpi refers to output devices. This is why you can find dpi in the description of monitors, digital cameras etc.

How higher resolution, the smaller the pixel size and the more of them there are per 1 inch, and accordingly the better quality Pictures.

The resolution is selected for each image individually and depends on where you plan to use it:

• if you plan to use it for posting on the Internet, then the resolution is selected at 72 ppi, since the main criterion for the Internet is the speed of loading images, and not their amazing quality, which is why appropriate file saving formats are selected, where quality is not in the first place.
• if you want to print an image, the resolution should be much higher than 72 ppi. So, in order to print an image in good quality, its resolution should be in the range of 150-300 ppi. This is the main requirement for photo printing houses that print magazines, catalogs and small-format products (booklets, flyers, advertising leaflets).

As mentioned above, raster images are very dependent on their resolution. That is why, when scaling, due to their pixel nature, such images always lose quality. However, if you still decide to increase the image size, then it is best to use the interpolation method, with which you can achieve very good results. ABOUT this method we'll talk about it in the next lesson.

The size of an image in raster graphics is physical size file in which this image is stored. It is proportional to the size of the image in pixels.

Photoshop shows the relationship between image size and resolution. This can be viewed by opening the Image Size dialog box found in the Image menu. When changes are made to one of these values, all others will automatically be adjusted in accordance with the changed value.

To sum up, we can say that main characteristics of raster images speakers:

• image size in pixels
• bit depth
• color space
• image resolution

An example of a raster image is any photograph or picture created by scanning, photographing, or drawing in raster editor, and also created by transforming vector image to raster.

Raster image formats

The most common raster image formats include:

• JPEG, JPG

Converting between raster image formats is very easy, using the “Save As ...” command, in the menu of which, after the file name, you select the format in which you want to save the image.

Some formats, namely GIF and PNG, support background transparency. At the same time, one should not forget that transparent background will not be so if the image GIF format or PNG, save it in any other format, or copy it and paste it into another image.

Programs for working with raster graphics

The most popular programs for working with raster graphics:

• Adobe Photoshop
• Adobe Fireworks
• Corel Photo-Paint
• Corel Paint Shop Pro
• Corel Painter
• Paint

As for me, then Adobe editor Photoshop is the best of the programs.

Compared to this type of graphics, vector graphics also have many advantages. Let's look at them.

What are vector images

Vector is an image, consisting of many individual, scalable objects (lines and curves) that are defined using mathematical equations.

Objects can consist of lines, curves, and shapes. In this case, changing the attributes of a vector object does not affect the object itself, i.e. You can freely change any number of object attributes without destroying the main object.

In vector graphics, image quality does not depend on resolution. This is all explained by the fact that vector objects are described mathematical equations, therefore, when scaling, they are recalculated and, accordingly, do not lose quality. Based on this, you can increase or decrease the size to any extent, and your image will remain as clear and sharp, it will be visible both on the monitor screen and when printing. Thus, the vector is the best choice for illustrations displayed on various media and which have to be resized frequently, such as logos.

Another advantage of images is that they are not limited to a rectangular shape like raster images. Such objects can be placed on other objects (placement in the foreground or background is chosen by you personally).

For clarity, I have provided a drawing on which a circle is drawn in vector and a circle in raster format. Both are placed on white backgrounds. But when you place a raster circle on top of another similar circle, you will see that this circle has a rectangular frame, which, as you see in the picture, is not present in the vector.

Today, vector images are becoming more and more photorealistic, this is due to the constant development and implementation of various tools in programs, for example, such as a gradient mesh.

Vector images are typically created using special programs. You cannot scan an image and save it as a vector file without using conversion by tracing the image to Adobe program Illustrator.

On the other hand, a vector image can be converted to a raster image quite easily. This process is called rasterization. Also, during conversion, you can specify any resolution of the future raster image.

Vector formats

The most common vector formats include:

• AI (Adobe Illustrator);
• CDR (CorelDRAW);
• CMX (Corel currency);
• SVG (scalable vector graphics);
• CGM Computer Graphics Metafile;
• DXF AutoCAD.

The most popular programs for working with vectors : Adobe Illustrator, CorelDRAW and Inkscape.

So what is the difference between vector and raster images?

Summing up the article about raster and vector images, we can say with confidence that vector images have many advantages over raster images, namely.

I think many have heard about vector and raster graphics. But do you know how they differ from each other?

Graphic files happen in various formats, for example: jpg, gif, tiff, ai, eps, bmp, cdr, etc. and although they all carry information about an image, each format has unique properties and is adapted to solve different problems.

However, among huge amount graphic editors and formats, two global categories can be distinguished - vector and raster graphics. As well as formats, raster and vector graphics serves for different purposes and complement each other.

And yet, what's the difference between vector graphics and raster? Which one is better to use for creating layouts? In this article you will find full information and you will be able to figure out this difficult issue once and for all.

Imagine a grid or chessboard. Each square (raster or dot) has its own color and brightness. A raster image consists of such a mosaic. How more points on a plane and the smaller they are, the less we notice them and the more clearly we see the image.

Looking at thousands of dots of different colors and shades on the screen, we guess objects and images in it. It is from such multi-colored dots that any digital photography. Raster image, unlike vector, is capable of conveying a realistic image consisting of thousands of small details.

Modern cameras allow you to take pictures at tens of millions of points. To see the points that make up such a photograph, it is necessary to enlarge it many times:

Raster graphics used when working with realistic images.

Advantages

Vector is used much more often and is easier to view.
- Capable of reproducing an image of any complexity, regardless of the number of colors and soft gradient transitions.

Flaws

The simplest raster image has a larger size than a vector image
- When scaling, clarity disappears

Vector graphics consists not of points containing color information, but of reference points and vector lines connecting them. The vector image file contains information about the positions of the points, as well as information about the line passing through the reference points.

That is vector file contains information in the form of formulas and mathematical calculations, therefore it has a small size, regardless of the actual scale of the depicted canvas. Vector graphics indispensable when designing drawings, drawing maps, various schemes etc. Vector graphics are also often used in print design.

Advantages

Image clarity is maintained when scaling
- Any image can be easily edited without loss of quality

Flaws

You can only depict simple elements unlike raster
- Converting a vector to a raster is easy, but converting a raster to a vector is difficult