In this material we will look at the main differences between raster and vector images. We will learn all the advantages of vector and raster graphics, as well as where it is best to use such graphics for your purposes. So, you have probably asked yourself this question more than once: “What does the picture that is displayed on my computer screen consist of?” You may be surprised, but in fact there is no such thing as a photo!

What is a raster image?

In reality, we are just seeing an electronic version of the picture on the monitor. If we talk about raster image, then it is stored in the computer memory in the form of numbers and symbols. They are already with a certain sequence describe a specific area (element) the image itself. This element is rendered as a pixel (cells of a certain color). Let's see what kind of pixel this is.

To do this, you can simply take a photo and enlarge it. You will notice that special squares have appeared (picture below). The image began to split into squares of different colors. These squares are pixels.

This is how any raster image obtained from a camera turns out to be mobile phone or downloaded from the Internet. Each pixel, as I said, is described by a certain sequence of numbers and symbols. How do you find out what this sequence is? Yes, very simple! Select the tool " Pipette» (any graphics editor has it) and point at the desired pixel. If you are checking in Photoshop, then you will additionally need to go to the color palette.

So, what follows from what we discussed above. If pixels are represented as a sequence of numbers and letters, then they can be easily changed. By changing the numbers and letters of each pixel, we can change its color, that is, edit the pixel itself. When performing any global correction operation (for example, adjust the brightness) the numerical value of several thousand pixels of the image changes.

Now let's get acquainted with the concept vector image. To demonstrate a visual example, I'll try to create new document. Let's go to the menu " File» —> « Create". Let's use it to create vector graphics. For example, I'll take the tool " Feather» (2) . It is imperative that the setting “ Shape layer» (3) . After that I place the dots in the right places (4) . The result is a certain figure. You can do it at your own discretion.

After we have connected all the dots, a shape is formed and a miniature vector mask is attached to the layer. (5) . This indicates that this is a vector shape and not a raster one.It can be increased and decreased many times and the quality will not suffer in any way. Naturally, various glow effects, strokes, and so on can be applied to this layer.

So what are the differences between a raster image and a vector image? Vector images, unlike raster ones, are described by mathematical formulas rather than Latin symbols. Therefore, they can be increased or decreased without loss of quality. The formula remains the same, only the scale changes. The formula, as a rule, describes a smooth curve and at any value this curve will remain smooth.

If you try to enlarge a picture with vector graphics, you will notice that the pixels are almost invisible, that is, the quality remains at the same level. If you enlarge an image with raster graphics, it will noticeably lose quality.

Thus, vector images can be enlarged without loss of quality. In any size they are described by mathematical formulas. A raster image is a sequence of pixels. When you enlarge a fragment, quality losses begin to be observed. Loss can also be observed when the image is reduced in size.

Vector images are good to use where you need a large image enlargement without loss of quality. For example, this could include various business cards, logos, website banners and much more. Program Adobe Photoshop Although it allows you to work with vector images, it is still a raster editor. CorelDraw or Adobe Illustrator are much better suited for working with vector images.

So, we have become acquainted with the concept of raster and vector images. As I said, the main difference: a vector image is described by mathematical formulas and can be enlarged as much as you like without losing quality, which cannot be said about a raster image.

Although, despite this, many web designers, and not only them, often use raster graphics on their sites. This is understandable, because such graphics look much more attractive. However, there are cool examples of vector graphics. In addition, such work weighs much less. In general, study and implement!

Before you start learning the Photoshop program, you should first familiarize yourself with the very basic basic concepts from the world of digital graphics. These include types of graphics: raster and vector images.

These two concepts will come across you all the time, so let's figure out what they are and what the difference is between them.

Raster images

Raster images are the main and most popular type of graphics. The lion's share of images that you come across on the Internet are precisely this raster. Your camera, smartphone and any other gadget or device takes pictures that already belong to the raster. This is technically the simplest and most accessible way to render graphics.

Just as any living organism consists of tiny particles called cells, so a raster image is made up of pixels.

The Photoshop program was created to work specifically with raster images. All features, tools and mechanisms of the program are designed for editing image pixels.

Why is this type of graphics so popular?

The fact is that, due to their structure, raster images can display smooth color transitions and gradients. The edges of objects in photographs may appear smooth. The color is transmitted clearly, close to real, and this is exactly what is needed to convey our real world in the form of a photograph.

Bitmap images are usually stored in compressed form. Depending on the type of compression, it may or may not be possible to restore the image exactly as it was before compression (lossless compression or lossy compression). The graphic file can also store additional information: about the author of the file, the camera and its settings, the number of dots per inch when printing, etc.

Despite the advantages, the raster has serious disadvantages:

1. Due to the fact that each pixel contains quite a lot of information, when we talk about millions of pixels in one image, it becomes clear how much information will be encoded in memory. This results in increased file sizes. Therefore, the more pixels a photo has, the more it weighs.

2. Difficulties in image scaling. When you zoom in, grain appears and detail disappears. When a photograph is reduced, pixels are lost as a result of complex conversion processes. In this case, the detail of the image will not suffer as much as when enlarged, but this process is already irreversible, that is, if you need to enlarge the image again, it will lose a lot in quality.

Vector images

Vector images consist of elementary geometric objects, such as points, lines, circles, polygons, and so on. Their outlines are based on mathematical equations that tell the devices how to draw individual objects. These objects make up shapes, and they, in turn, are filled with color.

Vector image is a set of coordinates of vertices that form the simplest geometric shapes that make up the final image.

Such graphics are created directly by a person using specialized programs, for example, Adobe Illustrator and Corel Draw. You need to have special skills in using these programs, as well as the ability to draw. Of course, this is not available to many people, so this type of graphics is not so widespread.

