Basic: Working with Images Tutorial

Among the greatest challenges in Web design are image creation and manipulation. In this tutorial we will tackle the job of working with the two primary Web image file types: .gif and .jpeg or .jpg for short.

PNG Files
There is one other file format used on the Web, .png, however, this file format has not proven to be very popular. There are very few images saved in this format, primarily because most people don't know how to optimize PNG files properly. PNG files can be saved in 8 bit (256 colors) or 24 bit color (16.7 million colors), you can create animations, transparancy or photographs so it's a very versatile and flexible format.

Gif File Format

The Gif or Graphics Interchange File format is owned by Compuserve and is actually copyrighted, but as long as you use software that has an agreement with Compuserve (such as PhotoShop) then you are ok to use the format. The GIF file format is ideal for images with large areas of color, flat color shapes and text. You can also create images with transparency and multiple frames (animations).

Gifs are limited to 256 colors or 8 bit color so they are not ideal for photographs or gradients with lots of colors. They also don't do well on images that are using alpha transparency, for example, you have an image with a few colors in it and you have a background color in a layer beneath it. Let's say you want to use that image as a background image for a table cell with text on top of it; you would have to make the top layer transparent to make sure that the text you place above it will be readable. An image like this would be much, much larger as a gif image than a comparable jpeg image.

See the examples following file formats to see for yourself. In addition, Gif files also tend to be larger than jpeg files if there is a lot of color in the image, while jpeg images tend to be larger than gif images if there are a lot of straight edges or areas of flat colros in the image such as with text or images converted to jpeg from vector files.

Vector Images
A vecotor file is an image file that is drawn with mathematical equations rather than square pixels. Vector files can be expanded or contracted to just about any size without loss of quality or a substantial increase in file size. They are ideal for logos, print and poster or even billboard sized files. Adobe Illustrator, Macromedia Flash and Macromedia Freehand are a few examples of programs that create vector images. Due to the large areas of flat color that vector images produce it is usually best to save them as gif files but this depends on the number of colors or the extent of the gradients in the image.

JPEG File Format

The JPEG or Joint Photographic Experts Group file format is not copyrighted and is the most widely used, traded and distributed file format in history. There are literally trillions of them out there in cyberspace and on people's computers and digital cameras (the primary file format used by digital cameras). Jpeg images are limited to 16.7 million colors so they are ideal for photographs. Currently Jpegs don't support transparency or animation (unless you use JavaScript with Jpeg images such as in a slide show).

Jpegs use a compression algorithm to remove redundant pixel (picture element) data by comparing pixels with neighboring pixels which results in a smaller image. The greater the compression you apply to the image the smaller the image becomes. Since this compression is lossy compression it looses information and therefore looses quality.

Gifs also have lossy compression available in higher end image editors like PhotoShop, but the compression isn't very effective and doesn't gain much in the way of file size reduction plus you loose a lot of quality since the compression introduces streaks to the image.

You should avoid compressing Jpeg images beyond 40% in PhotoShop since pixelation and excessive blurring will result.

See the following images to make a comparison, the images on the left are Gifs while the images on the right are Jpegs:


<16K GIF Image: note that this photo is larger than the JPEG image and has noticeable banding in the sky.	<5K JPEG Image: note that this image is smaller and of a much higher quality than the GIF image.

<3K GIF Image: note that this image has nice clean sharp lines and that the image is a little smaller than the JPEG version.	<4K JPEG Image: note that this image is larger and is a poorer quality than the GIF image, also note the pixelation.

<4K GIF Image: this image is very clean and almost 1/2 the size of the JPEG.	<7K JPEG Image: this image is a little blurry and larger than the GIF image.

>10K GIF Image: this image is very clean but quite large in file size considering it is a vector-based image type.	<4K JPEG Image: this image looks vertually the same as the GIF but is almost 3x smaller.

Breaking the Rules

This tutorial is designed to give you some rules to creating images for the Web by they are more like guidelines, rules are meant to be broken and it is no more true than with image optimization. For every image that fits the rules there are lots of images that don't fit the rules so be sure to check the file sizes out when you export for the Web.

Web Site Font Type

Whenever possible, always use actual text (like the text you see here) for Web site content. It loads instantly (you may have noticed it was the first thing that loaded on this page) and search engines can read the text as well. Do not use text you generated in an image editor, it takes longer to dowload the image and it's just unnessary. But since there are fewer than a 1/2 dozen Web-safe fonts available, there are lots of situations where you will want to emulate a special font used in a logo or heading. It is best to use Gif format for this whenever possible.

When you are confronted with a mixed image in PhotoShop, such as text on top of a photograph, then you should use the Jpeg format whenever possible, chances are the image will be smaller and of a higher quality. If you are breaking up a Web interface into smaller pieces such as buttons and a header, you should pay close attention to the sizes of the slices when you export them. To learn more about sliceing up images in PhotoShop see our Intermediate Interface Development tutorial.

Tutorials

For more details about working with images in Photoshop choose one of the following tutorials:

Free, high quality Web design tutorials (no strings attached, supported by our sponsors)
Program of instruction designed by a college instructor (SMCC Video & Multimedia Program)
Step-by-step learning
Gallery of examples to view (see Gallery)
Learn as you go
Several DreamWeaver templates and PhotoShop templates to work with (coming soon!).
Focused Flash demonstrations that highlight step-bystep instructions

Basic: Working with Images Tutorial

Welcome...

We Offer: