Web Graphics for Beginners: Part 3

Home > Build > Graphics > Web Graphics for Beginners

Scaling and Sizing Graphics

Unfortunately, bitmap graphics are at a severe disadvantage when it comes to being scaled. Once a graphic is created at a certain resolution (dpi), it cannot gain resolution. It can only lose resolution. If a bitmap graphic is doubled in size, it gains nothing but in fact loses quality. If a graphic created at 72 dpi is changed to 150 dpi, it will actually look worse than the original. The graphic will still use the same amount of pixels as it was originally created in, but instead display at twice size. This will usually cause severe pixelation, and is a common mistake for many novice graphic artists. For this reason, it's a good idea to create your graphics at a higher resolution than you anticipate using. A graphic can always be scaled to a lower size, yet still retain it's quality.

A vector graphic is scaleable. Since it is rendered by a calculation, when doubled it will just apply the calculation to the new dimensions, therefore retaining all quality and rendering smoothly.

A graphic also has to be scaled uniformally. If the pixel dimensions of a graphic are 100 x 100, but is scaled to 125 x 100, the graphic will look out of proportion. This look is called skew. A graphic is skewed when it is scaled out of proportion. Most graphics programs automatically scale images proportionately, while other such as Photoshop, give the user the option to scale unproportionately.

Graphic Formats:

There are literally hundreds upon hundreds of graphic file formats. Entire books have been written on the subject. Some common ones are TIF, EPS, BMP, WMF, PICT, GIF, JPEG and PNG.

These formats are primarily used for print:

TIF - Tagged Image Format
A TIF image is one that is able to be compressed, using lossy compression (which will be discussed soon) yet not compromising on image quality. A TIF can be a relatively small file, yet still print in high resolution.

EPS - Encapsulated Postscript
An EPS uses the postscript printer language developed by Adobe many years ago. EPS graphics can only be printed well when the printer also speaks the Postscript language. An EPS offers no compression, thus is usually a larger file.

BMP - Bitmap
A BMP is a standard bitmap file format, as one could probably guess. It also offers no compression, but is significantly smaller than an EPS. BMP's are commonly used for desktop wallpaper, screen savers, and occasionally on print.

PICT - Macintosh Picture File
This is the standard Macintosh File Format. It can be either vector or bitmap. Not recommended for using on any platform other than Mac.

WMF - Windows Meta File
This is the Windows equivalent of a PICT. Also supports vector or bitmap. Not recommended for using on any platform other than Windows.

These formats are used on the Web:

GIF
A format invented by the online service Compuserve. GIFs can only support up to 256 colors. GIF file sized are based on the amount of colors, plus the pixel dimensions. A GIF can be no higher than 72 dpi.

JPEG
JPEG or JPG is a format that uses millions of colors, and compresses graphics using lossy compression, similar to TIF. The difference between a TIF and a JPEG is that a JPEG reduces file size by compromising on quality. The lower the quality, the lower the file size. A JPEG can be saved at the highest quality, but will be compressed very little.

PNG
PNG is a format that in many ways is superior to both GIFs and JPEGS. Many people have thought, and still think that PNG is the future of Web graphics. PNG graphics are generally higher quality yet smaller in size. The format has many strengths, yet hasn't gained the browser acceptance to become a player in web graphics. Due to it's lack of support, and lack of use, we will not cover PNGs in this tutorial.

Part 2: Screen vs. Print

Web Graphics For Beginners

Part 4: Inside the GIF