Cover | Table of Contents

Table of Contents

Chapter 1: You Must Have Fun

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Do you remember your very first web page? The first one you ever saw? I remember the first time I saw a web page. I'm not sure if such a memory is unusual, or if many people remember their first glance at what was to become ubiquitous in a very short time.

The time was late 1993 or early 1994. I was working at Intel as a contract software developer when one of the other developers asked me if I'd seen this application called Mosaic. I wasn't among the first to see this new type of application, but at that time the Web was still in its most primitive form. The first web page I saw had a white background, a larger, bolder header, and text formatted into several paragraphs. It wasn't anything special, and nothing to excite interest. However, in the page was a thing called a hypertext link, an underlined piece of text that, when clicked, opened another page—one on a completely different computer, connected to the first only by a domain-driven location.

The second site, like the first, was also incredibly simple. It featured the same black text on a white page, and the only typographical variation was the larger font for the titles. It was completely empty of any graphics. No CSS; no images or Flash; not even a FONT or BLINK. However, the two pages did demonstrate all that was critical about the Web: both pages were available to anyone with an Internet connection, each was at a specific location that could be called up again, and the pages were served through a coordination between server and client that was both unprecedented and mesmerizing.

What an odd way to begin a book about graphics: describing plain web pages completely devoid of any graphics. There is a purpose behind my madness. By describing this earliest glimpse of the Web, I hope to make an important point—that web graphics are not an essential component of the web experience. We can strip a page down to the most minimal markup without any use of Cascading Style Sheets (CSS), images, Scalar Vector Graphics (SVG), or Flash, and the page continues to be Web-like and useful.

Graphics are not necessary to the web experience. They can, however, add immeasurably to the richness of the Web, making the difference between a site that's lively, compelling, and exciting, and one that's merely functional. By looking at web graphics less as an essential component of the Web and more as an exhilarating companion and accessory, we can begin to free ourselves from the restrictions on, and requirements for, web graphics that have sprung up over the years, and to push against the "musts" that have constrained their use. Musts such as the following, for example:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

What Was Good Enough for Grandpappy…

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

A functional world might be efficient, but it's not terribly interesting. It would be like living on a diet of bananas, nut and seed granola bars, and vitamin water—it might keep you alive, but it wouldn't be fun in the long run. In the end, when functionality is pushed up against individuality and choice, individuality triumphs. Black cars were good enough for Ford, but not the rest of us. Black and white TV was useful, but we wanted In Living Color. The whole premise behind the iPhone is that one can never have too many color buttons to touch. The push for variety has been the forerunner for the overall evolution of any invention in the past, and the Web is no exception.

If all web pages were simple text, we wouldn't need the enhancements we've achieved in serving up web applications. We added graphics, though, which pushed the color requirements, as well as the sizes of pages. Our monitors improved, both in size and number of colors supported.

Then we thought, how nice it would be to be able to add interaction and animation to pages. We created animated GIFs, Flash, and JavaScript-driven effects, which attracted more people to more applications, increasing the demand on the Web yet again, leading to yet more improvements in the underlying technology.

Music. Did someone mention music? Music to download, music to share, music to create and publish online, and music to sell. In just a few short years, the iTunes, eMusics, and Amazons have redefined not only how we use the Web, but how we find, purchase, and listen to music.

Of course, now we're faced with the ultimate media: video, including complete movies being streamed from sites. Let's see, tonight I think I'll watch Core through Netflix. Or perhaps I'll watch Max Headroom through Joost.

Pop! There went the Web! None of this is essential to the Web, but having access to such things has become essential to us. Some would say it was the economy of the Web that pushed improvements in web services. I put such improvements firmly on the graphical goodies.

Which of the items mentioned, though, are web graphics, the topic of this book? Most people think of image files with extensions of JPEG, GIF, or PNG when they hear the term "web graphics." However, I consider anything that impacts the visualization of a web page, above and beyond the components that provide the initial structure, part of the family of web graphics. This includes:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Draw Me!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Back when matchbooks proliferated about as much as smokers welcome in restaurants, many of the matchbooks would have a picture of a clown or dog or some other character with the words, "Draw Me!" across the front. The matchbooks were put out by various art schools, and aspiring artists would do just that, sending in the result to get an evaluation of their skill. Evidently, to the schools, we all have a little artist in us because few people would be dissuaded from signing up for a course.

Figure : Matchbook cover with a picture of a dog and "Draw Me!"

One of the "musts" associated with web graphics is that we "must" be artists, or we "must" be designers, or even that we "must" have a degree or specialized training. Creating web graphics does require some artistic ability, but as the early matchbook art schools discovered, there's a little artist in all of us.

While a professional graphic artist may be necessary for many effects, it's not true for all. In fact, there are many effects that can be created with only a minimum of training, a little technology, and a willingness to give something new a shot.

For instance, later in the book I'll cover SVG, a way to create graphics using an XML vocabulary. The approach seems intimidating at first. How does one create a sophisticated graphic from simple primitive elements such as the following?

<circle r="6" cx="24" cy="16"/>

Yet there are by-the-number approaches one can take to make copies of an original design and then convert part or the whole to SVG, using a tool no more complex than a text editor.

