Best Practices for Images
Please note that the campus images can be accessed from an on-campus computer or through the UNC remote logon.
The use of images for the Web requires different formats and modifications than when used for print publications. The Web Communications Office can help you answer Web image questions. Here is some basic information:
The GIF Image Format
GIF stands for Graphics Interchange Format. It is probably the most common image format used on the Web.
GIF's also support transparency, which means that they don’t have a specific background color so will blend into the background behind them without displaying a square block of color. Most images with blocks of color, such as the UNC logo, are GIF formats.
The major disadvantage of GIF's is that they only support up to 256 colors. This means they're not good for photographs or any other image that contains lots of different colors.
The JPEG Image Format
JPEG stands for Joint Photographic Experts Group. Their main advantage over GIF's is that they can display up to 16 million colors, which makes them much better for images with lots of variations of color such as photographs and gradients.
The JPEG format is that it is lossy. This means that you lose some of the detail of your image when you save an image as a JPEG format. This may cause “dithering” – the fuzzy parts of the picture.
The PNG Format
There is a relatively new image format for the Web called a PNG which supports transparency and small file sizes. Earlier browsers don't recognize the PNG format so, for now, use GIF's or JPEG's.
Optimizing for the Web
Most images, especially digital camera photos, have very large file sizes and must be reduced for Web use. The total size of a page should not exceed 100K and images make up most of that size. To reduce the image size, you can crop, resize the image and save for the Web.
Most image editing programs, such as Photoshop, include a command that lists something such as “save for web” and all images should be saved for the Web. You can save an image as a JPG or GIF and set the JPG quality or GIF number of colors. The command will also reduce the DPI (dots per inch) to 72 DPI; print file sizes are a much larger 300 DPI or more. Remember that each time you resave a JPG for the Web, the image loses some of its quality so it’s best to resave the original image, such as a Photoshop PSD file. The software tool should let you preview the result of your choices.
In addition to optimizing for the Web, images can also be resized and/or cropped. An image should never be dragged to be smaller in the HTML editor since the page will have to resize it every time it loads. Resize an image in a photo editor and then save it into the Web site.
Raster and Vector Files
If you have an image designed in Photoshop, Illustrator or another high-end software tool, its native format is raster or vector. In raster format files (such as the ones created in Photoshop), the information is stored pixel by pixel. Vector image information is stored in a totally different way, involving math coordinates. The reason that matters lies in resizing an image. A vector image can be sized to be larger and still looks crisp; a raster image will get jagged or “pixilated” when resized to be larger. If you are creating a raster image in Photoshop, perhaps a text slogan for your site, create it quite large so you can reduce the size as needed and still keep clean edges. Enlarging raster files makes the edges very ragged. Remember to optimize for the Web.