Vector images are primarily created for the advertising and design industries.

Advantages of vector graphics:

1. The ability to resize images without losing quality to any size, while the weight of the image does not increase. When changing sizes, the coordinates and line thickness are recalculated, and then objects are constructed in new sizes.

2. A vector image does not store a ton of information, so the weight of such a file will be several times less than a raster.

3. The ability to transform an image from a vector to a raster without loss of quality or any difficulties. Photoshop can do this in two clicks.

Flaws:

Vector graphics are not suitable for creating realistic paintings and photographs. It is very limited in conveying smooth transitions and gradients between colors. As a result, all colors and lines are in strong contrast.

Although Photoshop works with raster graphics, it also contains vector elements in its toolkit. First of all this. When you add text to an image in Photoshop, a separate text layer is created. As long as this layer lives independently, it is a vector element. It can be stretched to any size and the text will always be clear.

Photoshop also consists of simple vector images.

Besides all this, although Photoshop cannot create vector graphics, he can open it. This allows you to add pre-prepared design objects and scale them without losing quality.

Thus, let's summarize briefly:

— raster images are photorealistic, while vector images always show that they are drawn;

— image scaling is a very important feature that you need to know how to use when working with Photoshop. To do this, you need to know how and when the quality of graphics is lost and try to prevent this. Then your future works will be one of those where it’s nice to admire the smallest details and admire how well they are drawn.

If you notice an error in the text, select it and press Ctrl + Enter. Thank you!

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 dots of 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 of a specific 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 details bitmap and is usually referred to as dpi (dots per inch) or ppi (pixels per inch). These terms are somewhat synonymous, except that 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.

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

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. We will talk about this method in the next lesson.

The size of an image in raster graphics is the physical size of the file in which the 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 a raster editor, or created by converting a vector image to a raster image.

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 GIF or PNG image is saved in any other format or copied and pasted 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, the Adobe Photoshop editor 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 by mathematical equations, so 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 best choice for illustrations that are displayed on various media and the size of which must be changed 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 in which a circle is drawn in vector format 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 in Adobe 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.

Sampling

An example of an analog representation graphic information can serve as a painting, the color of which changes continuously, and discrete - an image printed using inkjet printer and consisting of individual dots of different colors.

Example of analog storage audio information is a vinyl record (the sound track changes its shape continuously), and discrete is an audio compact disc (the sound track of which contains areas with different reflectivity).

Presentation of images in a computer

Image:

Raster

Vector

Raster:

Raster image is a collection of dots (pixels) of different colors.

Pixel - the minimum area of ​​the image whose color can be set independently.

During the encoding process, an image is spatially discretized.

Spatial sampling of an image can be compared to constructing an image from a mosaic (a large number of small multi-colored glasses).

The image is divided into separate small fragments (dots), and each fragment is assigned a color value, that is color code (red, green, blue, etc.).

The quality of the image depends on the number of dots (the smaller the dot size and, accordingly, the greater their number, the better the quality) and the number of colors used (the more colors, the better the quality of the image encoded).

Pros of raster coding:

2. Prevalence

Disadvantages of raster encoding:

1. Universal method (allows you to encode any image)

2. Prevalence

3. The only method for encoding and processing blurry images that do not have clear boundaries (photos)

4. Bitmap is natural for most I/O devices

The most popular raster formats:

Raster image formats:

Bit MaP image (BMP)- a universal raster graphics file format used in the Windows operating system. This format is supported by many graphic editors, including the Paint editor. Recommended for storing and exchanging data with other applications.

Graphics Interchange Format (GIF)- raster graphics file format, supported by applications for various operating systems. Includes a lossless compression algorithm that allows you to reduce the file size by several times. Recommended for storing images created programmatically (diagrams, graphs, etc.) and drawings (such as appliqué) with a limited number of colors (up to 256). Used to place graphic images on Web pages on the Internet.

Tagged Image File Format (TIFF)- raster graphics file format, supported by all major graphics editors and computer platforms. Includes a lossless compression algorithm. Used to exchange documents between different programs. Recommended for use when working with publishing systems. The format supports a wide range of color depths, different color spaces, and different compression settings (both lossy and non-lossy).

RAW- stores information directly obtained from the matrix of a digital camera or similar device without applying any transformations to it, and also stores camera settings.

Vector image:

Vector image is a collection of graphic primitives (point, line, ellipse...). Each primitive is described by mathematical formulas. Coding depends on the application environment.

Dignity vector graphics is that files storing vector graphics are relatively small in size.

It is also important that vector graphics can be increased or decreased without loss of quality.

Pros of vector image:

1. The best way for storing drawings, diagrams, maps

2. There is no loss of information during encoding

3. There is no distortion when resizing

4. File size depends on the complexity of the drawing

5. There is no distortion when scaling the image

Disadvantages of vector images:

1. Not all objects can be depicted in vector form

2. Conversion from raster to vector image is difficult

3. Ineffective to use for photos and blurry images

Vector image formats

cdr– format used by CorelDraw.

cmx– a format of graphics programs from Corel Corporation, designed for transferring drawings between different programs.

ai– file format created by Adobe Illustrator.

wmf(Windows Metafile) – graphic file format in the system Microsoft Windows, a universal vector format supported by most Windows applications.

eps– a relatively universal vector file format supported by most vector editors - CorelDraw, Adobe Illustrator, Macromedia FreeHand.

fla– source Flash files are created in AdobeFlash (formerly MacromediaFlash).

swf– Flash format that can be viewed using Flash Player, installed as a browser plugin.

svg– Abbreviation for English. Scalable Vector Graphics. It is an open standard, i.e. Unlike most other formats, SVG is not proprietary.