Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Understanding Graphics and the Web

Before heading off into the final frontier, you've gotta take some time and prep for your mission. Let's start at the beginning. When the World Wide Web was conceived, it was built to handle only text-based documents. But obviously, the web has grown far beyond that, making it primarily a visual environment. This is why graphics are so important in web design. In fact, you'll discover that graphics are used everywhere: navigation bars, bullet points, buttons, icons, and more. Just surf the web a bit, and you'll see how vitally important graphics are to web design.

Now before stepping onto the launch pad, you need to understand a few fundamentals: namely, the difference between the two main types of graphicsraster and vectorand the types of image file formats that you can use in your site. We'll talk about these issues (and a few others); then you'll begin to learn how to use graphics in your site. Sit back and enjoy the mission briefingyou'll be in low earth orbit in a matter of pages!

Graphics Come in Two Flavors: Raster and Vector

Chapter 1, when we discussed the web design puzzle, but that was way back when you'd just signed up for flight school, so here's a little refresher.

Graphics are used everywhere on the web: navigation bars, bullet points, buttons, icons, and more.

Raster graphics are pixel-based images such as photographs, artwork, film stills, or any image that you've scanned into your computer. Because they're pixel-based, issues like resolution, quality, and file size may be problemsunless you have a fairly good foothold on how these things work.

When I first found out that vector images were math based, I nearly fell off my chair. Whatwas I supposed to draw with a calculator in hand? Thankfully, vector-drawing programs handle all the math in the background, so you don't have to see it.

Raster graphics are made up of a grid of pixels, like tiles in a mosaic. Maybe Buzz and the gang found ancient mosaics on the moonoh, conspiracy!

Vector graphics, on the other hand, comprise images such as logos, clip art, line drawings, cartoons, or any other image that's made up of solid areas of color. Rather than pixels, vector graphics consist of mathematical lines, curves and arcs. Because math is being used instead of pixels, quality is never an issue, and file sizes are much more manageable.

Vector images, like this cartoon space capsule, are composed of mathematically calculated lines and arcs. No calculator needed, thank goodness!

The differences between raster and vector graphics should be fairly straightforward. But there is a sticky spot. All the graphics that you want to use on your web site must be raster images, unless you're building a Flash-based web site (which we're not doing here). So what if you have a vector-based logo or line drawing that you want to use in your site? Well, you'll have to convert it to a raster image and save it in a file format suitable for the web. To do that, just open your vector image in a raster image editor, like Photoshop or Fireworks, to commit it to pixels. And as for file formats, keep readin'!

Noteworthy

Macromedia Flash is a vector-based design tool that's really turned web design on it's ear, allowing you to nearly forget abou104 and traditional web design and build pages in a much more visual environment. Flash has a fairly steep learning curve, but if you want to take your web design skills further, it's well worth getting into.

File Formats for the Web

There are a lot of graphic file formats out thereso many that you'd easily run out of fingers and toes a few times over. However, you'll use JPEG and GIF images for most of your graphics work. You may sometimes use PNG, though earlier versions of Internet Explorer and Netscape do not support it, and SWF, though the user must have Flash Player installed to view graphics saved in that format (98 percent of all computers have some version of Flash Player installed). Internet Explorer and Firefox (at least the Windows versions) also support BMP and TIF images; however, considering the size of most TIF and BMP images, it is a good idea to use a graphics editor and convert them to JPG, PNG, or GIF. All other graphic file formats that you may encounter will not be usable in your web site. If you have an image in a different format, you'll have to resave it, most likely as a JPEG or GIF file.

You'll use JPEG and GIF images for most of your graphics work.

The JPEG Format

The JPEG (Joint Photographic Experts Group) format was built to handle images that are made up of millions of colors, making it perfect for images like photos or artworkin other words, raster images. JPEGs apply compression to your images to help keep the file size small, but image quality is sacrificed to do so. This means that if a high amount of compression is used, a small file size may be achieved, but this will result in a fairly poor-quality image.

Noteworthy

Think of file formats as different tools that can perform different tasks. Some may support millions of colors, while others may support animation or transparency. The file format you choose will depend on what you're trying to achieve.

The JPEG file format reduces an image's file size by applying quality compression to it. Compression is measured on a scale from 0 (low quality) to 12 (maximum quality).

Therefore, you'll always be striking a balance between an image's file size and it's quality. This process is called image optimization, and it's a process that you'll probably go through with each image that you want to use in your site. For more on image optimization, see "Prepping Your Graphics" later in this chapter.

The GIF Format

Like JPEG, the GIF (Graphic Interchange Format) file format compresses images, but GIF does so by controlling the number of colors used in the image, up to a maximum of 256 (the fewer the colors, the smaller the file size). Because photos and artwork use a huge number of colors, GIF isn't well suited for those types of images. Instead, GIF is suitable for anything that has a simple color makeupvector images that need to be rasterized for use on your site.

Imminent Doom

Because the JPEG file format sacrifices quality for file size, every time you open a JPEG in your image editing program, change it, and then resave it as a JPEG file, you're re-applying compression to your image. Repeatedly doing this will eventually result in a very poor qualityand practically unusableimage.

