Graphic Design Guide
There are a few special considerations you need to take into account when preparing graphics for the web. This section provides some insight into different types of web graphics, as well as how to create them and prepare them for the web.
Examples of Web Graphics
| Logo |  |
Logos are one of the most common uses of web graphics. Most websites have a logo on every page. Logos are usually created using illustration software, such as Adobe Illustrator, then exported to GIF format. |
| Photo |  |
Photos are becoming increasingly popular too, especially with so many digital cameras and camera phones available these days. Photos are usually either scanned into the computer, or imported directly from a digital camera. Once the photo is saved on the computer, you can make adjustments, re-size it, and then save it in JPEG format. |
| Icons |  |
Icons can help a website look more professional, as well as help users quickly identify the purpose of a link. Icons are usually created using illustration software, such as Adobe Illustrator, then exported to GIF format. |
| Decorative Image |  |
Decorative images are often used to do the bits that HTML and CSS can't do. For example, diagonal lines and rounded corners. Decorative images are also commonly used for repeating backgrounds on web pages.
Depending on the image, a decorative graphic can be created using illustration software such as Adobe Illustrator, or image editing software such as Photoshop or GIMP. It is then exported to GIF format. |
Displaying Web Graphics
Once an image has been created, it needs to be uploaded to a web server so that you can display it in your web pages. These are the steps you need to take in order to get a graphic to display on your website:
- Create the graphic
- Save it in a web format
- Upload it to a web server
- Embed the graphic into your web page (using HTML or CSS)
Which Graphics File Format is best to use?
Here are some general guidelines:
- If the images are for the Web or online, use JPEG, PNG, or GIF.
- If the images are for print, use TIFF.
- If you want to keep a version that remains editable, choose your software's native file format. (PSD for Photoshop, PSP for Paint Shop Pro, CPT for Corel Photo-Paint, etc.)
Here are brief descriptions of common web graphics file formats:
JPEG
is best for photos when you need to keep the file size small and don't mind giving up some quality for a significant reduction in size. JPEG is not suitable for images with text, large blocks of color, or simple shapes, because crisp lines will blur and colors can shift. Only JPEG offers the options of Baseline, Baseline Optimized, or Progressive.
- Baseline (Standard) - This JPEG format is recognized by all Web browsers.
- Baseline Optimized - This JPEG format option provides optimized color and slightly better compression. It is supported by all modern browsers, but was not supported in the very earliest of Web browsers. It's your best choice for JPEG files today
- Progressive - Creates a JPEG file that displays gradually as it downloads, starting out blocky, and gradually getting clearer as it downloads. It doesn't make the image download any faster, but it can give the illusion of speed since the blocky image is loaded right away on a slow connection. With the majority of internet users on high speed connections today, Progressive JPEG is rarely used
PNG
Use PNG when you need smaller file sizes with no loss in quality. PNG files are usually smaller than TIFFs, in my experience. PNG also supports alpha transparency (soft edges) and was developed to be a Web graphics replacement for GIF
GIF
Use GIF for simple Web graphics having limited colors. GIF files are always reduced to 256 unique colors or less and they make very small, fast-loading graphics for the Web. GIF is great for Web buttons, charts or diagrams, cartoon-like drawing, banners, and text headings. GIF is also used for small, compact Web animations. GIF should rarely be used for photos