Well-known computer technologist Sam Ruby uses SVG icons for each of the entries in his weblog. They're quite nice, and this surprised me a little because I never thought of Sam as a nascent artist. He wrote a post that described how he created the icons, using nothing more complex than vi, a popular Unix text editor.

The steps he followed are:

1. Embed the pattern to be copied or converted into an SVG document.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

$$$$$$$$$$$$

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

If you want to do web graphics, be ready to put up the big bucks.

Or not!

Graphics work can require an initially heavy investment in more than just time. You could have to shell out thousands for a beginning setup: a high-end 12MP camera, possibly a scanner, definitely a modern computer maxed out with memory and space, expensive software, and so on.

You could have to shell out the bucks, and if you're a professional or have the money, all I can say is, happy spending! If you're not a professional, though, and don't necessarily have a lot of extra money, you can still do some pretty amazing things in web graphics for little or no cost. All it takes is a little ingenuity and a good understanding of what is or is not needed for working on the Web.

Take that high-end camera I mentioned. If you're a serious photographer, you're going to want to invest as much as possible in a good digital camera and accompanying lens. The investment will pay off in the long run.

However, if you're mainly interested in photos for illustrative purposes, as a way of capturing events, or just for fun, most digital point-and-shoot cameras do an excellent job and provide enough resolution to print to the Web. In fact, you don't necessarily need a 12+MP camera unless you're considering publication to professional magazines, or expanding the images into larger wall art.

Consider the sizes of most images you find online. Very seldom are they over 600 pixels in width. Even the largest images are seldom beyond 800 to 1,000 pixels wide. Most of the point-and-shoot cameras I found online when writing this book can easily provide images up to 1,000 pixels wide and still provide plenty of detail, in a range of ISO speeds, and with built-in zooming lens, all for less than $250.00 US—and that's high end for a point and shoot.

Once you have your images, what kind of computer do you need? Well, the software you use tends to drive what you need for a computer, but nowadays computers are getting cheap. Even laptops are running less than $500, and one can get a desktop machine with a really nice monitor and plenty of memory and disk space for less than $700.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Graphics: Taste Great, Less Filling

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

When considering the use of graphics on a site, people should ask themselves three questions:

1. How much bandwidth will the combined use of graphics cost?
2. What impact will the use of such graphics have on accessibility?
3. Will the graphics work on a smaller device?

The "fun" part of web graphics is that the site should be fun to everyone who accesses a web page or application—not just mouse-using, sighted people with high-end broadband connections and the latest computers and monitors.

There is no getting around the fact that many uses of graphics are not very accessible, but a surprising number are, or at least provide alternatives for those reading pages using screen readers or screen magnifiers. Something such as the alt attribute in an img element provides a way to textually describe an image. Providing a text link to go with an image's mouse-driven menu item allows access to site navigation regardless of whether a person is using a keyboard or a mouse.

As for bandwidth, image size can be optimized with little or no degradation in quality, and scripting can provide functionality to easily expand images from thumbnails. One of the simplest approaches to improving performance and speed of page downloads is to serve images from different subdomains.

Most browsers allow only two simultaneous HTTP requests to one domain. If you're serving up several images, only two can be accessed at any one time when this limitation applies. To enhance the page loading experience, especially if you're using a lot of images, you can create several virtual subdomains, such as the following:

img1.somedomain.com
img2.somedomain.com
img3.somedomain.com

Splitting the images across these subdomains will decrease the page load times without having to touch the image files themselves.

Another workaround to loading files is to embed graphics directly in the page. Newer graphical techniques, such as SVG and the canvas object, allow us to add sophisticated and dynamic graphics at the cost of a few bytes of bandwidth for the text to define the objects, plus a little CPU to create in the client. Newer versions of old favorites, such as CSS, provide new visual effects without any external object or files. JavaScript libraries, even the largest, can be both compressed and modularized so that only necessary objects are downloaded and bandwidth needs are minimized.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

It Hurts! Make It Stop!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Earlier I wrote that one of the "musts" associated with web graphics is that they're serious business because, as everyone knows, working with web graphics is hard.

Not a bit of it. As demonstrated in earlier sections, for almost every effect there are examples, samples, tutorials, and step-by-step instructions for how to create and re-create them. More than the documentation and other helpful material, the Web is rich nowadays with libraries and application programming interfaces (APIs) and frameworks in which to create sophisticated web applications that incorporate or are based on web graphics.

When creating static graphics, I've found that once you categorize an effect—"Web 2.0 reflection," say, for reflecting titles—there's invariably a tutorial, usually with figures, that leads you step by step in how to do it. Most of the tutorials are for use with Photoshop, but the steps can be mentally converted for use in other tools.

Embedded graphics such as SVG and the canvas object manage much of the tedious details of creativity, and all you have to do is pull together the pieces to create a more complex whole. Best of all, since both systems are based on open text in a web application, you can see how others have created effects and learn how to emulate such yourself. That's actually why I'm such a big believer in both SVG and the canvas object and have devoted so much space in the book to both.

