Formatting Graphics for the Web

Every website needs some graphic representation. Let’s say for instance you’re searching for a Florida vacation resort. You find a link and click on it. The first thing you see on the website is this beautiful picture of a beach; white sand, the ocean and a blue sky. It gets your attention right?

A description of the scene can summarize, but cannot replace an image. Images are used to establish a brand, a visual identity for a website. The purpose of including images is to provide information, establish context, and create a look and feel unique to that website.

Your eye is drawn to the images, they invite interpretation. When you look at a page with an image and text, your eye is drawn to the image first. We then try to interpret why it’s there and what it means. When the meaning and purpose of an image is clear, the images are communicating very well.

Although hundreds of graphic file formats exist, web browsers only support a few of them. These are the Graphic formats that are available to web designers.

The graphic file formats supported by most popular web browsers are; Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and vector graphics.

GIF

GIF originated in 1980 and was adopted by web designers in early 1990 as the preferred graphic format for web page design because of its efficiency and widespread familiarity. GIF files use LZW compression that keeps file sizes small for fast loading.

GIFs are limited to 256 colors (8 bits) and support transparency and interlaced graphics. It is also possible to create animated graphics using the GIF format. All browsers can display GIF files.

Advantages:

• Most widely supported graphic format.
• Diagrams look better in this format.
• Supports transparency.

JPEG

JPEG files are compressed and support “true color” (24 bit). JPEGs are the preferred format for photographers, artists and graphic designers where image quality matters. JPEG supports a progressive format that allows for an almost immediate image that will improve in quality as the image loads.

Unlike a GIF file, the compression for JPEG files produces a sliding scale of graphics compression, and can be controlled by the web designer, which allows for different levels of picture quality and file size. All browsers can display JPEG files.

Advantages:

• Larger compression means faster download speeds.
• Produces excellent quality for photographs and complex drawings.
• Supports 24-bit color.

PNG

PNG is a fairly recent format that was introduced as an alternative to GIF files. PNG supports up to 24 bit color, transparency, interlacing and can hold a short text description of the image’s content for use by search engines.

Unfortunately, most browsers do not support PNG and the ones that do support it, don’t support all of its features yet. This should change over the next few years, but do not make a commitment to PNG graphics until you are sure that most of your viewers are using browsers that support PNG.

Advantages:

• Overcomes the 8-bit color limitation of GIF.
• Allows text description of the image for search engine use.
• Supports transparency.
• Diagrams look better than they do in JPEG.

Vector Graphics

Most web graphics are raster images or bitmaps, which consist of a grid of colored pixels. Drawings and illustrations, used mainly for repeat backgrounds on websites, should be created as vector graphics with programs such as Adobe Illustrator and Macromedia Freehand. Vector graphics consist of mathematical descriptions for each element that make up the lines, shapes and colors of an image. These programs are the graphic artist’s choice for creating drawings. Vector graphics must be converted to GIF, JPEG or PNG format to be used and placed on a web page.

It is recommended that a web designer should choose to use either the GIF or JPEG format as these are supported by most internet browsers. However, since the file size of a GIF is usually smaller than the file size of a JPEG, most web designers tend to lean toward the GIF format for non-vector based background images, frames and any other graphical elements that look fine using 8-bit color.

Designers may select the JPEG format for photographs and illustrations where the compression doesn’t change the visual quality of the image.

As PNG becomes supported by most web browsers, it will probably replace GIF as the web designer’s choice for non-photographic page elements. However, GIF will still be used for animation.

swirl graphic  flikr

Flower Image:  SantaRosa OLD SKOOL

Fish Image  tarotastic