OReilly painting the web may 2008 ISBN 059651509x

by Shelley Powers Publisher: O'Reilly Pub Date: April 28, 2008 Print ISBN-13: 978-0-596-51509-6 Pages: 655 Table of Contents | Index Overview Do you think that only professionals with ex

by Shelley Powers

Publisher: O'Reilly Pub Date: April 28, 2008 Print ISBN-13: 978-0-596-51509-6 Pages: 655

Table of Contents | Index

Overview

Do you think that only professionals with expensive tools andyears of experience can work with web graphics? This guide

tosses that notion into the trash bin Painting the Web is the

first comprehensive book on web graphics to come along inyears, and author Shelley Powers demonstrates how readers ofany level can take advantage of the graphics and animationcapabilities built into today's powerful browsers She coversGIFs, JPEGs, and PNGs, raster and vector graphics, CSS, Ajaxeffects, the canvas objects, SVG, geographical applications, andmore everything that designers (and non-designers) use toliterally paint the Web More importantly, Shelley's own love ofweb graphics shines through in every example Not only canyou master the many different techniques, you also can have

fun doing it Topics in Painting the Web include:

GIF, JPEG, PNG, lossy versus lossless compression, colormanagement, and optimization

Photo workflow, from camera to web page, including a

review of photo editors, workflow tools, and RAW photoutilities

Tricks for best displaying your photos online

Non-photographic raster images (icons and logos), withstep-by-step tutorials for creating popular "Web 2.0" effects

Vector graphics

An SVG tutorial, with examples of all the major componentsTips and tricks for using CSS

Interactive effects with Ajax such as accordions and fadesThe canvas object implemented in most browsers

Geographical applications such as Google Maps and YahooMaps, with programming and non-programming examplesVisual effects such as forms and data displays in table orgraphics

Web design for the non-designer

Graphics are not essential to the web experience, but they domake the difference between a site that's functional and onethat's lively, compelling, and exciting Whether you want to

spruce up a website, use photos to annotate your stories,

create hot graphics, or provide compelling displays for yourdata, this is the book for you

Section 7.2 Browser Support: Standoffish or IntegratedSection 7.3 The Structure of the SVG Space

Section 9.3 Flexible Designs

Section 9.4 Colors: Make Your Page Happy, Make Your PageSad

Section 14.2 Yahoo!'s Maps

Section 14.3 Living Within the Geoweb

Chapter 15 Like Peanut Butter and Jelly: Data and GraphicsSection 15.1 Graphs: Every Which Way but Static

most titles (safari.oreilly.com) For more information, contactour corporate/institutional sales department: (800) 998-9938 orcorporate@oreilly.com

Cover Designer:

KarenMontgomery

Copyeditor: Genevieve

d'Entremont

Interior Designer:

While every precaution has been taken in the preparation of thisbook, the publisher and author assume no responsibility for

errors or omissions, or for damages resulting from the use ofthe information contained herein

This book uses RepKover™, a durable and flexible lay-flat

binding

ISBN: 978-0-596-51509-6

[F]

Ask 20 different people what the term "web graphics" means tothem and you'll get 20 different answers: images, photos,

illustrations, raster graphics, bitmaps, SVG, Photoshop, EXIF,CSS, web design, JPEG, Ajax, GIMP, GIF, developing with

images, animations, buttons, icons—they all fall under this

rather all-encompassing term

When I think of web graphics, the one word that comes to me is

"fun." From the very first time I programmed the layout of ahouse using FORTRAN, Photoshopped a photo, accessed

metadata from an image, followed steps to create a "shiny"

button, animated a display, created a CSS design—no matterhow useful they are, these uses of graphics have been, and

should be, fun Contrary to expectations, one doesn't have to

be a professional graphics artist or designer to have fun withweb pages I don't consider myself to be especially artistic, andI'm definitely not a designer by trade However, I've enjoyedworking with web graphics for years Outside of free drawing, ororiginating graphical concepts or designs, most effects can bere-created just by following given steps or using well-designedand documented tools and technologies

You don't have to spend thousands, either Tools range fromfree to hundreds of dollars, with most of us able to get by withthose tools toward the free end of the spectrum Even thosetools that have a price tag have trials, so you can give the tool

a run before deciding to buy

Regardless of your artistic ability, the state of your pocketbook,

or your experience, one thing that you do need before workingwith web graphics is an interest in trying new things You alsoneed to be willing to dip your toes into various web

technologies, because many web-based graphics are based ontechnologies such as CSS, JavaScript, or server-side

functionalities such as ImageMagick or PHP

covers everything "but the kitchen sink," but I tried Includedare overviews of the specs and the concepts, such as JPEGs andlossy compression; how to ensure your photos look great

online; how to create page objects, such as a shiny Web 2.0button or reflections; PHP applications that create slideshows orgenerate images; camera to web page photo workflows;

interesting CSS design effects; and fades and other effects

created with JavaScript

Many of the examples don't require any programming

experience, but several do require some experience workingwith PHP or JavaScript I've tried to keep the programming

simple, easy to follow, and clean to read Some exposure toboth languages is needed, but you don't have to be an expert.Several of the examples also use XML and CSS, but again, suchuse is kept as simple as possible You don't have to be expert orpro, either at graphics or the Web, to work with any of the bookexamples

P2.1 How to Use This Book

The chapters in this book can be read in any order, but there is

a method to the madness underlying its organization First, thebook moves from working with static graphics, using tools such

as Photoshop and GIMP, to using programming languages (PHPand JavaScript) to generate or modify graphics To complementthis organization, the use of web-specific technology increases

as you progress through the book

Speaking of web technologies, there are several covered in thisbook Tools, too This is not the type of book that you'll want togulp down in a couple of sittings Instead, it is a book you

should sip in small installments, reading through some chaptersections, trying out the examples, trying out the tools on yourown, before moving on to a new topic

Several applications are covered, but there are probably

what's covered here is nothing more than a sample Severalfactors governed my choices of the technologies used in thebook: the tool/utility/technology is significant or representative

in the field, has unique or interesting properties, is relativelyuncomplicated to install, and, most importantly, does not costanything to use—at least, not while you're trying out the

examples in this book

All applications discussed in this book are either free to

download or, if it's a commercial or shareware product, comewith at least a 30-day free trial

P2.2 How This Book Is Organized

As I've mentioned, you can read the chapters in any order,

though I would recommend reading Chapter 7 before

progressing into the later sections of the book Starting fromthe beginning, though…

Chapter 1, You Must Have Fun

Includes an introduction to the book, as well as an overview

of how the book defines "web graphics." Also included is theWeb Graphics Hall of Shame, where former "luminaries"such as spacer GIFs and BLINK are covered

Chapter 2, Imagine

Provides an overview of the initial image types of GIF, JPEG,and PNG, including discussion on lossy versus lossless

compression, color management, and optimization Alsoincluded are issues of copyright, how to prevent hotlinking

of images, and various online storage techniques

Adobe Photoshop, GIMP, and ImageMagick also are

discussed in this chapter Any of these tools could be usedwith the examples, but none of the tools are necessary

Covers the photo workflow It includes a review of severalphoto editors, workflow tools, and RAW photo utilities, plusedits that can improve a photo specifically for web

Tools used in this chapter are:

Gallery (online photo album software)

Lightbox 2.0 (embedded photo expansion software)*Aperture* and Lightroom*

tutorials In addition, this chapter covers screenshot toolsfor posting screenshots online

Introduces the concept of vector graphics and explores

some earlier and current vector formats, including VRMLand VML This chapter then moves into a basic introduction

to the Scalar Vector Graphic (SVG) format, including how touse SVG in a page, and some of the vector graphics editors.Tools used are:

incorporated into web pages, including how to work withembedded SVG The basic shapes are covered, as are pathsand curves In addition, the use of gradients and text isincluded In order to focus on the technology, I use onlytext editors and Inkscape to create the examples

Chapter 8, CSS Über Zone

Focuses on tips and tricks related to CSS, rather than

providing a general introduction Included are instructions

on how to reset global whitespace, how to better controlyour layout, and how to work with multiple classes TheCSS tool CSSEditor is explored in this chapter, as well asCSS validators and browser extensions, which are all freelyavailable

Covers some of the basics of design, including accessibility,validity, mobile-readiness, and especially readability Theuse of color is explored, including its role in setting moodand enhancing the visual experience Several web sites arevisited, to explore what works—and what doesn't—with

each

Chapter 10, Dynamic Web Page Graphics

Gets into interactive effects created using the objects

described previously in this book This includes some of themore popular Ajax visual effects, such as Accordions andfades This chapter doesn't use any specialized tools or

coverage of the SVG animation elements, as well as canvas

bitmap manipulations

Covers various image development and generation

applications that are accessible either at the command line,through applications, or via development with PHP and/orJavaScript This chapter makes heavy use of ImageMagickand the operating system's built-in image libraries The

examples are created using relatively simple PHP and

JavaScript, and require access to an ImageMagick

installation and access to the command line This chapteralso provides examples of how to generate images

Chapter 14, The Geo Zone

Covers many of the new geographical applications, includingGoogle Maps and Yahoo! Maps This chapter includes bothnon-programming and programming examples, and coversvarious geo-specific markups, as well as creating

applications in PHP and JavaScript that are specific to thegeoweb

Chapter 15, Like Peanut Butter and Jelly: Data and GraphicsFocuses on visual effects related to traditional web

applications, such as forms and data displays in tables orgraphics This chapter also looks at working with metadata,including metadata visualizations—demonstrated in SVGand the canvas element, and even generated using PHP andgraphics libraries No specialized tool is needed, but the

chapter examples make use of several freely available PHPand JavaScript libraries and require some experience

working with both programming languages

P2.3 Conventions Used in This Book

The following typographical conventions are used in this book:

Indicates new terms, URLs, filenames, and file extensions

Constant width

Indicates computer coding in a broad sense This includescommands, elements, options, variables, attributes, keys,requests, functions, methods, types, classes, modules,properties, parameters, values, objects, events, eventhandlers, XML and XHTML tags, macros, and keywords

Constant width bold

Indicates commands or other text that should be typedliterally by the user

Constant width italics

Indicates text that should be replaced with user-suppliedvalues or by values determined by context

This icon signifies a tip, suggestion, or generalnote

This icon indicates a warning or caution

This book is here to help you get your job done In general, youmay use the code in this book in your programs and

documentation You do not need to contact us for permissionunless you're reproducing a significant portion of the code Forexample, writing a program that uses several chunks of codefrom this book does not require permission Selling or

distributing a CD-ROM of examples from O'Reilly books doesrequire permission Answering a question by citing this bookand quoting example code does not require permission

Incorporating a significant amount of example code from thisbook into your product's documentation does require

permission

We appreciate, but do not require, attribution An attributionusually includes the title, author, publisher, and ISBN For

example: "Painting the Web by Shelley Powers Copyright 2008

Shelley Powers, 978-0-596-51509-6."

If you feel your use of code examples falls outside fair use orthe permission given here, feel free to contact us at

permissions@oreilly.com

P2.5 How to Contact Us

Please address comments and questions concerning this book tothe publisher:

http://www.oreilly.com/catalog/9780596515096/

To comment or ask technical questions about this book, sendemail to:

bookquestions@oreilly.com

For more information about our books, conferences, ResourceCenters, and the O'Reilly Network, see our web site at:

http://www.oreilly.com/

P2.6 Safari® Books Online

When you see a Safari® Books Online icon on the cover of yourfavorite technology book, that means the book is available

online through the O'Reilly Network Safari Bookshelf

Safari offers a solution that's better than e-books It's a virtuallibrary that lets you easily search thousands of top tech books,cut and paste code samples, download chapters, and find quickanswers when you need the most accurate, current information.Try it for free at http://safari.oreilly.com

P2.7 Acknowledgments

I want to thank the team that worked with me on creating thisbook, including my long-time editor, Simon St.Laurent, and mytech reviewers, Loren Webster, Elaine Nelson, and Chuq VonRospach In addition, I'd like to thank the production team: RonBilodeau, designer; Genevieve d'Entremont, copyeditor; LucieHaskins, indexer; Rachel Monaghan, production editor; KarenMontgomery, cover designer; and Jessamyn Read, illustrator.I'd also like to thank the developers and companies that

provided the tools and technologies used in the book I'd

especially like to send a shout out to the creators of open and

is available to everyone

Do you remember your very first web page? The first one youever saw? I remember the first time I saw a web page I'm notsure if such a memory is unusual, or if many people remembertheir first glance at what was to become ubiquitous in a veryshort time

The time was late 1993 or early 1994 I was working at Intel as

a contract software developer when one of the other developersasked me if I'd seen this application called Mosaic I wasn't

among the first to see this new type of application, but at thattime the Web was still in its most primitive form The first webpage I saw had a white background, a larger, bolder header,and text formatted into several paragraphs It wasn't anythingspecial, 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 completelydifferent 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 wascompletely 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 pageswere 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 andclient that was both unprecedented and mesmerizing

What an odd way to begin a book about graphics: describingplain web pages completely devoid of any graphics There is apurpose 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

Graphics are not necessary to the web experience They can,however, add immeasurably to the richness of the Web, makingthe difference between a site that's lively, compelling, and

exciting, and one that's merely functional By looking at webgraphics less as an essential component of the Web and more

as an exhilarating companion and accessory, we can begin tofree ourselves from the restrictions on, and requirements for,web graphics that have sprung up over the years, and to pushagainst the "musts" that have constrained their use Musts such

"Because Allah loves wondrous variety."

All the various forms of web graphics—from CSS to images,

Flash to SVG—can be many things, including useful, functional,and professional Leaving aside all these practical

considerations, though, I like to think that what graphics add tothe Web is a wondrous variety To support such a view, one

can't be held down by all the musts; the only real "must" with

web graphics is that they don't interfere with the functionality ofthe page Once that's assured, anything goes

In the rest of this chapter—the rest of this book, in fact—we'lllook at the wondrous variety of web graphics In the process,we'll also show we can bust every one of rules just described,and have a blast doing so

1.1 What Was Good Enough for

Grandpappy…

A functional world might be efficient, but it's not terribly

interesting It would be like living on a diet of bananas, nut andseed 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 Thepush for variety has been the forerunner for the overall

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 Webyet again, leading to yet more improvements in the underlyingtechnology

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 Amazonshave 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 pushedimprovements in web services I put such improvements firmly

on the graphical goodies

Which of the items mentioned, though, are web graphics, thetopic of this book? Most people think of image files with

extensions of JPEG, GIF, or PNG when they hear the term "webgraphics." However, I consider anything that impacts the

visualization of a web page, above and beyond the componentsthat provide the initial structure, part of the family of web

graphics This includes:

Image files, as we would expect

Visual attributes associated with the page elements, andthe CSS that controls them

Embedded or integrated graphics, such as VML, VRML, SVG,

Scripted effects, such as those made popular with DHTMLand now Ajax

Packaged, interactive animations such as those provided byFlash

Frameworks and libraries that generate graphical effectsusing any of the above

The one item missing is video, and that's primarily becausevideo examples are a little hard to embed in book pages

Perhaps by the time this is ready for the second edition, we'llhave a workaround for this particular challenge, and I'll add it

to the list For now, other than video and Flash, these itemsform the basis of this book

Do you remember your very first web page? The first one youever saw? I remember the first time I saw a web page I'm notsure if such a memory is unusual, or if many people remembertheir first glance at what was to become ubiquitous in a veryshort time

The time was late 1993 or early 1994 I was working at Intel as

a contract software developer when one of the other developersasked me if I'd seen this application called Mosaic I wasn't

among the first to see this new type of application, but at thattime the Web was still in its most primitive form The first webpage I saw had a white background, a larger, bolder header,and text formatted into several paragraphs It wasn't anythingspecial, 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 completelydifferent 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 wascompletely 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 pageswere 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 andclient that was both unprecedented and mesmerizing

