Image formats & Size
BackgroundMost serious image collections have the images categorized for easier searching. Often the images are divided into two main types of images: raster and vector. Images that are created with lines are often vector images. This is a useful format because these images can be expanded or shrink and their resolution is retained. Vector image are derived from mathematical formulas (that is not apparent to the viewer) rather than just painted lines or pixels (raster). The image below an example of a vector image (original was eps format, displayed in Flash (swf) format).
The following figure is an example of a raster image (original was tif format).
Visible inspection alone is often insufficient to distinguish between raster or vector images. Often the format will be a clue. Common vector formats will include the following file extensions:
Common raster format extensions:
Another way to test for to determine the format, is to scale the image, start with a small version of the image and then expand the size. Vector-based artwork maintains its image quality at different resolutions (screen or printer). The following figure is an example of a small Raster image that was scaled up and the computer has done its best to extrapolate and fill in the gaps but the lack of quality is obvious. The following figure is a vector image that has been scaled up.
Compare the Vector with the Raster Figure. Both images were scaled in the same way. However, the vector image retains its quality (because it is just made from math rather than pixels). The Raster image becomes distorted and blurred because there are only so many pixels in the raster image and the computer tries to extrapolate the expansion as best as it can.
One might think that all images would be better off being vector images but then images like photos are always raster. ...so there are benefits and tradeoffs to each kind of image. |
PurposeAttending to formats and size of your images is an important housekeeping skills for every designer.
Aspect RatioThe Golden rectangle
One idea to maintain a pleasing look and achieve a sense of harmony is to use the aspect ratio of, 5 to 8, or 1 to 1.6 (one side is 1.6 times the length of the other). Images with these dimensions tend to be more pleasing to the eye than other dimensions (Lohr, 2003). This is a heuristic not a rule. Lossy vs Lossless FormatsSome raster image formats will eliminate data from the image. These are temed lossy formats. These formats are typically used on the Internet where downloading speed is a factor. Lossy images that are smaller, load faster. The problem is that too much reduction in data can begin to affect the quality of the image.
It is best to start with the highest quality image possible and save that in a lossless format (e.g. tif, psd). For instance, once all the manipulations and transformations have been done it should be saved in lossless format as a separate file and then saved out in a lossy format for the web. If changes need to be made, go back to the lossless file - otherwise each time you edit and resave a lossy file, the quality erodes. For instance, don't use jpg format files for your editing - reserve that format for the web. Standard lossy formats:
Standard lossless formats:
See the following slideshow for differences in quality and size of the images - the quality difference is very subtle in the areas with gradients: |
References
Lohr, L. L. (2003). Creating graphics for learning and performance : lessons in visual literacy. Upper Saddle River, N.J.: Merrill/Prentice Hall.