Books @ HTML Source
Fundamental Web Design and Development SkillsExtract: Chapter 5: Creating Graphics for the WebAs we mentioned in Chapter 1, graphics were not part of the initial HTML specification. However, it’s hard to imagine the Web now without them. All you have to do is remember the infamous coffee pot mentioned in Chapter 1 to see what an impact images can make. Can you imagine eBay or Amazon without any graphics? The aim of having graphics on a web page is to enhance a site, making it more aesthetically pleasing and exciting, and more comprehensible by site visitors. A picture can quite literally take the place of a thousand words in its ability to communicate a message or make a first impression. Also, many web surfers skim web pages for the information they need — graphics may grab their attention more than words do. There are now many different formats that graphics can take, whether they are static graphics formats or animated ones. In this chapter, we’ll take a look at:
Before all this, however, we’ll take a quick look at one particular aspect of images: color. ColorWe’ve already seen some use of color in this book — recall the first HTML example in Chapter 2 where we changed the color of some text:
Alternatively, in older pages, you may see the deprecated <font> tag used like this:
In both cases, we’re setting the color to the value #336699. What does this mean? This value is in RGB Hexadecimal format, where RGB stands for Red Green Blue. After the first #, the next two characters relate to an amount of red, the second two characters relate to an amount of green, and the third two characters relate to an amount of blue. When these amounts of red, green, and blue are mixed together, you get your final color. Since it is a hexadecimal format, the characters used range from 0 to f, with 00 being the smallest two-character value and ff being the largest. Thus, #000000 corresponds to black (the absence of all color) and #ffffff corresponds to white. There are also sixteen common color names that can be used as values for the color property/attribute, since they are specified within the HTML and XHTML recommendations. These are black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red, blue, purple, teal, fuchsia, and aqua. Web-Safe ColorsIn the early days of web design, sticking to what was dubbed the web-safe color palette of 216 colors was a crucial technique to master. This was the limited matrix of colors that the majority of browsers and graphics cards could support at the time without dithering. Books were written wholly based on creating with these colors, theories of various palettes discussed, and workarounds developed. However, with the majority of users now using monitors and their accompanying graphics cards that can display more than 256 colors, it’s much less of a priority. Some argue there’s no need to discuss it at all. Dithering is a technique where various patterns of different colors are used to appear as other colors, especially when seen from a distance. As a designer, you may have to design for PDA screens and cell phones that are still limited in their color depth, and so may want to at least be conscious of the existence and importance of the web-safe color palette. Those that are required to design accessible web sites may also want to stick to the lowest common denominator of designing for low-end monitors, and will want to keep their palettes limited to this library of colors for best visual and legal results. Fortunately, there is still good support for the web-safe color palette in modern graphics packages. For example:
Gamma and GraphicsGamma is a term that refers to the way that the midtones of an image relate to the dark and light parts of an image, as well as the image’s relation to its surroundings. It was initially a term that applied to television screens, since it was a setting that manufactures had to adjust because people watched televisions in dimly lit rooms at home, rather than bright showrooms in which they were purchased. These days when we hear the word gamma, it is in reference to our computer monitors. It is generally known that images appear lighter on Macintosh computers than on Windows computers. Depending on the web site, it may be no big deal or may make a page look significantly different. In a media in which standardization is an aim, this is a difficult challenge to take on. If designers make all their images on a Macintosh, and the majority of their clients and site visitors view the Web through a PC, the site could look so different as to make it unreadable or unattractive. Hues in images may appear in non-realistic shades, perhaps more red or green or blue being added to an image than was originally designed, or there may be a resulting lack of contrast on a page, making it difficult to read. See Chapter 10 for a further discussion of gamma. Bitmap Web Graphics FormatsThe graphics formats we will mainly look at in this chapter are:
These are all bitmap formats. Basically, this means that they are built up as rows and columns of dots or pixels, for each of which a color is specified. In creating web graphics, the priority is to make graphic files (and therefore, the entire web page) smaller in size, in order to give fast access to content. The design community, used to creating huge graphics files for high-resolution printing, first found this teeny-file-making to be a challenge, especially given the initial limitations of screen and browser resolutions back in the early days of the Web. Much of the difference between the various bitmap graphic formats revolves around how they compress images in file size. GIFsGIF (Graphics Interchange Format, pronounced with either a hard or soft G depending on who you ask) images are made with what is called substitution compression, or LZW compression (after Lempel-Ziv-Welch). For the non-algorithmic among us, here’s a simplified explanation of its algorithm. If the GIF algorithm comes across several parts of an image that are sequentially the same, it substitutes them with just one of the parts, and stores a key to (or description of) the substitution it has made with the image. When viewed, the GIF image is “decoded” and we can see it. Clear as mud? Let’s look at an example, but remember that this explanation isn’t meant to replace a technical white-paper explanation of GIF algorithms by any means; it’s simply to illustrate in layman’s terms how space is saved. Say our image is represented by numbers, rather than pixels:
If we think of this in English, anywhere a pattern emerges, whether it’s a series of the same numbers in a row, or a sequence of numbers that has been repeated, we can save space by “describing it” rather than “repeating it". For example, we can say the first line of our example above is:
or we can substitute that by saying
This obviously takes up a lot less space! The resulting size of a GIF depends on the amount of repetition within an image. Therefore, even if two images have the same number of colors and have the same dimensions, the image with more pixels in sequence (the flatter image) will be a smaller file when saved as a GIF. Both of these examples are 300 by 300 pixels, made up of the same three colors. However, the flowery one is about three times the size of the blocky one. The simpler sequence of pixels (and therefore the amount of information necessary to explain and display it) in the second image results in a more compressed image. The lesson to learn here is that the GIF’s compression scheme works ideally on images with flat colors, rather than photographs or images with a lot of dithering, which compress better with other methods. Other points to note about GIF compression are:
To GIF, or Not to GIF?GIF formatted images have been used for years, long before the Web became a household entity. It was developed by CompuServe as a graphics compression method back in the late 1980s. CompuServe released GIF as an open and free specification in 1987, and it quickly became accepted worldwide as an ideal way to save images so that they would transfer more quickly over slow modems between CompuServe users and others online. It also became a standard for developers of image creation/manipulation software, who added its compression scheme to their libraries for common use. However, GIF uses someone else’s compression scheme. Unisys, a technology services company, holds the patent on the LZW algorithm, and after some investigation, it appeared that neither the folks at CompuServe that developed GIF (or anyone else for that matter) knew that there was a patent on LZW until Unisys brought it to their attention. In December 1994, CompuServe and Unisys announced that developers would have to pay a license fee in order to continue to use technology that supported the GIF format. GIF isn’t the only compression standard that uses LZW, and Unisys had never pursued licensing of its algorithm before. However, what became the first widespread online graphics format, and the first format to hit the Web, was soon threatened with removal unless paid for — or so the public thought. While the statement never said that GIF images had to be destroyed or taken down from online libraries or web pages, or that user of software that saved in GIF format needed to pay, numerous online libraries were purged of GIF files out of fear. In protest, there were passionate uproars of dissent from the online and development community. After lots of confusion and back-and-forth negotiations, it was decided that those developers of software that save images to GIF format (or other formats that use the LZW compression algorithm, such as TIFF), such as Macromedia and Adobe, are the targets of the Unisys licensing fee. PNGs to the Rescue?In reaction to the whole “LZW patent” controversy, in January 1995 CompuServe affirmed its objective to coordinate the development of GIF24, a freely usable successor to GIF, capable of 24-bit (16.7-million-color) lossless compression. Intent on solving the Unisys patent problem, several developers delved into projects and eventually came up with a convergence of GIF24 and other projects into what became PNG, or Portable Network Graphics. In light of the patent problem, some developers proclaimed that PNG also stands for “PNG is Not GIF". The most impressive feature of PNG graphics is their support for alpha transparency, which allows designers to include effects like drop-shadows and anti-aliasing against any background, unlike GIF or JPEG. PNG is now supported by most of the recent browser versions, although Internet Explorer (the most popular of browsers) still doesn’t support its alpha channel features. As a result of this, PNG still isn’t a high priority for web designers, with GIF still taking center stage, even though the W3C officially endorsed PNG as the format to replace GIF quite a while ago. Anti-aliasing is a method for reducing jagged lines within images that should, in reality, be straight. In addition, GIF got another big hurrah when the major browsers added support for GIF animations back in the mid 1990s. GIF animations (simple animations that are built with a series of GIF images) caught on like wildfire and we are still inundated with GIF-animated banners, buttons, and gimmicks nearly every time we land on a web page, commercial or not. Even though MNG files, or animated PNGs, were then developed in response, it was too little too late — the simplicity of creating a GIF animation along with the slow adoption of PNG-based formats by browsers practically makes it seem like PNG is non-existent. JPEGsJPEG is an acronym of Joint Photographic Experts Group, pronounced jay-peg. One of the reasons for choosing JPEG format images over GIF format images is that it lets you save images with millions of different colors (it is 24-bit, meaning 16.7 million colors), rather than just 256 or less. JPEG also generally compresses a file much smaller than a GIF, which means faster downloading time. That’s all well and good, but there are some downsides. First, unlike GIF, JPEG does not support transparency or animation. Second, and more importantly, JPEG uses lossy compression. Lossy compression means that the image literally loses colors in order to compress an image, and does its best to use the remaining colors as a substitute. The more you compress a JPEG, the more colors it will lose, and therefore the fuzzier or wobblier the image looks. For this reason, the format works best with photographs or other graphics with many subtle changes in color, since the scope of colors that can be removed is larger. It doesn’t work well for things like “blocky” images or images containing text. Let’s look at an example. Here is an image of Lance Armstrong in the Lance Armstrong Foundation’s Kids’ Fun Race at 100 percent quality. The file is a 208K JPEG, and very high quality. In most applications that save JPEGs, we are able to specify the percentage quality we require (which the software interprets as a level of compression wanted in the image). At 50 percent quality, the image still looks great. However, its size is significantly smaller — only 50K. This is still a bit big for slower online connections, such as dial-up modems. At 20 percent quality, it is very apparent that the quality of the image is being sacrificed, but the image is 30K. Finally, below you can see the same image at 5 percent quality, to demonstrate how bad a JPEG can get. The image is now only 18K, but note the blockiness of the shadows, and the bad edges of the windows and buildings. Note the banding of colors where color was smoother at a higher quality, such as in the sky. Is a larger file size worth the better quality? This is the kind of consideration you have to make when deciding on the quality of images. Of course, the level of blockiness at lower quality will be different for each image, but in general, the lower the percentage of saving quality, the lower the visual quality. Just to compare, here’s the high-quality image saved as a web-safe GIF at its highest possible quality. At 119 colors, it weighs in at 94K: Depending on the photo, the GIF may not look all that bad until you take a look up close. Not the most flattering image we’ve seen: Looking closely at the high-end JPEG, we can see that it’s blocky, but the colors are much smoother than the GIF: Take a close-up look at the low-end JPEG: it’s easier to see the differences between the qualities of the JPG images here: This is subjective, of course: some would still prefer the low-end JPEG over the GIF, and some would prefer the other way around. This is why it is worth while spending time with images, seeing which look best at what levels, how colors match up to the original, and so on. The image itself is the first deciding factor, and your judgment is the final deciding factor. JPEG-Like FormatsProgressive JPEGs are a variation of the JPEG format in which the image seems to “fade in” gradually from a fuzzy bunch of blocks to a more detailed image, rather than being drawn on screen from top to bottom. The benefit is that the user can generally figure out what the image is before its full detail is drawn on the page, and therefore offers better and faster understanding of the page’s content. A newly proposed standard JPEG format is JPEG2000, an image-coding system that uses compression techniques based on wavelet technology. Given its resulting smaller images with better quality, the new compression scheme is intended to be used not only on the Web, but in digital camera image storage, digital pre-press, high-end medical imaging, and other image-dependent fields and uses. However, ongoing patent disputes and disagreements about its specs may keep JPEG2000 out of the picture for a while. Keep up with its developments at http://www.jpeg.org. Vector Graphics: Beyond BitmapsVector graphics differ from bitmap graphics in a very fundamental way: rather than specifying every single pixel within an image, the coordinates of specific points of the image are given. This has the great advantage of being easy to resize without losing any quality of the image and without increasing the file size. As the image “grows” in size, the coordinates of specific points of the image may change, but the number of points specified does not. The description of how the image looks in relation to the specified points remains the same as before. Let’s look at a very simple example: a straight line. A bitmap image would have to specify all the points on the line, so if we increase the size of the image, the number of points specified would increase. A vector graphic, however, would only need to specify the coordinates of the end points of the line and then say “join up these two points". If the image is increased in size, the end point coordinates will change, but the description of “join up these two points” won’t. Obviously, the larger the number of “end points” of an image, the more description is necessary. A file with more points to specify will be bigger, but generally it won’t be as big as the corresponding bitmap file. As I said above, vectors have the benefit over bitmap images that they can be resized without any loss in image quality. For example, consider the following image: If the image was stored in a vector format (such as SVG), and then resized, it would look like the image on the left below — it retains its original quality. However, if the image was stored in a bitmap format (such as GIF), and then resized, it would look like the image on the right:
Now we have looked at how vector graphics work, let’s look at some of the formats available to produce them. We will look at:
There are other formats available, including SMIL (Synchronized Multimedia Integration Language, see http://www.w3.org/AudioVideo/), but adoption of these is currently not very widespread. Macromedia FlashFlash has arguably been the most phenomenal software wave to hit the web-creative market in the last few years. Introduced first as FutureSplash, it became Flash in 1996. As a vector-based application that was developed along with its own web plugin for displaying its files, it soon became the pet of many a designer. However, as designers tend to do, we pushed Flash technology to its limits, and thereby created larger-than-huge web sites based on Flash. With its amazing capabilities to combine animation, text, and full-fledged stereo disco techno-beat soundtracks, it was hard to resist putting in every element that we could possibly fit into our files. So for a while, Flash wasn’t fulfilling its promise, at least to web users. The plugin took a long time to download and a large proportion of Flash files were multi-megabytes, which added up to a long wait when on a modem connection. Quite a few sites that used the same old bmphditty bmphditty bmph soundtrack accompaniment to an annoying superfluous intro movie soon made us scramble for the skip intro link, if the designer had deemed to include it. Flash remained a favorite of designers, but there were a number of accessibility and usability challenges to overcome. Luckily for us, many of them have now been overcome. These days, smart designers apply the same principles of design and content presentation and management to Flash as they do to other content, and sites based on Flash become cool again. SVGSVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics using an XML vocabulary. While not something you’ll probably be working with any time soon on a regular basis, there are mentions of it often enough to warrant attention, and it has been recommended as a standard for web graphics by the W3C (see http://www.w3.org/Graphics/SVG/). Applications that create SVG images are still few and far between, but among them are Jasc WebDraw, Adobe GoLive, Adobe Illustrator, and CorelDraw 10. Like CSS and other text-based standards, SVG is created using plain text that can then be embedded into HTML files. The benefit of describing images in this fashion makes for smaller overall web page download sizes, and faster loading pages. And again, because SVG images are vector format graphics, rather than bitmaps, they can be made larger or smaller and still retain their good looks. Compared to the Macromedia Flash Player, however, Adobe’s SVG Viewer — the one plugin that supports SVG on the Web — has an almost non-existent user base. Flash boasts nearly 98 percent of all web users have a version of Flash Player installed, whereas Adobe’s SVG Viewer is one of those applications most haven’t heard of. Graphics ApplicationsThere are various applications available to help us create graphics for the Web. Fireworks MX is Macromedia’s graphics application, a trial version of which is included on the accompanying CD. It has the advantage over other software that it allows you to create, edit, and resize both vector images and bitmap images, retaining quality throughout. Adobe Photoshop has been the most popular image manipulation program for designers since way back in 1990. In the past couple of major versions, Photoshop has added features such as web-safe color palettes, automated GIF animation creation, image map and rollover assistance, Save for Web optimization, and now partners up with Adobe Image ready to add web-specific features such as Web Photo Gallery. This automates the process of creating basic web-based photo and image galleries. Its major downfall is its expense. At a suggested list price of over $600 US, it’s a sizable investment for the lone designer. Photoshop is available for both Windows and Macintosh platforms — see http://www.adobe.com for more information. Adobe Photoshop Elements is billed as a “digital camera companion” software package by Adobe, and includes a few features that are web publishing-specific, borrowed from full-fledged Photoshop. At $99 suggested US list price, Photoshop Elements is quite a bit more affordable than Photoshop. It’s available for both Windows and Mac, and 30-day free trial versions are available for download from http://www.adobe.com. Jasc Paint Shop Pro was among the first Windows applications to get a lot of web designer customers. Like Photoshop, Paint Shop Pro has a long history as a well-respected image manipulation program that found itself being used by designers to create quality images for the Web. Among other interesting options are patterned and graduated paint brushes, output to GIF, JPEG, and PNG, image slicing, rollover tools, GIF animation creation, and the ability to create and define image maps. Its main limitation is that it is only available for Windows. One of its best features, however, is that it’s very inexpensive: at just over $100 US, it’s tremendous value. Unlike the other applications mentioned here, the GIMP runs on Linux as well as having Mac and Windows versions. And to top it off, it’s free. It also gives the pay-for software a run for the money. Besides a full paint palette, GIMP supports GIF, JEPG, PNG, TIFF, MPEG, PDF, BMP, and many other file formats. It can be used as a full photo-image enhancement tool, as well as a web-graphics creation and manipulation tool. For more information or to download a copy of The GIMP, go to http://www.gimp.org or http://www.macgimp.org. SummaryNo matter how you slice them, graphics are one of the most important aspects of the Web. The challenge of the early days to make images small and retain their quality hasn’t changed, but applications and years of experimentation by designers have made reaching the goal a lot easier. While we haven’t delved into every application developed to create web graphics (it would take a book on each to be fair!), it’s important to note that there are a multitude of tools available for a designer, whether with a large or small budget. Knowing how to best take advantage of an application and create what a client wants with the tool you have is more crucial than purchasing the most expensive software. Be willing to experiment with various formats to achieve the best quality for your intended audience. Copyright glasshaus 2002 |
Read our review of Fundamental Web Design and Development Skills |
