Join James Williamson for an in-depth discussion in this video Understanding image types, part of Dreamweaver CS5 Essential Training.
- View Offline
When creating images for the Web, it is important to understand which types of images you can use online and when it's appropriate to use one over the other. Determining which file type to use is usually a decision made after considering file size and functionality. For online graphics, your goal is always going to be obtaining the best image quality in the smallest file size possible. Understanding how file types are compressed and best practices for creating them will help you keep your image quality high or keeping file size down.
Before we discuss how Dreamweaver manages images, let's first examine the three file types you'll be using when creating your Web graphics: JPGs, GIFs and PNGs. JPG is short for Joint Photographic Experts Group and is a standard that has been around in one form or another since about 1992. The JPG file format allows you to create images with millions of colors, which makes it an ideal choice for photographs or images with subtle color differences. The downside to using JPGs is that, when saved, a lossy compression is used to save file size, resulting in image data being thrown away.
Although, you can choose the amount of compression when saving a JPG, data is discarded each and every time it is saved. For that reason, it's a good idea to save your original image in a file format other than JPG and simply overwrite the original JPG when a change is made to the source graphic. Also, JPGs do not support transparency or animation, which may make them unsuitable for certain uses. The GIF, short for Graphics Interchange Format, file format was first introduced by CompuServe in 1987 and quickly became a staple for online graphics.
Unlike the 24-bit JPG format, GIFs are 8- bits, which limits the color palette of GIF files to a maximum of 256 colors. Now GIFs do have the advantage of using a lossless compression format, which reduces file size without damaging image quality. GIFs also support animation and transparency, making them the favorite file format of icons and dancing babies worldwide. Due to their limited palette, GIFs are not well suited for images that have subtle tonal shifts or a wide range of color.
They are however, ideal for smaller thumbnails or images that have large areas of solid colors. PNG stands for Portable Network Graphics and owes its existence to the very curious case of Unisys, holding the patent for the compression algorithm used in GIFs in 1995. PNGs were designed to replace GIFs and share many of the GIF file format strings, but they have added functionality. PNGs, like GIFs, support transparency and use lossless compression to achieve smaller file sizes.
Unlike GIFs however, PNGs files are 24- bit graphics, which allow them to display millions of colors and subtle tonal shifts without using dithering or banding. So which file format should you use? Well, honestly it depends on each individual image and how that image is going to be used within your files. As a general rule, JPGs are best for large images and photographs, specifically images that have lots of color and detail. High compression settings can cause serious image degradation, so it's best to compare image quality and compression for each image before deciding on an export setting for your JPG.
As a best practice, remember to keep a source image for your JPG so that you're not editing and overwriting the JPG itself. JPG image quality degrades each time it saved, and this could result in an unusable image over time if saved over and over itself. GIFs are great for thumbnails, small icons or images that contain large areas of solid colors. They're also a standard image type for any image needing transparency or limited animation. Now keep in mind that GIFs do have a limited palette, so complex images with lots of color or tonal shifts like gradients, can suffer when saved as GIFs.
PNGs also have all the advantages of GIFs, without the liabilities. PNGs feature full 24-bit support, so millions of colors can be saved along with transparency. The downside to using PNGs is they tend, on average, to be a little bit bigger than GIFs and JPGs, so heavy use of them throughout your site tends to add to the site's overall weight. Older browsers support was spotty at best. So for Legacy sites or sites that target older browsers, PNGs files are not a good choice. Also, Internet Explorer 6 did not support transparency for PNGs, resulting in having to write some pretty fancy CSS to force PNG transparency support.
As a whole, PNG usage is rapidly increasing on the Web, but if used, the file format is usually used to supplement graphics on sites or to do things that JPGs and GIFs just can't. In the end, the file format you use for Web graphics is totally up to you. Knowing more about the file types and their capabilities will help you make an informed choice.
- Defining and structuring a new site
- Creating new web documents from scratch or from templates
- Adding and formatting text
- Understanding style sheet basics
- Placing and styling images
- Creating links to internal pages and external web sites
- Controlling page layout with CSS
- Building and styling forms
- Reusing web content with templates
- Adding interactivity
- Working with Flash and video