What an odd way to begin a book about graphics: describingplain web pages completely devoid of any graphics There is apurpose 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

Graphics are not necessary to the web experience They can,however, add immeasurably to the richness of the Web, makingthe difference between a site that's lively, compelling, and

exciting, and one that's merely functional By looking at webgraphics less as an essential component of the Web and more

as an exhilarating companion and accessory, we can begin tofree ourselves from the restrictions on, and requirements for,web graphics that have sprung up over the years, and to pushagainst the "musts" that have constrained their use Musts such

"Because Allah loves wondrous variety."

All the various forms of web graphics—from CSS to images,

Flash to SVG—can be many things, including useful, functional,and professional Leaving aside all these practical

considerations, though, I like to think that what graphics add tothe Web is a wondrous variety To support such a view, one

can't be held down by all the musts; the only real "must" with

web graphics is that they don't interfere with the functionality ofthe page Once that's assured, anything goes

In the rest of this chapter—the rest of this book, in fact—we'lllook at the wondrous variety of web graphics In the process,we'll also show we can bust every one of rules just described,and have a blast doing so

1.1 What Was Good Enough for

Grandpappy…

A functional world might be efficient, but it's not terribly

interesting It would be like living on a diet of bananas, nut andseed 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 Thepush for variety has been the forerunner for the overall

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 Webyet again, leading to yet more improvements in the underlyingtechnology

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 Amazonshave 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 pushedimprovements in web services I put such improvements firmly

on the graphical goodies

Which of the items mentioned, though, are web graphics, thetopic of this book? Most people think of image files with

extensions of JPEG, GIF, or PNG when they hear the term "webgraphics." However, I consider anything that impacts the

visualization of a web page, above and beyond the componentsthat provide the initial structure, part of the family of web

graphics This includes:

Image files, as we would expect

Visual attributes associated with the page elements, andthe CSS that controls them

Embedded or integrated graphics, such as VML, VRML, SVG,

Scripted effects, such as those made popular with DHTMLand now Ajax

Packaged, interactive animations such as those provided byFlash

Frameworks and libraries that generate graphical effectsusing any of the above

The one item missing is video, and that's primarily becausevideo examples are a little hard to embed in book pages

Perhaps by the time this is ready for the second edition, we'llhave a workaround for this particular challenge, and I'll add it

to the list For now, other than video and Flash, these itemsform the basis of this book

Back when matchbooks proliferated about as much as smokerswelcome in restaurants, many of the matchbooks would have apicture of a clown or dog or some other character with the

words, "Draw Me!" across the front The matchbooks were putout by various art schools, and aspiring artists would do justthat, sending in the result to get an evaluation of their skill.Evidently, to the schools, we all have a little artist in us becausefew people would be dissuaded from signing up for a course

Figure 1-1 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

While a professional graphic artist may be necessary for manyeffects, it's not true for all In fact, there are many effects thatcan 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 creategraphics 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 makecopies 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 iconsfor each of the entries in his weblog They're quite nice, andthis surprised me a little because I never thought of Sam as anascent artist He wrote a post that described how he createdthe icons, using nothing more complex than vi, a popular Unixtext editor

To simplify the approach, you can print out the original image,place it under graph paper, trace over the design, and use thelines in the paper to plot the outlines of the graphic elementsyou want to copy, as demonstrated in Figure 1-2 Then it's just

a matter of transforming graph points to SVG polyline or pathpoints

examples, at

SVG

However, if you're mainly interested in photos for illustrativepurposes, as a way of capturing events, or just for fun, mostdigital point-and-shoot cameras do an excellent job and provideenough resolution to print to the Web In fact, you don't

necessarily need a 12+MP camera unless you're consideringpublication to professional magazines, or expanding the imagesinto larger wall art

Consider the sizes of most images you find online Very seldomare they over 600 pixels in width Even the largest images areseldom beyond 800 to 1,000 pixels wide Most of the point-and-

