Vector Graphics. Digital Media I. Vector and Bitmap. The two main categories of graphics Each has strengths and weaknesses They are developed very differently Choosing the correct format for the right project can save you time and give you added design options. Graphics on the Web.
Digital Media I
Until recently, the way to add drawings to a web page was to define the drawing as an image (in GIF, PNG, JPEG or some other format) and insert the image into the web page using the <IMG> element. This works well for many graphics. However, the following slides compare the differences and benefits of vector images.
The file size of an image is defined by the width and height of the image (in pixels) and the number of bits allocated to each pixel in the image.
File size defined by mathematical equations telling how to “draw” the image. Vectors can often be much smaller files that download faster.File Size
Screen size = 2089 x 1094 pixels
Bitmap = 6.5 MB vs. Vector = 26 KB
Once the image has been defined at a specific resolution (ex. 800 x 600) the graphic will not look as good at another resolution (ex. 1028 x 764).
Vector images are scalable to dynamically fit whatever resolution the viewer’s monitor may be. You can even zoom in on a vector without losing clarity.Resolution
The Web depends on hyperlinking. To have more than one link per image requires the use of image maps embedded in the HTML code.
Various parts of a vector image may have different links, built inherently into the image.Hyperlinking
Minimal animation: The GIF format allows several images to be defined in one image file ("animated gifs"), but each image is essentially static.
Flash and shockwave files are examples of fully-animated vector drawings with many animation options.Animation
Vectors can be used to create:
“artwork” of the new millennium
The Last Supper (after cleaning)Leonardo da Vinci, 1498
Tempera on plaster 460 x 880 cm (15 x 29 ft.)
Convent of Santa Maria delle Grazie (Refectory), Milan, Italy
More than anything else, the user’s judgment of your work will be most heavily influenced by the work’s visual impact.
--Tay Vaughn, President, Timestream
- System for representing the colors on a computer display
256 x 256 x 256 = 16,777,216 16 million possible colors
ImageColor: How Many Colors ~ Depth
How many colors?Depth
16 million(24 bit)
lowImageColor: How We Display It ~ Resolution
How many pixels (perinch) ?Resolution
Smoothing of an imagecaused by aliasing(see notes)
Adjust pixel positionsor intensitiesImage Adjustments:Illusions ~ Antialiasing
Lossy--compromises the original data and it cannot go back to the original image.
Lossless--retains all the original data as part of the compressed file