Many rich web applications make use of Ajax graphical effects, such as hiding and showing page elements, moving or sizing, layering, fading, and responding to the application user's actions. The more common of these can be found already implemented as a single function call in a variety of libraries, such as Prototype, JQuery, moo tools, Dojo, Dean Edwards' base2, and so on. There are also server-side frameworks that allow one to code in Ruby, Python, or PHP, and have both the client and server-side functionality managed.

Though not covered in this book, even newer development tool sets and frameworks—such as Microsoft's Silverlight, Adobe's AIR/Flex, and the open source OpenLaszlo—can be used to create the graphics. It's rare when a person has to actually code a more complex visual effect from scratch.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Web Graphics Hall of Shame

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Of course, now that I've made a mockery of the rules of web graphics, I must backtrack and state that there are times and places for some rules. In the world of web design and development, we're defined as much by our mistakes as our successes. In many ways, web design is perpetually living in the 1980s, so to speak, and surrounded by an excess of both the frivolous and the epitome of poor taste. We laugh at what we've done, even as we hold such in affection.

In light of this, I give you the Web Graphics Hall of Shame. Before beginning, though, note that I don't come here in disdain, but in celebration. Each of the web graphics listed in this section is a symbol of our growth, and as we all know, growth pains mark progress.

Using the technique made popular by the night-time comedian David Letterman and a generation of follow-up pundits, I give you the Hall of Shame, in descending order.

For a time the Web was littered with sites that were "under construction," many staying this way for months, or sometimes even years. Typically the page had some cute animated "Under Construction" graphic, a claim of wonderful things to come, and that was about it.

At times there would be some very decent use of graphics, so I don't want to necessarily pin the awfulness of these sites on the graphics. No, it was the overwhelming number of such sites that at one point left me with an idea that the Web was nothing more than the domicile for those with big ideas and little follow-through.

Today, you rarely see an "Under Construction" animation or image. It, like so many other uses of web graphics, was something that represented a specific era. Now most sites under development usually just have the site name, a description of what the site will be about, and perhaps links to additional information. Most sites don't even publish the URLs to search engines until they're ready for rollout, which is the better option.

This is a book on web graphics, not web design. However, it would be remiss of me not to touch on design where it pertains to the use of graphics and, in particular, to briefly discuss the sameness of use that defines entire generations of web design, and the part of graphics in such crimes against individuality.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

On with the Wondrous Variety

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

As I wrote earlier, the only real rule for web graphics is that they shouldn't interfere with the functionality of the web page—in other words, they shouldn't interfere with the web experience. This means that:

• The use of color and pattern shouldn't be such that the content is hard to find and read.
• Animation should be useful, not distracting or harmful.
• The web page reader should be given control of any animated or advanced graphical techniques.
• The web page reader should not be kept from the content through use of abusive graphic techniques.
• Graphics should not be used to interfere with necessary functionality at a site, such as navigation.
• The use of web graphic techniques should serve a purpose, and should not be used just to be used (note, though, that enjoyment is a viable "purpose").

Other than these frankly common-sense approaches to using web graphics, there really are no other rules. Graphics do not have to be hard or expensive, or require that we all be a combination of Picasso and Norman Rockwell. All that's really required is a curiosity, an interest, and above all, a sense of fun. If this describes you, then you're ready for the rest of the book, and the wondrous variety of web graphics.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Chapter 2: Imagine

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Nothing replaces text when it comes to providing information, but how dull our world would be without the imagery that has been a part of publications from the beginning. The very first book ever published, the Gutenberg Bible, contains exquisite illustrations, following a tradition of such ornamentation that extended to cultures all around the world and has lasted to today's new digital medium.

The graphics files we use on the Web have become so ubiquitous that it's difficult to imagine not having them. Computer graphics, though, are relatively new. They originated at MIT when a student named Ivan Sutherland used a light pen to draw objects to a computer in 1960. The type of image he created is known as a vector graphic. It's called this because the image is created through vectors or paths between mathematically derived computer points, and controlled by commands issued via an application of some form. Scalable Vector Graphics (SVG), featured in several chapters throughout this book, is an example of this type of graphic.

Another type of graphic is the bitmap, or raster, graphic. Unlike the vector, raster graphics consist of a set of points or dots, each containing color and other information. The commonly occurring Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG), and Portable Network Graphics (PNG) are all examples of this type of graphic.

Incorporating graphics into web pages came about because of one simple HTML element: the IMG element, which was added to HTML 2.0 in 1995. Only one type of image format was allowed at the time: GIF. Not long after, support for JPEG was added. JPEG was (and still is) typically used for photographs, whereas GIF is primarily used for illustrations as well as for adding animation to web pages. Surprisingly enough, even with all the many innovations for graphics introduced in the years since, most web graphics in use today are still JPEG or GIF.

As much as both JPEG and GIF are used, they are not without their own unique challenges. JPEG is known as a "lossy" compression technique, which means data can be discarded as the image file is compressed, and the image can suffer as a consequence. GIF, although it's not lossy, is limited in the number of colors, making it a poor format for photos. On the other hand, GIF supports both transparent backgrounds and animations, which JPEG does not. The JPEG format has always been non-proprietary, but the GIF format utilized a patented compression technique.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Raster Graphics and RGB Color 101

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Raster graphics, sometimes called bitmaps, consist of a set of pixels organized in a shallow array, with each pixel containing location, its own array of color bits and, if supported, transparency. The more pixels added to a space, the higher the level of resolution and the better and more detailed the picture, even at greater levels of expansion.