When GIF is on the case, you can minimize an image's file size by specifying the number of colors used. This isn't so hot for graphics that use a lot of colorsfor instance, photosbut it's perfect for images that use only a few colors.

JPEG files may use either the .jpg or .jpeg file extension. Either way, they work the same.

GIF also has a few other tricks up its sleeve. For one, the GIF file format supports animation. An animated GIF image would actually contain several graphics that play in sequence, just like a flipbook. They were all the rage way back in Galileo's time, but with the advent of Flash, animated GIFs are pretty much washed up and outta work. You can also use GIF files when you want transparency in your image. Transparency is most useful when you want your image's background to be clear rather than white, so that your web page's background shows through.

Imminent Doom

Saving a photo using the GIF file format will usually result in a very poor quality image. Remember that GIF removes color from images to reduce file sizeand photos use millions of colors.

Using the wrong file format for the job can result in some less desirable results. The Buzz on the right looks greathe's using the JPEG file format. But the Buzz on the left is lookin' a little homesickthis is because GIF has removed all but a few colors.

[View full size image]

The PNG Format

The up-and-comer in web graphics is the PNG (Portable Network Group) file format. It comes loaded with features that give both JPEG and GIF a run for their money. Just like GIF, PNG supports transparency, and like JPEG, it can handle a variety of color methods. This makes PNG a sort of "best of" compilation for JPEG and GIF settings, making it perfect for both raster and vector-based images.

Read all about the PNG file format at [webmonkey.wired.com/webmonkey/99/09/index085?tw=design].

So why not ditch JPEG and GIF and go with PNG for all your web graphics? Well, the bumble-bee in PNG's flight suit is that not all its features are fully supported by major web browsers yet. PNG can do quite a bit, but your visitors may not be able to see its handiwork, so it's best to stick with JPEG and GIF, at least for now. But keep your eye on PNGit promises to be one heck of a file format, and with support from the World Wide Web Consortium and the major software vendors, it won't be long until PNG images are firing on all cylinders.

The SWF Format

The SWF (Shockwave Flash) file format is used when exporting Flash files for use on the web. A great feature of the SWF format is that it's vector based, keeping file size very small. The only catch is that the visitor must have the Flash Player plug-in installed, so the browser can display SWF filesbut nearly all web browser these days have the Flash Player plug-in, so incorporating Flash content into your site is not nearly the problem it used to be.

Flash was originally intended to create animations for the web. But pioneering designers realized that an animation can be a single frame, allowing them to create static, scalable vector graphics. In addition, SWF files can even contain raster images, MP3 quality audio, and short video clips, broadening the possibilities even further. In fact, Flash is now often used to create full applications.

You gotta love Flash, which means you gotta love the SWF format, which is the go-between for getting your animations out of Flash and into Dreamweaver.

Image Resolution Revealed

One of the most difficult aspects of working with graphics on the web is wrapping your brain around image resolution. This can be a complicated subject, and all the misinformation out there makes it even tougher to understand. So before going any further, let's take a quick look at how image resolution works.

Raster images possess a quality setting, called the image's resolution, usually defined in dots per inch. The higher an image's DPI, the better the image quality, and the larger the file size.

As mentioned earlier, at least for now, all the images on your web site will be raster graphics, and you'll be sticking with JPEGs and GIFs. These two file formats build images out of a gridor mapof pixels (which is why they're called bitmaps).

Raster images also possess a quality setting, called the image's resolution. Resolution can be defined in several ways, but the most common is DPI, or dots per inch. Theoretically, the higher an image's resolution, or DPI, the better the image quality, and thus the larger the file size. Standard resolution in the print world is 300 DPI, but we're in the web design world here, so you're about to catch a lucky break. All images in your web site need be only 72 DPI, which also means they will have nice, small file sizes. Why 72 DPI? Because that's the maximum resolution that most consumer-grade monitors can display.

Imminent Doom

Using images in your web site that have a resolution higher than 72 DPI will not improve the image's quality. You're still viewing the image through a 72-DPI interface: your monitor. Using a higher DPI will only bloat your image's file size, resulting in an unnecessarily slow download time.

Prepping Your Graphics

Because graphics make up the heaviest part of a page's download, it's important to prepare them properly for use on the web. Preparing your images for use on the web is called image optimization. Image optimization is the process of balancing an image's quality with its file size, and if you ignore image optimization, you're likely in for a crash landing. Because the web is all about speed, you'll want your images firing off the launch pad as quickly as they can. This means that your file sizes will have to be as small as possible, while still keeping your images looking good.

You'll be optimizing your images in your graphics program of choice. (See the sidebar "The Lowdown on Image Editors" in Chapter 1 for a discussion of the image editors available.) I use ImageReady (which comes with Photoshop) for optimizing, but you may prefer a different program, such as Fireworks or Paint Shop Pro. Regardless of the graphics program you use, the overall process is the same.

Here's how to optimize your images:

Keep in mind that image optimization is a bit of an art. If you find your graphics looking poopy, try again and keep at it. The more images you optimize, the better you'll get at it.