PICTURE FORMATS FOR WEB = JPG ∙ PNG ∙ GIF ∙ SVG
- Still images
- Many colors
- Shading/grading of light and dark
- Logos, graphics, cut out elements which involve transpareny and fading
- Images while in the eiditing process (because png-24 is lossless)
- Photographs and other uses mentioned at JPEG – if file size is not an issue
- Logos, graphics without fadings
- Few colors (png-8 supports 256 colors max.)
png-8 and png-24 are the same data format (.png) but have two different modes.
- Logos, vectorial illustrations
Pixel and vector graphics
The are are two main methods to store digital picture data – serially by splitting the data in single raster points (mostly called “pixels”), or algorithmically by mathematic formulas (mostly called “vectors”).
The difference concerns the way how the data information is written in the file, but not the screen’s display, which is always in pixels. Graphic cards, monitors always display a picture in pixels. Each monitor, each beamer, has it’s own resolution defined by pixel count (width x heigth).
1. Pixels graphics
The pixel, short for pix (= picture) element, is a single point in a graphic image, called raster graphics. A pixel has typically three or four dimensions of variability such as RGB (red, green, blue) or CMYK (cyan, magenta, yellow and black) (more informations see 1.2 Color modes). The color dimension values determine the final color of a pixel. A digital image contains the following informations of each pixel:
a) it’s position (row, column)
b) it’s color* (in this case RGB values)
Lets look at an enlarged model of a 10×2 pixel image:
The information would be desribed in the following way:
Row=1 Column=1 RED=153 GREEN=000 BLUE=051,
1/2/204/000/051, 1/3/255/000/051, 1/4/255/051/102, 1/5/255/102/153, 1/6/255/102/153, 1/7/255/204/255, 1/8/255/204/255, 1/9/255/204/255, 1/10/255/000/000
2/1/102/255/204, 2/2/051/255/204, 2/3/000/255/204, and so on.
Sample: Enlarged pixel file
Advantage of pixel images:
So far the only way for photorealistic display. What yo see is what you get – full control over every pixel. The format has also become an quasi-standard which was set by Adobe’s Photoshop, the industry-leading tool for editing pictures.
Disadvantage of pixel images:
Not scalable without losing information. High data weight for big pictures. Almost no 3D opportunities as illustrated objects are not stored in another position than they appear on the picture.
Common pixel image formats:
.tif, .psd, .jpg, .gif (static and animated), .png, .bmp and many others. Tif and psd, when used with photoshop, also allow the usage of unrastered vector graphics, which keep gtheir vector properties in photoshop (when using the smart objects feature).
Movie pixelformats are flv., .mov, .mpeg, .mpg., mp4, .wmv, .avi, DivX and many more.
2. Vector graphics
Vector graphics (also called object-oriented graphics) implement the use of geometrical primitives, which are all based upon mathematical equations, to represent images (in computer graphics).
So a vector is a formula, which allows to display the following features:
The primitives are:
And their attributes are:
- Strength (thickness) of outlines
- Pattern of outlines (straight, dotted, dashed)
Attributes can be combined and applied on all primitives.
These features and attributes can be displayed and stored independently of size and resolution.
Sample of vector based illustration:
Advantage of vector graphics:
100% scalable without loss of quality (raster images scale poorly).
(a) original vector-based illustration; (b) illustration magnified as a vector image; (c) illustration magnified as a raster image. The comparison of b) and c) shows the scaling advantage of vector graphics clearly
Two overlayed semi transparent vector forms (with handlers) and the same forms shown in 15×12 pixels (enlarged)
No photorealistc display possible (so far). Personally I do expect that vectorial formats will outrule pixel formats one day. But don’t ask me when!
Formats using vector data:
Typical vectorial formats are the various kind of fonts (as OpenFonts, TrueTypeFonts, PostscriptFonts), swf (Flash movies), .svg, .ai, .eps and many others. But almost all of them do additionally allow the implementation of pixel data, especiall swf, eps and ai.
3. Combined Formats
Combinig pixel and vecorial formats is possible in many ways:
- Photoshop, the pixel editing tool, allows direct path drawing on separate layers, and imported vector graphics are kept as vectors (smart objects)
- Illustrator, the vector graphics editing tool, can also import pixel graphics (and allowing some limited editing of it)
- Layout applications as InDesign master both formats pefectly (have a look at the art posters down at the entrance – sharp postscript typo on pixelated images)
A special sample for the virtuous combination of pixel and vector technology are 3D graphics. While the basic (mostly grid) models are purely vectorial – as such scalable. movable, animateable – their surface textures and special effects combine pixelated and procedural (vectorial) methods and effects. Procedural methods use complex vectorial algorithms for creating various surfaces – keeping the surface look as fully scalable and animateable as the grid body.
Grid model (left), with surface (right)