You can see how these individual pixels form a more complex image in , which shows a butterfly photo shown at actual size, and then a zoomed-in snapshot of the butterfly's head, greatly enlarged.

Figure : The pixel nature of raster graphics

The number of bits of color supported—the color depth—determines the number of overall colors supported for the image. The simplest raster graphic is one that supports only two colors: black and white. Of the others, the following are most common for web graphics:

• An image that supports 8 bits per pixel can support 256 colors overall (2⁸ = 256).
• An image that supports 16 bits supports more than 65,000 colors (2¹⁶) and is known as realcolor.
• One that supports 24 bits (2²⁴) supports more than 16.8 million colors, is photo-realistic, and is known as truecolor.
• A 32 bit per pixel PNG image still supports only 24-bit color, with the additional 8 bits for the alpha channel to support transparency.

There are higher color depths for some image types, but 24 bit, or truecolor, is the maximum that humans can perceive.

The color bits just described are from an RGB color model, and the colors formed are combinations of the three primary colors: red, green, and blue. Since all color is really light at a specific wavelength, the higher the intensity or luminosity for each "color," the brighter the color. There are a maximum of 256 possible intensity values for each color, ranging from 0 to 255, which is 100%.

The RGB color model is an additive model, which means the higher percentage of each color present, in combination with the percentage levels of the other colors, determines the resulting color. If the levels for all three colors are at 100%, the result is white; if all are at 0, the result is black. demonstrates the RGB model's additive nature.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

JPEG

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Most photos online are JPEG, and this isn't likely to change anytime soon. Even with the introduction of PNG, the use of JPEG is so tightly ingrained in the human experience that it will take years before people start making the move to PNG.

The JPEG format is actually quite effective for photos. Even at moderately higher levels of compression, most photos look good in web pages, at least for relatively small photo sizes. It takes a lot of compression—and a larger image—before a photo will show degradation visible to most people. In addition, many digital cameras natively store images in JPEG format to save room on the disk. Even if a camera supports RAW format (where all image information is maintained with the image) or TIFF, chances are it will also support JPEG. Some cameras even allow the owners to specify the JPEG quality in order to control space use.

Speaking of cameras and capturing images as JPEG, given a choice between RAW and JPEG or TIFF and JPEG in your digital camera, I would recommend RAW or TIFF. You won't get as many pictures, but you're going to kick yourself when you get a really great shot and it's been saved on disk in a highly compressed, lossy JPEG.

The only time you might want to use JPEG is when you want to print images directly from the camera. JPEG images are both web and print ready, unlike RAW, which must be manipulated first. An alternative approach supported by several cameras (such as my own Nikon D200) is to pick both JPEG and RAW, which creates a copy of the image in both formats. Thus you'll have RAW for processing later in GIMP or Photoshop, but you'll also have JPEG for direct printing. Regardless, if your camera supports RAW, I recommend using it. I'm in good company with this recommendation. As a writer at the Nikonians web site writes (at http://www.nikonians.org/html/resources/guides/digital/jpeg_tiff_or_raw_3.html), "Camera purists, large print aficionados, and weird website article writers prefer this mode above all others."

JPEG is web friendly because of the smaller file sizes that can be supported, typically without apparent impact on image quality. JPEG images may also be saved with progressive encoding, which means that when the image is first loaded, a low-quality version is displayed while the higher-quality image finishes loading and is prepped for display. This is just a nice way of ensuring the photo's space is filled quickly before the image is fully loaded.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

GIF: Lossless and Paletted

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

CompuServe created the GIF format in the 1980s to provide a way of exchanging images at this early Internet service. The original version was 87a (GIF87a), and an improved version is 89a (GIF89a). If JPEG is optimized for continuous color images, GIF is optimized for what is known as "flat color" graphics, graphics that have sharp rather than continuous edges between changing colors.

GIF is an uncomplicated 8-bit format, supporting 256 colors. Additionally, to further save storage space, GIFs are based on an optimized palette, which maps each color in the palette to a specific RGB value.

There actually is a way to support 24-bit truecolor GIFs, but such a practice is purely a hack, and with truecolor supported in JPEG and PNG, unnecessary for web graphics.

The 256 colors supported with GIFs is an optimal number of colors for using a color management technique known as palettes. With palettes, rather than each pixel having its own embedded RGB color, which takes 24 bits, it contains an 8-bit lookup value that is then used with a color lookup table to find the actual color. A version of PNG—8-bit PNG—also supports a palette.

The GIF format utilizes a lossless compression technique known as LZW lossless data compression. This type of compression works by finding a sequence of characters that form a pattern and then entering such in a table, where it's mapped to a given, shorter length code. Then, whenever the pattern repeats, the shorter code is used. As such, it works best when the same given pattern is repeated.

The simple color palette and lossless compression explains why GIF does well with solid colors rather than gradients, and with sharp, distinct edges between colors rather than gradual transitions. It is still better than JPEG for simple line drawings, illustrations, logos, and cartoon-like images.