of detail, in a range of ISO speeds, and with built-in zoominglens, all for less than $250.00 US—and that's high end for apoint and shoot

Once you have your images, what kind of computer do you

need? Well, the software you use tends to drive what you needfor a computer, but nowadays computers are getting cheap.Even laptops are running less than $500, and one can get adesktop machine with a really nice monitor and plenty of

memory and disk space for less than $700

Again, depending on the software you use, you might not evenneed a more modern computer I've used computers that werefour and five years old to provide image processing and hadlittle problem The processes may be slower, but as long as theimage file sizes are small enough (there's that point-and-shootcamera again), they're not so slow as to be painful

Of course, if you're going to be using Adobe Photoshop, you'llneed the newer machine, but you don't need Photoshop to

process pictures or create graphics The GNU Image

Manipulation Program (GIMP) does an excellent job, works wellwith a variety of image types, and—with a little help from

another free program, UFRaw—can even manage RAW files,which are image files where most or all sensor data is

As for non-photographic work, the field gets even richer In thelast section I detailed a couple of approaches for incorporatingother graphics into new SVG files Instead of using a graph, youcan use something like Inkscape to either trace over an image

Find more on images, image utilities, andprogramming with images in Chapter 2

1.3.2 Programming for Pennies

How about if you're a software developer who wants to workwith graphical frontend tool sets? After all, we've known foryears about Microsoft's developer networks with their $2,500price tag, and the tool sets from Adobe and other companiesthat cost in the hundreds, or even the thousands Unless you're

a professional using such tools for a living or a really dedicatedhobbyist, such prices are beyond most of us Even the

professional can't afford most of the tools nowadays—they'repriced for corporate access

As with processing photos or creating graphical files, there areopen source alternatives to most development environments.Anyone can use CSS and JavaScript to create a sophisticatedapplication running in multiple browsers without paying a dime.Most paid tools provide either a lighter version for free or, at aminimum, a trial of the full feature version so you can play

around with the technology for several days before making adecision to buy

Between open, free, and trial versions of software and

applications, we can easily explore the wondrous variety of webgraphics without having a "wondrous" amount of cash

I can't guarantee that all applications will run onall computers, but I will guarantee that none ofthe examples and applications covered in thisbook will require you to buy anything In somecases, you'll need to download trial software, butthe trials will last long enough for you to get afeel for the software and definitely complete the

exercises demonstrated in these pages.

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

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 graphicsare not very accessible, but a surprising number are, or at leastprovide 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

driven menu item allows access to site navigation regardless ofwhether a person is using a keyboard or a mouse

an image Providing a text link to go with an image's mouse-As for bandwidth, image size can be optimized with little or nodegradation in quality, and scripting can provide functionality toeasily 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 toone domain If you're serving up several images, only two can

be accessed at any one time when this limitation applies Toenhance the page loading experience, especially if you're using

a lot of images, you can create several virtual subdomains, such

as the following:

img2.somedomain.com

img3.somedomain.com

Splitting the images across these subdomains will decrease thepage 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 SVGand the canvas object, allow us to add sophisticated and

dynamic graphics at the cost of a few bytes of bandwidth forthe text to define the objects, plus a little CPU to create in theclient Newer versions of old favorites, such as CSS, providenew visual effects without any external object or files

JavaScript libraries, even the largest, can be both compressedand modularized so that only necessary objects are downloadedand bandwidth needs are minimized

With the increasingly popular use of handheld devices, such asthe new iPhone, sites have to play a virtual Gulliver, growingand shrinking gracefully to match their surroundings At a

minimum, sites can provide mobile CSS and programmaticallystrip images and Flash shows from a page At a maximum, webapplications using a variety of dynamic effects can provide

sophisticated applications for devices with web access

All three areas—accessibility, bandwidth, and mobile devices—can present challenges in the use of web graphics, but none are

so insurmountable that the use of graphics has to be eliminatedcompletely There's no need to take web pages back to the

version-one pages I described at the beginning of the chapter.How much of a challenge depends on how important the graphic

is to the site