+4 votes
250 views
in Web design by (242k points)
reopened
Vector image and bitmap face to face

1 Answer

+5 votes
by (1.6m points)
edited
 
Best answer

Bitmap or raster image
Vector images
File formats and graphic design programs
Scope of application
Rasterization and vectorization

image

Vector image and bitmap face to face

Images are, together with text content, central elements in a web page. In the field of graphic computing, there are two different types of format from the base: vector graphics and raster images, also called bitmaps. Below, we explain what these two variants consist of and what areas of application derive from their essential characteristics..

Bitmap or raster image

The minimum unit of this graphic format is the point or pixel , to which a specific chromatic value is assigned. Because, in computer graphics, these points are distributed on a grid or? Raster? In English, images made up of pixels are generally called raster images or bitmaps and are defined by two central characteristics: the number of points or pixels that compose them and the information about the color that each pixel contains. While the former determine the height and width of a graph and thus its resolution, the color and contrast values ​​can be defined individually for each point.

This makes bitmaps an ideal medium for rendering highly detailed images. Classic examples include photos taken with a digital camera or images created from a scanner. Being made up of a fixed number of pixels, both their quality and size depend on the total number of pixels. The greater the number of pixels that make up an image, the higher its quality (and resolution), the larger the reproducible size, and the more storage space it needs. This interdependence between image quality and number of pixels means that images cannot be scaled without loss of quality..

Vector images

Vector graphics, on the other hand, are not composed of points, but of primary graphic elements such as lines, circles and curves. These are called vectors, which are defined by mathematical parameters (coordinates) such as the start point, end point, radius, side length, line thickness, color, and fill pattern. The most modern vector design programs are even capable of reproducing color transitions and transparencies. These objects are not defined as a pixel alignment, but logically based on their qualities . To define a simple circle, for example, only the midpoint position and radius are required, as well as the color and thickness of the line, to be able to render it at any size.

And this is precisely the great advantage of vector images compared to bitmaps: it is an image that can be defined based on its qualities, regardless of its pixel density, it can be scaled without loss of quality , since the parameters they are recalculated based on the final size. On the other hand, if, for example, you want to scale a circle made of pixels, from a certain size you will begin to see the points that compose it due to its intrinsic lack of flexibility ( aliasing or? Step? Effect ). Hence, this type of distorted images are known colloquially as? pixelated images ?..

Regarding the size of these images and the storage space they require, the size of vector graphics has no effect on their weight, since it depends on the number of saved parameters, while bitmaps, in which larger images also need more pixels, they weigh more.

Since the display media (screens, printing) can only reproduce the images as raster graphics, vectorized images have to be transformed into bitmap graphics (rasterization) before being displayed. Depending on the complexity of the object, this is a preliminary step that requires more or less time and power from the team.

File formats and graphic design programs

There are a large number of programs for designing graphics that support a number of specific file formats. The following table shows a selection of the most common formats and programs.

 

File format

Design program

Bitmap

TIF, JPG, BMP, PNG, GIF

Adobe Photoshop, GIMP, Corel PaintShop Pro

Vector image

SVG, EPS, AI, CDR, WMF

Adobe Illustrator, Corel Draw, Inkscape

Scope of application

Thanks to the possibility of scaling without losses, vector images are especially suitable for the representation of diagrams, logos, geometric figures, signatures, icons and technical designs. More complex images such as digital photos of natural objects with many different color and contrast values ​​cannot be rendered with vectors without visible loss of quality. In this case it is better to use pixel based images.

Rasterization and vectorization

Whereas the rasterization of a vector image occurs without much fuss and invisibly every time such an image is printed or displayed on a screen, the reverse path, from bitmap to vector image, is, on the contrary , more difficult. This vectorization process can be done manually or with the help of a vectorization program such as Xara Xtreme or Inkscape, which respectively contain the Bitmap Tracer or Potrace functions. Such a change is prone to errors, however, since these programs can only display the complex color or contrast transitions typical of raster images roughly, showing them as isolated visible bands (banding).

Advantage Drawbacks
Bitmap
  • Rich in nuances of color and contrast
  • You can work on all the points of the image
  • Scalability linked to quality losses
  • Compressing them can lead to quality losses
  • High-quality graphics require a lot of space
  • Vectorization takes a lot of work
Vector image
  • Scalable without loss of quality
  • Lossless compression
  • Small file size
  • The qualities of objects can be freely adjusted
  • Easy to rasterize
  • Not suitable for complex graphic representations
  • Its reproduction requires prior rasterization

...