- Bring On the Art!
- Get Your Files Here
- Define the Chapter 4 Website
- Image File Formats for the Web
- Project 4.1 Prototyping and Designing with Background Images
- Project 4.2 Inserting and Editing Images
- Project 4.3 Floating Images into Position
- Project 4.4 Creating Structured Layouts with Images
- Project 4.5 Styling the Header Area
- Challenge! Create Your Own Design with Photoshop
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Image File Formats for the Web
ACA Objective 2.4
Deciding on the right kind of image to include in a web page goes beyond simply getting the best picture available and sticking it on a page—although making that choice can be a huge chore in itself. You also need to understand which types of files will be displayed properly by the viewer’s browser and which type is most appropriate for the kind of image you are adding.
At the most basic level, it’s pretty simple. Web browsers can display three file types:
GIF (Graphics Interchange Format) images have filenames that end with the .gif file extension. GIFs can display a limited number of colors, which makes them very efficient. GIFs are a great choice for graphics—such as logos, illustrations, navigation bars, and other design elements—that don’t require colors with subtle shades. GIFs can have a transparent background, and of course you can animate GIFs to create miniature movies. How else would we be able to see cats playing pianos?
JPEG (Joint Photographic Experts Group) files use the .jpg or .jpeg extension, and as you can probably guess, this format is best used for photographs and other images with thousands or millions of colors. JPEG images can be compressed by changing quality settings in an image editor to get smaller file sizes. Web designers often compare different quality settings in Photoshop, for instance, until they achieve a good balance between how good the image looks and its file size. JPEGs cannot have transparent areas and cannot be animated.
PNG (Portable Network Graphics) was specifically developed for use on the web. The cartoon character images you’ve been provided all use the PNG format because images in this format can display transparency, sharp edges, and color changes—like a GIF—but still allow for subtle shades of colors like a JPEG. PNG files are by far the most common file type used by modern web designers.
All these file types are in the family of images known as bitmaps. In a bitmap, every color in the image is defined as a tiny block of data with a color value and other properties. If you’ve ever zoomed way in on a digital image, you’ve seen those individual blocks magnified and seen how the image is composed.
Every image in a web page must be downloaded from a remote server somewhere, which makes image file weight—the size of the file as measured by how much data it holds—almost as important as how it looks. Large image files are one of the primary culprits when a page loads slowly—for example, inserting an image that weighs 500 KB versus one that weighs 100 KB.
This process of choosing the right file type and adjusting image properties (to get a small file size that still looks good) is known as optimization. Adobe makes Photoshop for editing and optimizing images. The best method for working with images is to compose and edit the images in a graphics editor and then export a version that has been optimized for viewing on the web.
Whether or not you’re optimizing your images or you’re working with a graphic designer who will prepare the images while you take on the coding duties, you do need to know the kind of images that are appropriate for different applications. Smart designers always work with a source Photoshop file and never work directly on an image file or photograph without having a backup.