Since the GIF format doesn't support the full range of colors that a 24-bit RGB space supports, dithering is used to compensate for those colors not represented. Although applications can do a decent job when saving an image as GIF, expanding the image's size beyond 100% can really show the dithering, as shown in . Because of the limited color support, GIF is not the preferred format for photographs.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

PNG

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The PNG format has had a tough time of it because browser companies have been slow to support it. PNG was created as an alternative to GIF during the great days of the GIF patent war, but the GIF patent has expired, making one less reason for vendors to jump to its support.

The PNG format does well with both photos and illustrations, and though it doesn't compress files into as small a size as JPEG, at least it does so losslessly—without degradation of the initial image. The safe archival compression makes PNG a better format for photos that are going to be edited and re-edited.

In addition, the PNG compression technique is more accurate and efficient than that supported for GIFs, so PNGs can compress to a smaller file size than GIFs. File size can be reduced by saving PNG as 8-bit (PNG-8) rather than 32-bit (or PNG-24 in Photoshop, which saves 24 bits for color, 8 bits for alpha transparency), if the tool you are using provides this option. Note, though, that this reduces the color palette and can lead to dithering.

In fact, the only reason to keep either GIF or JPEG is that you can create animations with GIF, and JPEG compresses to a much smaller file than PNG. Oh, and if you want to use transparency and still support IE 6.x, you'll need to use GIF because IE 6.x does not have support for a specific type of transparency called alpha transparency.

There are two forms of transparency: binary and alpha. Binary transparency only supports transparency that is all or nothing: the transparent pieces are either all transparent or completely opaque. Alpha transparency, on the other hand, supports degrees of transparency: a transparency can be partial, such as 50%, total (100%), or completely opaque. Of the web image formats, JPEG doesn't support transparency, GIF supports only binary transparency, and PNG supports both binary and alpha transparency.

There are always exceptions to every known fact in graphics. A new JPEG format was created, JPEG2000, which provides a compression technique that doesn't degrade, and also supports alpha transparency. However, as with GIF, there is a possibility of patent issues arising from the compression technique. I'm only aware of Safari having support for JPEG2000 through the underlying open source infrastructure for the browser, WebKit.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Images: Annotated, Embedded, and Optimized

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You've added images to pages and you know how to use the img element. What more can you possibly learn?

Probably not a lot, but it doesn't hurt to have a little review just to make sure we're all on the same footing. Feel free to skip this section, though, if you're eager to get into issues of copyright and patent law. However, if you can hold off your anticipation for a little while, you might want to give this section a gander. Something about old dogs, new tricks.

To add an image to a page, you'll use the img element, setting the src attribute to the URL for the image:

<img src="http://some.com/image.jpg" />

If you want your page to validate without errors or warnings, remember to "close" the element by adding the end slash, and make sure the element has an alt attribute:

<img src="http://some.com/image.jpg" alt="Photo of the boss at company picnic" />

The alt attribute supports accessibility. Screen readers, software that vocalizes what's happening on a computer screen, speak the text in this field. Providing meaningful text ensures that those dependent on such readers aren't locked out of the web page experience. Avoid repeating the name of the image file; use something meaningful, such as "Partially opened chocolate daylily." The text should be fewer than 100 characters and in whatever is the dominant language for the site. For decorative images that have no real meaning other than a visual context, use an empty string; screen readers should then just ignore the image.

Some browsers inaccurately display an info bubble known as a tooltip over the image that contains the alt text when the mouse cursor is over it; others don't. That's something we can't control.

Other allowable img attributes are style, to assign an element style or style class name, and id to identify the specific element. Older attributes such as width, height, vspace, hspace, and align are either deprecated in newer versions of HTML or not supported in XHTML—you should avoid using any of these older attributes.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Steal This: Images, Copyright, and Hotlinking

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The concept of copyright can fill books, and therefore my coverage here will be both light and high level. It must also, based on my personal experience, be focused on copyright in the United States.

You don't have to do anything special to obtain copyright on one of your images: it's yours as soon as you make it. However, anything on the Web is vulnerable, which means that just because you have the copyright on an image doesn't mean others can't take it for their own purposes.

If you find an image has been copied to another web site and you're unhappy about its use, there's not much you can do other than ask the person to stop using it. If he or she refuses, you can then check to see whether the company providing the server space for the pages containing the image has a term of use that prohibits using copyrighted material without permission. If it does, you can file a complaint with the company hosting the site. Be forewarned that people online can be pretty nasty about others who deny them their use of your image.

If the image takedown request fails, about all you can do at this point is get a lawyer and sue the individual. Even then, chances are that unless you can prove the person's use of your image has harmed your ability to make money from it, their use could fit under what is known as fair use.

Fair use states that copyrighted material can be used for criticism, commentary, reporting, teaching, and research, depending on whether the image is part of a body of work and how significant a part, as well as the economic impact to the copyright holder from making such a copy.

If you post a set of images, and the person copies just one in order to write on the topic covered by the images, or even on your own work, this probably falls within the fair use boundary. If they're not charging for the use of the image or otherwise benefiting financially from your work, and copying doesn't impact on your making money from the image, chances are that the use could fit within fair use. Unfortunately, there is no clear-cut way to determine exactly what is fair use and what is not. A resource to begin with, though, is Duke University's

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Image Storage

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

One thing that hasn't changed much in all these years of technological advancement is that serving images takes space on the disk and bandwidth. If anything, with the new space-guzzling cameras and multi-gigabyte storage cards, sometimes it takes a lot of space and considerable bandwidth.

You have a couple of different options for storing and serving up images. One is to store and serve them from your own server, either one you own, wholly, or one that you share with other people. The prices for these sites have gone down considerably, and you can pick up a couple of gigs of disk space and 30-50 GB of bandwidth for fifteen bucks a month, U.S.

Even with this generous allocation, though, you may find yourself pushing the envelope on space, bandwidth, or both. There are other alternatives to hosting images yourself, though most of these alternatives have constraints on usage attached.

Social networks are the big thing nowadays. These are sites where you use whatever service is provided, such as managing your photos for public access, but you also have access to several community features. The focus of these sites is not just to store photos, but to draw people into communities of like-minded folks.

One of the more popular sites is Yahoo!'s Flickr, found at http://flickr.com and shown in . There are two different accounts, paid and free, and how many photos you can upload and whether you see ads or not depends on whether you've paid or not. The payment itself is quite small, and storage and bandwidth is unlimited.

There is a web application for uploading photos, shown in , and several utilities to do the same on various clients. When you upload photos, Flickr creates variations based on size. You can also add information to the photo, such as title, description, annotations, and tags—keywords associated with the photos. If there is any accessible metadata associated with the photo, it's pulled out by Flickr for display when the photo is accessed.

Once the photo is uploaded, you can include it in sets, add it to a map, or send it to various Flickr groups, such as ones for B&W photos, butterflies, or photos in Missouri. If the photo is publicly accessible, anyone can come along and drop you a comment about the photo.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Chapter 3: Photographs: From Camera to Web Page

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

A few years back I was reading one photographer's discussion of his workflow using Photoshop, when he mentioned something about a default setting being "good enough" for the Web. Of course there was a time when print was synonymous with photography, but we can't assume that, today, the ultimate end for a photograph is on paper, with the Web being nothing more than a way to promote our paper-based end product. Nowadays, the Web has become the place for our photos, and realizing this changes the whole idea of default settings in tools as being "good enough" for the Web.

Digital photography and digital cameras have been around for years. In my opinion, it was the convergence of three components—affordable consumer digital cameras, personal computers, and a growing access and familiarity with the Web, as well as an increasing number of broadband users—that led to the explosion of digital photography and the huge number of photos and photo-specific sites we see today.

Before all of these components came together, most photography was film, printed out on paper, with copies made and sent to just a few close friends and family. Now the use of film is rapidly decreasing, and most photos are taken with a digital camera, uploaded into a computer, and either sent through email or posted online. The target audience has also changed: where before we published photos for close friends and family, now we're publishing photos literally to the world…and finding out that there is a fairly significant number of amateur photographers who do a rather nice job with their pictures, too. Even news sites have started making greater use of "amateur" material, a practice that is somewhat controversial.

Digital photography has become so prevalent now that it forms a major component of the web graphics genre, whereas 10 or even 5 years ago digital photography on the Web might rate only a footnote. Where the majority of "web graphics time" had previously been spent working on site design and creating graphical buttons and menus, more of that same time is now spent endlessly tweaking photos to publish to the Web. Even the most determinedly amateur photographer posts dozens, even hundreds, of photos to the Web yearly.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Web Photographer's Workflow

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Photographic workflow refers to the processes we follow to get a photo from our cameras all the way to publication. Different people use different approaches and tools—anything from a complete workflow tool, such as Aperture, to a variety of tools, such as a RAW image converter, photo editor, FTP tool to a site, and access through a slideshow program.

In his The Digital Story weblog, Derrick Story, O'Reilly's digital media evangelist, published a "Build Your Workflow" guide and accompanying podcast (audio post). In both, he describes these basic steps:

1. Acquire/capture (in camera)
2. Upload to computer
3. Organize (add metadata, rate, and sort)
4. Edit
5. Share (publish)
6. Save (archive)

The camera to web workflow follows these same steps, with the single variation being that the only sharing we're interested in is publishing the photos to the Web. How many tools you use to complete this process is dependent more on your interest, and perhaps budget, than on any other factor—including whether you're paid for your photographs or not.

Derrick's workflow guide can be found at http://www.thedigitalstory.com/blog/2007/08/build_your_workflow.html.

Both amateurs and professionals alike make use of photo workflow tools, such as Adobe's Lightroom, Microsoft's Expression Media, Apple's Aperture, Camera One, or even the in-development open source blueMarine. These tools can simplify image organization, including adding bulk updates, such as metadata edits. They can also be used to edit photos, though most don't provide the sophisticated capability that even the simplest desktop editor provides.

Beyond the initial stages of photo management comes fine-tuning individual pictures. No matter how good the workflow tools, this typically requires the services of a photo editor. The better known of the photo editors is Adobe's Photoshop, and it is still the undisputed leader in its field. However, it's not the only option for photo manipulation. In fact, there are dozens of tools for editing photos, many of which are freely available for Windows, Mac OS X, and Linux. This is in addition to an increasing number of online photo editors, created with Flash or some other toolset.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Working with RAW Images

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Unlike JPEG, GIF, or TIFF, RAW does not stand for anything other than an image that's stored in a "raw," unprocessed state. No compression routine is used, the data is not processed, and all camera sensor information possible is stored with the image.

The advantage to the RAW format is that you can modify certain characteristics of the image—exposure, color saturation, sharpness, white balance—after the image has been taken. About the only characteristics you can't change are ISO, aperture, and focal length of the picture—the characteristics of film, in fact.

The disadvantage of the RAW format is that the image files are quite large. However, with the multi-gigabyte memory cards nowadays, this isn't the issue it once was. My 4GB memory card can store over 200 photos, which is more than sufficient for my needs, and if it isn't I have additional memory cards on hand. Storing RAW data can also be slower, but not necessarily to the point where most of us would notice—especially with the increasing number of optimizations in today's digital cameras.

If all cameras supported the same RAW format, our lives would be so much simpler, but unfortunately they don't. As mentioned earlier, I have Nikon D200 and D70 cameras, and the RAW format Nikon supports is NEF. Canon supports CRW and CRW2 (Canon RAW); Sony's is SRF (Sony Raw Format). Rather than continue this proliferation of different formats, Adobe has proposed a RAW file standard: DNG, or Digital Negative. In addition to Adobe, other companies support DNG in their products, including Apple, Leica, Hasselblad, and so on, though not Nikon for my cameras. At least not yet.

Adobe has provided a DNG Converter for both the Mac and Windows that takes formats like my Nikon's NEF and turns them into DNG files. Once started, you input a folder, and the tool then converts the RAW images in the folder, as shown in .

Regardless of format, some tools can work directly with RAW images, but others work through a secondary application that manipulates the RAW settings before sending the image on through to the application.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Editing Photos: Bending Light

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Photography is about bending light. No matter the subject or the skill of the photographer, whether the image is captured on film or digitally, photography is really about working with light.

Picture too dark? Modifying overall illumination, enhancing contrast, even altering saturation and color values are all about changing the light present in the image. Shadows too dark or light areas too bright? Alter the exposure, before or after the photo is captured. Photo a little too soft or not soft enough? Sharpening an image is really finding the edges between areas in a photo with light differences and altering the transition between the areas so that it happens more quickly. Even when we resize a photo, algorithms base this process on light levels and repetition of patterns in the image.

All photo editors provide light manipulation routines of varying degrees of sophistication. Many provide enough primitive photo editing functionality that they can be combined to emulate the more sophisticated photo editing capabilities of the higher-cost tools. That's important if you're on a budget but you also want to publish the best quality photo.

Each person has different needs for a photo editor, but my list of requirements consists of the following (subject to change, of course, based on recent photo editing experiences):

• Primitive level support, such as the ability to resize/resample and crop
• Support for RAW images, either directly or through some form of plug-in or third-party tool
• Support for color profiles and color space
• The capability to export or save in any number of formats, including TIFF, PNG, JPEG, and GIF, as well as the ability to save in-process work
• The capability to back out any number of edits for those times when my experimentation really goes wrong
• The capability to remove an abstraction, flaw, or dust—especially dust—from the photo, using some form of cloning

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Color Match That Group: Optimization in Numbers

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

When we prepare a photo for printing, we optimize the photo for individual presentation. Publishing photos to the Web, though, can be a different experience because the photo may not be the only image displayed within the same visual space. In fact, the photo may be closely grouped with other related photos, and it's important to make both the individual photo and the group as a whole look good.

Case in point is a group of photos I took at the Apollo/Saturn V Center at the Kennedy Space Center. The subjects differ but are related: rockets, moon rovers, and other space-related equipment of historical interest. The venue was the same: a hangar-like atmosphere with the equipment either hanging from the roof or resting directly on the concrete floor. The lighting, though, differed drastically. Some items were lit with fluorescent, some with incandescent light, and natural light entered the building from hangar doors. Fill lighting usually was not an option because of the size of the displays.

shows the four images as they were first opened in the editor, each with its own unique lighting and color challenges. The photos used in this example perfectly demonstrate the concept of "optimization in numbers" with photographs. None of the photos is very strong by itself; all would most likely be rejected as individual pictures because of their flaws. However, as a group, pulled together for editorial purposes and tweaked to complement one another, four weak photos can make one strong illustrative statement.

The top-left photo of the moon rover has a yellow cast because of incandescent lighting. Viewing the histogram for the photo (Window → Histogram) shows that it's also a very low key photograph, largely underexposed and dark. The opposite of a low key photo would be one that's high key: too bright and overexposed. There's nothing wrong with either low or high key photos if the subject supports the effect. Low key photos tend to be dark-tempered and moody, neither of which we associate with a moon rover.

The bottom-left photo is also underexposed, though unlike the moon rover, at least there's no unusual color cast to the picture. The lighting and color is acceptable for the remaining two photos of the group, both of rockets, but not ideal. More importantly, none of the photos agree enough on either color or light with each other to create a nicely cohesive grouped display. The goal of the exercise, then, is to optimize and synchronize the color and brightness levels for the group, while not sacrificing either for the individual pictures.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

It's Black and White and Not Red All Over

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Sometimes when I look at photos online, I think the first control most people use to modify their photos is the saturation control. First, middle, and last tool used, really.

Skies are so blue they look made of crushed sapphires, along with ruby red lips, painfully bright yellow sunflowers, and green so rich it makes your teeth hurt. I didn't know that nature supported such brilliant colors. I hope to someday visit the planet that spawns such images.

I love color, as do most people. However, there is such a thing as too much color, and thanks to digital photography, we're pushing the limit of what is too much color all the time. Even without the "help" of the saturation controls, photographs embedded into web pages are fighting for eyeballs with garish ads, overly cute sidebar icons, and whatever other graphic the page owners have decided the page must have.

Converting color photographs to black and white (B&W) isn't just for the artistic elite or those wanting to create their own noir effect. B&W photos can enhance structure and shape—helpful if the photo is used to illustrate a story related to the subject of the photo. A B&W photo can also stand out more than a photo with weak or uninteresting coloring.

Converting a photo to B&W is easy: just use whatever saturation control the tool has and turn off all the color. You'll end up with a B&W photo, true, but you won't end up with the best B&W photo. To do that, you have to work with the B&W photo's colors.

In film photography, color filters were used with B&W film to control both contrast and detail. A color filter allows its associated color through, while blocking other colors. In other words, a green filter allows green light, a red filter allows red light, and so on. The filters can be used to create effects that can make a B&W photo doubly interesting and effective.

One example of what a filter can do is to increase contrast; to do so, use a filter color that is complementary to the dominant color where you want the enhancement. Complementary colors are:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Illustrative Effect

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Chances are that if you're posting a photo because you think it's a good one, you're not going to do much more than make sure it's properly cropped and optimized. It's always fun to post a great photo.

However, if you're using a photo for illustration—to tell a story, to make a point, to annotate text—taking the photo is just the beginning. There's an amazing number of things you can do to a picture in order to convey mood or interest, to highlight a subject, or to convey a message. The photo becomes clay, and we become the sculptor.

Years ago when I was going to college, I worked for a photographer as a photo retoucher. In those days, photo retouching was actually done on the printed photograph using a variety of paints, chalk, and colored pencil.

When I was being trained in retouching, one of the first lessons I learned is that a slightly soft portrait could be blown up to a larger size, as long as the highlights in the eyes were sharp. We would use paintbrush and paint to "clarify" the highlight, which worked quite well. There were other approaches to sharpen a photo, using darkroom techniques. One was known as the Unsharp Mask—yeah, the one that most photo editors feature for digital sharpening.

In ancient pre-digital times, a positive transparency was made of a negative by exposing the negative on film rather than on paper. This new transparency was slightly blurred, and was sandwiched back with the original negative. The blurring on the positive transparency formed a halo effect around the objects in the negative and, since the effect is from a positive image, it's a contrasting color to the surrounded object. This haloing enhances the transition between elements in the picture, making the photo seem sharper. Hence, the name unsharp mask.

The same effect applies to digital photographs, except that we don't have to muck around with transparencies. It's the great irony of photography that sharpening is dependent on blurring: to be more precise, the Gaussian Blur.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Knockouts and Extractions

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

I called them cut-outs, but other people refer to them as knockouts—extracting a subject or group of subjects from the rest of a photograph. The reasons to create knockouts are as varied as their uses. Maybe the background is too distracting or you want to add an overlap effect. Perhaps you want to create a knockout for humor, or to create an odd image to catch your web page viewer's attention. I have a friend who uses flower knockouts, deliberately sizing the photo so that the flower overlaps a given frame.

Isolating a subject from the rest of a photograph can be easy if the subject is all smooth curves and the background is a solid color. All you need to do then is tap the subject with the Magic Wand tool (or equivalent) and cut. Anything else, though, is going to take more work.

One approach to free-form selections of an image based on color is to use Photoshop's built-in Color Range tool, which can be accessed via Select → Color Range. The tool provides eyedroppers for removing or adding colors to the final selection, as shown in with several colors added to the selection.

Figure : Using the Color Range to select the subject

After selecting all of the colors to be masked, either you can cut away the background or, by right-clicking the selected area and choosing Select Inverse from the menu, you can select the subject, which can then be copied and pasted in a separate image. The result can be quite good, especially if the subject and the background colors don't have a lot of overlap. However, in most cases, there will almost always be some leftover background trash, as well as detail going missing, as shown in .

Figure : After using Color Range to select colors and then deleting the selected regions

Another approach is to use the Extract Filter, which involves using a configurable brush to "paint" the outside of the area to select. When the area is outlined, it's filled, and it's this area that forms the selection, as shown in .

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

A Survey of Desktop Photo Editors

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

There are so many photo editors, it was hard to focus on which ones I wanted to survey for this book. There were some that obviously needed to be included, for their market share if no other reason. Others I included because of their quality in comparison to their relatively low (or no) cost.

Some tools work only in Windows, and others in multiple operating systems, including Linux, though this operating system had the fewest offerings. I even extended the survey to explore a few of the new online photo edi