OReilly painting the web may 2008 ISBN 059651509x

PaintingtheWeb
byShelleyPowers
Publisher:O'Reilly
PubDate:April28,2008
PrintISBN-13:978-0-596-51509-6
Pages:655
TableofContents|Index

Overview
Doyouthinkthatonlyprofessionalswithexpensivetoolsand
yearsofexperiencecanworkwithwebgraphics?Thisguide
tossesthatnotionintothetrashbin.PaintingtheWebisthe
firstcomprehensivebookonwebgraphicstocomealongin
years,andauthorShelleyPowersdemonstrateshowreadersof
anylevelcantakeadvantageofthegraphicsandanimation
capabilitiesbuiltintotoday'spowerfulbrowsers.Shecovers
GIFs,JPEGs,andPNGs,rasterandvectorgraphics,CSS,Ajax
effects,thecanvasobjects,SVG,geographicalapplications,and
more--everythingthatdesigners(andnon-designers)useto
literallypainttheWeb.Moreimportantly,Shelley'sownloveof
webgraphicsshinesthroughineveryexample.Notonlycan
youmasterthemanydifferenttechniques,youalsocanhave
fundoingit.TopicsinPaintingtheWebinclude:
GIF,JPEG,PNG,lossyversuslosslesscompression,color
management,andoptimization
Photoworkflow,fromcameratowebpage,includinga
reviewofphotoeditors,workflowtools,andRAWphoto
utilities
Tricksforbestdisplayingyourphotosonline
Non-photographicrasterimages(iconsandlogos),with
step-by-steptutorialsforcreatingpopular"Web2.0"effects

likereflection,shinybuttons,inlays,andshadows
Vectorgraphics
AnSVGtutorial,withexamplesofallthemajorcomponents
TipsandtricksforusingCSS
InteractiveeffectswithAjaxsuchasaccordionsandfades
Thecanvasobjectimplementedinmostbrowsers
GeographicalapplicationssuchasGoogleMapsandYahoo
Maps,withprogrammingandnon-programmingexamples
Visualeffectssuchasformsanddatadisplaysintableor
graphics
Webdesignforthenon-designer
Graphicsarenotessentialtothewebexperience,buttheydo
makethedifferencebetweenasitethat'sfunctionalandone
that'slively,compelling,andexciting.Whetheryouwantto
spruceupawebsite,usephotostoannotateyourstories,
createhotgraphics,orprovidecompellingdisplaysforyour
data,thisisthebookforyou.


PaintingtheWeb
byShelleyPowers
Publisher:O'Reilly
PubDate:April28,2008
PrintISBN-13:978-0-596-51509-6
Pages:655
TableofContents|Index

PaintingtheWeb

Preface
Chapter1.YouMustHaveFun
Section1.1.WhatWasGoodEnoughforGrandpappy…
Section1.2.DrawMe!
Section1.3.$$$$$$$$$$$$
Section1.4.Graphics:TasteGreat,LessFilling
Section1.5.ItHurts!MakeItStop!
Section1.6.WebGraphicsHallofShame
Section1.7.OnwiththeWondrousVariety
Chapter2.Imagine
Section2.1.RasterGraphicsandRGBColor101
Section2.2.JPEG
Section2.3.GIF:LosslessandPaletted
Section2.4.PNG
Section2.5.Images:Annotated,Embedded,andOptimized
Section2.6.StealThis:Images,Copyright,andHotlinking
Section2.7.ImageStorage
Chapter3.Photographs:FromCameratoWebPage
Section3.1.TheWebPhotographer'sWorkflow
Section3.2.WorkingwithRAWImages
Section3.3.EditingPhotos:BendingLight
Section3.4.ColorMatchThatGroup:Optimizationin


Numbers
Section3.5.It'sBlackandWhiteandNotRedAllOver
Section3.6.TheIllustrativeEffect
Section3.7.KnockoutsandExtractions
Section3.8.ASurveyofDesktopPhotoEditors
Section3.9.OnlineEditors:FauxtoandPicnik

Section3.10.PhotoWorkflowSoftware
Section3.11.PhotoWorkflow:CameratoWebRedux
Chapter4.TheWebAsFrame
Section4.1.TheArtofThumbnailSizing
Section4.2.TheCreativeArtofThumbnails
Section4.3.ExpandingThumbnails
Section4.4.EmbeddingPhotos:CondimentandSpice
Section4.5.PlatingPhotos
Section4.6.GeneratedGalleriesandSlideshows
Section4.7.GallerySoftwareontheServer
Section4.8.ABitofCode
Chapter5.PopGraphics
Section5.1.TheGraphicToolbox:Shapes,Layers,Gradient,
andBlur
Section5.2.ShinyButtons:Gel,Wet,andGlass
Section5.3.BadgesandBows:BeyondtheButtons
Section5.4.ReflectingonReflection,andShadowing
Revisited
Section5.5.Reverse-EngineeringIdeas
Section5.6.InstantinTime:Screenshots
Chapter6.VectorThis:EarlyDaysandMarkup
Section6.1.WebCGM
Section6.2.The3Ds
Section6.3.VML
Section6.4.HelloSVG
Chapter7.SVGBootcamp


Section7.1.SVGFull,Basic,andTiny
Section7.2.BrowserSupport:StandoffishorIntegrated

Section7.3.TheStructureoftheSVGSpace
Section7.4.SVGElements
Section7.5.Paths,Patterns,andMarkers
Section7.6.RevisitingtheViewportandtheviewBox
Section7.7.Transformations
Section7.8.SVGTools
Section7.9.StaticSVGSecrets
Chapter8.CSSÜberZone
Section8.1.SelectorMagic
Section8.2.CSSTipsandTricks
Section8.3.divPlayDough
Section8.4.CSSToolsandUtilities
Chapter9.DesignfortheNon-Designer
Section9.1.TheElementsofPageDesign
Section9.2.WebPagesAreLikeOgres,andOgresHave
Layers
Section9.3.FlexibleDesigns
Section9.4.Colors:MakeYourPageHappy,MakeYourPage
Sad
Section9.5.TypographyforthePage
Section9.6.WebDesignTools
Section9.7.AdditionalReadings
Chapter10.DynamicWebPageGraphics
Section10.1.TheQuickIntrototheDOM
Section10.2.ColoringHighlights
Section10.3.ChangingClassandTransparency
Section10.4.ProgrammingwithImages
Section10.5.Accordions:SmooshableSpaces
Chapter11.Canvassing
Section11.1.Cross-BrowsercanvasSupportandMicrosoft's

Silverlight
Section11.2.canvasBasics
Section11.3.SavingState
Section11.4.LayeringandClipping
Section11.5.canvasEffects
Chapter12.DynamicSVGandcanvas
Section12.1.EmbeddedAnimation
Section12.2.ScriptingSVG
Section12.3.EmbeddedScripting
Section12.4.AnimatedClock:TheHelloWorldofAnimated
andInteractiveSVG
Section12.5.Scriptingcanvas:Zoom!
Chapter13.ImageMagic:ProgrammingandPowerTools
Section13.1.ServingUpPhotos:Insta-Slideshows
Section13.2.ManipulateImageswithPHP/GD
Section13.3.ForgettheInterface:TheMagicof
ImageMagick
Section13.4.ProgrammingwithImageMagickandIMagick
Chapter14.TheGeoZone
Section14.1.MappingwithGoogle
Section14.2.Yahoo!'sMaps
Section14.3.LivingWithintheGeoweb
Chapter15.LikePeanutButterandJelly:DataandGraphics
Section15.1.Graphs:EveryWhichWaybutStatic
Section15.2.MiningYourPhotos
Section15.3.RosyGlowofCompletion
Section15.4.OneLastLookatDataandVisualization
Section15.5.Thedata:URI

Section15.6.AttheEndofThisRainbow
Colophon
Index


PaintingtheWeb
byShelleyPowers
Copyright©2008ShelleyPowers.Allrightsreserved.
PrintedinCanada.
PublishedbyO'ReillyMedia,Inc.,1005GravensteinHighway
North,Sebastopol,CA95472.
O'Reillybooksmaybepurchasedforeducational,business,or
salespromotionaluse.Onlineeditionsarealsoavailablefor
mosttitles(safari.oreilly.com).Formoreinformation,contact
ourcorporate/institutionalsalesdepartment:(800)998-9938or

Editor:

Simon
St.Laurent

Indexer:

LucieHaskins

Production
Editor:

Rachel
Monaghan

Cover
Designer:

Karen
Montgomery

Copyeditor:

Genevieve
d'Entremont

Interior
Designer:

RonBilodeau

Illustrator:

Jessamyn
Read

Proofreader: Rachel
Monaghan
PrintingHistory:



April2008:

FirstEdition.

NutshellHandbook,theNutshellHandbooklogo,andthe
O'ReillylogoareregisteredtrademarksofO'ReillyMedia,Inc.
PaintingtheWeb,thecoverimage,andrelatedtradedressare
trademarksofO'ReillyMedia,Inc.


Manyofthedesignationsusedbymanufacturersandsellersto
distinguishtheirproductsareclaimedastrademarks.Where
thosedesignationsappearinthisbook,andO'ReillyMedia,Inc.
wasawareofatrademarkclaim,thedesignationshavebeen
printedincapsorinitialcaps.
Whileeveryprecautionhasbeentakeninthepreparationofthis
book,thepublisherandauthorassumenoresponsibilityfor
errorsoromissions,orfordamagesresultingfromtheuseof
theinformationcontainedherein.
ThisbookusesRepKover™,adurableandflexiblelay-flat
binding.
ISBN:978-0-596-51509-6
[F]


Preface
Ask20differentpeoplewhattheterm"webgraphics"meansto
themandyou'llget20differentanswers:images,photos,
illustrations,rastergraphics,bitmaps,SVG,Photoshop,EXIF,
CSS,webdesign,JPEG,Ajax,GIMP,GIF,developingwith
images,animations,buttons,icons—theyallfallunderthis
ratherall-encompassingterm.

WhenIthinkofwebgraphics,theonewordthatcomestomeis
"fun."FromtheveryfirsttimeIprogrammedthelayoutofa
houseusingFORTRAN,Photoshoppedaphoto,accessed
metadatafromanimage,followedstepstocreatea"shiny"
button,animatedadisplay,createdaCSSdesign—nomatter
howusefultheyare,theseusesofgraphicshavebeen,and
shouldbe,fun.Contrarytoexpectations,onedoesn'thaveto
beaprofessionalgraphicsartistordesignertohavefunwith
webpages.Idon'tconsidermyselftobeespeciallyartistic,and
I'mdefinitelynotadesignerbytrade.However,I'veenjoyed
workingwithwebgraphicsforyears.Outsideoffreedrawing,or
originatinggraphicalconceptsordesigns,mosteffectscanbe
re-createdjustbyfollowinggivenstepsorusingwell-designed
anddocumentedtoolsandtechnologies.
Youdon'thavetospendthousands,either.Toolsrangefrom
freetohundredsofdollars,withmostofusabletogetbywith
thosetoolstowardthefreeendofthespectrum.Eventhose
toolsthathaveapricetaghavetrials,soyoucangivethetool
arunbeforedecidingtobuy.
Regardlessofyourartisticability,thestateofyourpocketbook,
oryourexperience,onethingthatyoudoneedbeforeworking
withwebgraphicsisaninterestintryingnewthings.Youalso
needtobewillingtodipyourtoesintovariousweb
technologies,becausemanyweb-basedgraphicsarebasedon
technologiessuchasCSS,JavaScript,orserver-side
functionalitiessuchasImageMagickorPHP.


Idon'tthinkit'spossibletowriteawebgraphicsbookthat
coverseverything"butthekitchensink,"butItried.Included

areoverviewsofthespecsandtheconcepts,suchasJPEGsand
lossycompression;howtoensureyourphotoslookgreat
online;howtocreatepageobjects,suchasashinyWeb2.0
buttonorreflections;PHPapplicationsthatcreateslideshowsor
generateimages;cameratowebpagephotoworkflows;
interestingCSSdesigneffects;andfadesandothereffects
createdwithJavaScript.
Manyoftheexamplesdon'trequireanyprogramming
experience,butseveraldorequiresomeexperienceworking
withPHPorJavaScript.I'vetriedtokeeptheprogramming
simple,easytofollow,andcleantoread.Someexposureto
bothlanguagesisneeded,butyoudon'thavetobeanexpert.
SeveraloftheexamplesalsouseXMLandCSS,butagain,such
useiskeptassimpleaspossible.Youdon'thavetobeexpertor
pro,eitheratgraphicsortheWeb,toworkwithanyofthebook
examples.

P2.1.HowtoUseThisBook
Thechaptersinthisbookcanbereadinanyorder,butthereis
amethodtothemadnessunderlyingitsorganization.First,the
bookmovesfromworkingwithstaticgraphics,usingtoolssuch
asPhotoshopandGIMP,tousingprogramminglanguages(PHP
andJavaScript)togenerateormodifygraphics.Tocomplement
thisorganization,theuseofweb-specifictechnologyincreases
asyouprogressthroughthebook.
Speakingofwebtechnologies,thereareseveralcoveredinthis
book.Tools,too.Thisisnotthetypeofbookthatyou'llwantto
gulpdowninacoupleofsittings.Instead,itisabookyou
shouldsipinsmallinstallments,readingthroughsomechapter
sections,tryingouttheexamples,tryingoutthetoolsonyour

own,beforemovingontoanewtopic.
Severalapplicationsarecovered,butthereareprobably


thousandsoftoolsandutilitiesfocusedonwebgraphics,so
what'scoveredhereisnothingmorethanasample.Several
factorsgovernedmychoicesofthetechnologiesusedinthe
book:thetool/utility/technologyissignificantorrepresentative
inthefield,hasuniqueorinterestingproperties,isrelatively
uncomplicatedtoinstall,and,mostimportantly,doesnotcost
anythingtouse—atleast,notwhileyou'retryingoutthe
examplesinthisbook.
Allapplicationsdiscussedinthisbookareeitherfreeto
downloador,ifit'sacommercialorsharewareproduct,come
withatleasta30-dayfreetrial.

P2.2.HowThisBookIsOrganized
AsI'vementioned,youcanreadthechaptersinanyorder,
thoughIwouldrecommendreadingChapter7before
progressingintothelatersectionsofthebook.Startingfrom
thebeginning,though….
Chapter1,YouMustHaveFun
Includesanintroductiontothebook,aswellasanoverview
ofhowthebookdefines"webgraphics."Alsoincludedisthe
WebGraphicsHallofShame,whereformer"luminaries"
suchasspacerGIFsandBLINKarecovered.

Chapter2,Imagine
ProvidesanoverviewoftheinitialimagetypesofGIF,JPEG,
andPNG,includingdiscussiononlossyversuslossless

compression,colormanagement,andoptimization.Also
includedareissuesofcopyright,howtopreventhotlinking
ofimages,andvariousonlinestoragetechniques.
AdobePhotoshop,GIMP,andImageMagickalsoare
discussedinthischapter.Anyofthesetoolscouldbeused
withtheexamples,butnoneofthetoolsarenecessary.


Chapter3,Photographs:FromCameratoWebPage
Coversthephotoworkflow.Itincludesareviewofseveral
photoeditors,workflowtools,andRAWphotoutilities,plus
editsthatcanimproveaphotospecificallyforweb
publication.
Toolsusedinthischapterare:
UFRaw
AdobeCameraRaw*
AdobeDNGConverter
AdobePhotoshopCS3*
AdobePhotoshopElements*
GIMP
NET.Paint
PaintShopPro*
AdobeLightroom*
Apple'sAperture*
Fauxto
Picnik
(Asterisksindicatesoftwarewithapricetag.)

Chapter4,TheWebAsFrame
Continuestheworkoftakingaphotographfromcamerato

theWebbyexaminingthedifferentwaysaphotocanbe
displayedonline.Theapproachesexploredinclude


thumbnailsembeddedinthepage,slideshows,andgallery
software.Thischapteralsoexploresapproachestobetter
presentingphotos,frombackgroundcolorstopresentation
effects.
Toolsusedinthischapterare:
Gallery(onlinephotoalbumsoftware)
Lightbox2.0(embeddedphotoexpansionsoftware)*
Aperture*andLightroom*
AdobePhotoshopCS3*
PostcardViewer*
PhotoshopElementsforWindow*
TheJava-basedGalleryConstructor

Chapter5,PopGraphics
Focusesonthenon-photographicrasterimages,including
icons,logos,shinybuttons,andreflections.Someofthe
morepopularWeb2.0effects—reflection,shinybuttons,
inlays,andshadows—arecreatedusingstep-by-step
tutorials.Inaddition,thischaptercoversscreenshottools
forpostingscreenshotsonline.
Toolsusedare:
AdobePhotoshop*
GIMP
Skitch
SnagIt*

Chapter6,VectorThis:EarlyDaysandMarkup
Introducestheconceptofvectorgraphicsandexplores
someearlierandcurrentvectorformats,includingVRML
andVML.Thischapterthenmovesintoabasicintroduction
totheScalarVectorGraphic(SVG)format,includinghowto
useSVGinapage,andsomeofthevectorgraphicseditors.
Toolsusedare:
Inkscape
Sketsa(non-timed,fullyfunctionaldemo)
GIMP

Chapter7,SVGBootcamp
ProvidesatutorialonworkingwithSVG,includingan
overviewandexamplesofallthemajorcomponents.This
chapteralsocoversthedifferentwaysthatSVGcanbe
incorporatedintowebpages,includinghowtoworkwith
embeddedSVG.Thebasicshapesarecovered,asarepaths
andcurves.Inaddition,theuseofgradientsandtextis
included.Inordertofocusonthetechnology,Iuseonly
texteditorsandInkscapetocreatetheexamples.

Chapter8,CSSÜberZone
FocusesontipsandtricksrelatedtoCSS,ratherthan
providingageneralintroduction.Includedareinstructions
onhowtoresetglobalwhitespace,howtobettercontrol
yourlayout,andhowtoworkwithmultipleclasses.The
CSStoolCSSEditorisexploredinthischapter,aswellas
CSSvalidatorsandbrowserextensions,whichareallfreely
available.

Chapter9,DesignfortheNon-Designer
Coverssomeofthebasicsofdesign,includingaccessibility,
validity,mobile-readiness,andespeciallyreadability.The
useofcolorisexplored,includingitsroleinsettingmood
andenhancingthevisualexperience.Severalwebsitesare
visited,toexplorewhatworks—andwhatdoesn't—with
each.

Chapter10,DynamicWebPageGraphics
Getsintointeractiveeffectscreatedusingtheobjects
describedpreviouslyinthisbook.Thisincludessomeofthe
morepopularAjaxvisualeffects,suchasAccordionsand
fades.Thischapterdoesn'tuseanyspecializedtoolsor
editors.

Chapter11,Canvassing
Coversthecanvasobject,asit'susedwithSafariand
definedinHTML5.Thischapterprovidesanoverviewof
canvas,includinganintroductiontocanvasobjectsand
freeformpaths,aswellastheabilitytoworkwithimagesin
canvas.Again,onlyatexteditorisusedfortheexamples.

Chapter12,DynamicSVGandcanvas
Providesamorein-depthlookatthedynamiccapabilitiesof
bothSVGandcanvas,includingaddinginteractionwitha
scriptandcreatingdynamiceffects.Alsoincludedis
coverageoftheSVGanimationelements,aswellascanvas
bitmapmanipulations.

Chapter13,ImageMagic:ProgrammingandPowerTools
Coversvariousimagedevelopmentandgeneration
applicationsthatareaccessibleeitheratthecommandline,
throughapplications,orviadevelopmentwithPHPand/or
JavaScript.ThischaptermakesheavyuseofImageMagick
andtheoperatingsystem'sbuilt-inimagelibraries.The
examplesarecreatedusingrelativelysimplePHPand
JavaScript,andrequireaccesstoanImageMagick
installationandaccesstothecommandline.Thischapter
alsoprovidesexamplesofhowtogenerateimages.

Chapter14,TheGeoZone
Coversmanyofthenewgeographicalapplications,including
GoogleMapsandYahoo!Maps.Thischapterincludesboth
non-programmingandprogrammingexamples,andcovers
variousgeo-specificmarkups,aswellascreating
applicationsinPHPandJavaScriptthatarespecifictothe
geoweb.

Chapter15,LikePeanutButterandJelly:DataandGraphics
Focusesonvisualeffectsrelatedtotraditionalweb
applications,suchasformsanddatadisplaysintablesor
graphics.Thischapteralsolooksatworkingwithmetadata,
includingmetadatavisualizations—demonstratedinSVG
andthecanvaselement,andevengeneratedusingPHPand
graphicslibraries.Nospecializedtoolisneeded,butthe
chapterexamplesmakeuseofseveralfreelyavailablePHP
andJavaScriptlibrariesandrequiresomeexperience

workingwithbothprogramminglanguages.

P2.3.ConventionsUsedinThisBook
Thefollowingtypographicalconventionsareusedinthisbook:


Italic
Indicatesnewterms,URLs,filenames,andfileextensions.

Constantwidth
Indicatescomputercodinginabroadsense.Thisincludes
commands,elements,options,variables,attributes,keys,
requests,functions,methods,types,classes,modules,
properties,parameters,values,objects,events,event
handlers,XMLandXHTMLtags,macros,andkeywords.

Constantwidthbold
Indicatescommandsorothertextthatshouldbetyped
literallybytheuser.

Constantwidthitalics
Indicatestextthatshouldbereplacedwithuser-supplied
valuesorbyvaluesdeterminedbycontext.
Thisiconsignifiesatip,suggestion,orgeneral
note.

Thisiconindicatesawarningorcaution.


P2.4.UsingCodeExamples

Thisbookisheretohelpyougetyourjobdone.Ingeneral,you
mayusethecodeinthisbookinyourprogramsand
documentation.Youdonotneedtocontactusforpermission
unlessyou'rereproducingasignificantportionofthecode.For
example,writingaprogramthatusesseveralchunksofcode
fromthisbookdoesnotrequirepermission.Sellingor
distributingaCD-ROMofexamplesfromO'Reillybooksdoes
requirepermission.Answeringaquestionbycitingthisbook
andquotingexamplecodedoesnotrequirepermission.
Incorporatingasignificantamountofexamplecodefromthis
bookintoyourproduct'sdocumentationdoesrequire
permission.
Weappreciate,butdonotrequire,attribution.Anattribution
usuallyincludesthetitle,author,publisher,andISBN.For
example:"PaintingtheWebbyShelleyPowers.Copyright2008
ShelleyPowers,978-0-596-51509-6."
Ifyoufeelyouruseofcodeexamplesfallsoutsidefairuseor
thepermissiongivenhere,feelfreetocontactusat


P2.5.HowtoContactUs
Pleaseaddresscommentsandquestionsconcerningthisbookto
thepublisher:
O'ReillyMedia,Inc.
1005GravensteinHighwayNorth
Sebastopol,CA95472
800-998-9938(intheUnitedStatesorCanada)
707-829-0515(internationalorlocal)
707-829-0104(fax)
Wehaveawebpageforthisbook,wherewelisterrata,

examples,andanyadditionalinformation.Youcanaccessthis


pageat:
/>Tocommentorasktechnicalquestionsaboutthisbook,send
emailto:

Formoreinformationaboutourbooks,conferences,Resource
Centers,andtheO'ReillyNetwork,seeourwebsiteat:
/>
P2.6.Safari®BooksOnline
WhenyouseeaSafari®BooksOnlineicononthecoverofyour
favoritetechnologybook,thatmeansthebookisavailable
onlinethroughtheO'ReillyNetworkSafariBookshelf.
Safarioffersasolutionthat'sbetterthane-books.It'savirtual
librarythatletsyoueasilysearchthousandsoftoptechbooks,
cutandpastecodesamples,downloadchapters,andfindquick
answerswhenyouneedthemostaccurate,currentinformation.
Tryitforfreeat.

P2.7.Acknowledgments
Iwanttothanktheteamthatworkedwithmeoncreatingthis
book,includingmylong-timeeditor,SimonSt.Laurent,andmy
techreviewers,LorenWebster,ElaineNelson,andChuqVon
Rospach.Inaddition,I'dliketothanktheproductionteam:Ron
Bilodeau,designer;Genevieved'Entremont,copyeditor;Lucie
Haskins,indexer;RachelMonaghan,productioneditor;Karen
Montgomery,coverdesigner;andJessamynRead,illustrator.
I'dalsoliketothankthedevelopersandcompaniesthat
providedthetoolsandtechnologiesusedinthebook.I'd

especiallyliketosendashoutouttothecreatorsofopenand


freelyavailabletools—suchasImageMagick,GIMP,andothers
mentionedinthesechapters—foralltheirhardwork.Thanksto
thegenerosityofthesekindpeople,theworldofwebgraphics
isavailabletoeveryone.


Chapter1.YouMustHaveFun
Doyourememberyourveryfirstwebpage?Thefirstoneyou
eversaw?IrememberthefirsttimeIsawawebpage.I'mnot
sureifsuchamemoryisunusual,orifmanypeopleremember
theirfirstglanceatwhatwastobecomeubiquitousinavery
shorttime.
Thetimewaslate1993orearly1994.IwasworkingatIntelas
acontractsoftwaredeveloperwhenoneoftheotherdevelopers
askedmeifI'dseenthisapplicationcalledMosaic.Iwasn't
amongthefirsttoseethisnewtypeofapplication,butatthat
timetheWebwasstillinitsmostprimitiveform.Thefirstweb
pageIsawhadawhitebackground,alarger,bolderheader,
andtextformattedintoseveralparagraphs.Itwasn'tanything
special,andnothingtoexciteinterest.However,inthepage
wasathingcalledahypertextlink,anunderlinedpieceoftext
that,whenclicked,openedanotherpage—oneonacompletely
differentcomputer,connectedtothefirstonlybyadomaindrivenlocation.
Thesecondsite,likethefirst,wasalsoincrediblysimple.It
featuredthesameblacktextonawhitepage,andtheonly
typographicalvariationwasthelargerfontforthetitles.Itwas
completelyemptyofanygraphics.NoCSS;noimagesorFlash;

notevenaFONTorBLINK.However,thetwopagesdid
demonstrateallthatwascriticalabouttheWeb:bothpages
wereavailabletoanyonewithanInternetconnection,eachwas
ataspecificlocationthatcouldbecalledupagain,andthe
pageswereservedthroughacoordinationbetweenserverand
clientthatwasbothunprecedentedandmesmerizing.
Whatanoddwaytobeginabookaboutgraphics:describing
plainwebpagescompletelydevoidofanygraphics.Thereisa
purposebehindmymadness.Bydescribingthisearliestglimpse
oftheWeb,Ihopetomakeanimportantpoint—thatweb
graphicsarenotanessentialcomponentofthewebexperience.
Wecanstripapagedowntothemostminimalmarkupwithout


anyuseofCascadingStyleSheets(CSS),images,ScalarVector
Graphics(SVG),orFlash,andthepagecontinuestobeWeblikeanduseful.
Graphicsarenotnecessarytothewebexperience.Theycan,
however,addimmeasurablytotherichnessoftheWeb,making
thedifferencebetweenasitethat'slively,compelling,and
exciting,andonethat'smerelyfunctional.Bylookingatweb
graphicslessasanessentialcomponentoftheWebandmore
asanexhilaratingcompanionandaccessory,wecanbeginto
freeourselvesfromtherestrictionson,andrequirementsfor,
webgraphicsthathavesprungupovertheyears,andtopush
againstthe"musts"thathaveconstrainedtheiruse.Mustssuch
asthefollowing,forexample:
Webanimationisgood.Ontheotherhand,webanimation
isbad.SameforFlash,Ajax,scriptedeffects,SVG,the
canvasobject,andsoon.
Thecreationanduseofwebgraphicsshouldbelefttothe

professionals.Onemusthaveyearsoftrainingandbe
hugelydedicatedtoworkwithwebgraphics.
Sophisticatedgraphicsrequireexpensivesoftwareand
equipmenttoproduce.
Webgraphicsareinaccessiblebandwidthpigsthateat
mobiledevicesforlunch.
Webgraphicsareseriousbusinessbecause,aseveryone
knows,workingwithwebgraphicsishard.
Somanymusts,solittletime.
I'mremindedofoneofmyfavoritescenesfromtheKevin
CostnermovieRobinHood.Inthemovie,aMoornamedAzeem
(playedbyMorganFreeman)issittingattheedgeofavillage
celebration,lightshiningonhisdarkskin.Acutelittlevillage
girlapproacheshimshylyandasks,"DidGodpaintyou?"


Azeemrespondsinsurprisewith,"DidGodpaintme?"Hethen
laughsgentlyandreplies,"Forcertain.""Why?"sheasks.
"BecauseAllahloveswondrousvariety."
Allthevariousformsofwebgraphics—fromCSStoimages,
FlashtoSVG—canbemanythings,includinguseful,functional,
andprofessional.Leavingasideallthesepractical
considerations,though,Iliketothinkthatwhatgraphicsaddto
theWebisawondrousvariety.Tosupportsuchaview,one
can'tbehelddownbyallthemusts;theonlyreal"must"with
webgraphicsisthattheydon'tinterferewiththefunctionalityof
thepage.Oncethat'sassured,anythinggoes.
Intherestofthischapter—therestofthisbook,infact—we'll
lookatthewondrousvarietyofwebgraphics.Intheprocess,
we'llalsoshowwecanbusteveryoneofrulesjustdescribed,

andhaveablastdoingso.

1.1.WhatWasGoodEnoughfor
Grandpappy…
Afunctionalworldmightbeefficient,butit'snotterribly
interesting.Itwouldbelikelivingonadietofbananas,nutand
seedgranolabars,andvitaminwater—itmightkeepyoualive,
butitwouldn'tbefuninthelongrun.Intheend,when
functionalityispushedupagainstindividualityandchoice,
individualitytriumphs.BlackcarsweregoodenoughforFord,
butnottherestofus.BlackandwhiteTVwasuseful,butwe
wantedInLivingColor.ThewholepremisebehindtheiPhoneis
thatonecanneverhavetoomanycolorbuttonstotouch.The
pushforvarietyhasbeentheforerunnerfortheoverall
evolutionofanyinventioninthepast,andtheWebisno
exception.
Ifallwebpagesweresimpletext,wewouldn'tneedthe
enhancementswe'veachievedinservingupwebapplications.
Weaddedgraphics,though,whichpushedthecolor
requirements,aswellasthesizesofpages.Ourmonitors


improved,bothinsizeandnumberofcolorssupported.
Thenwethought,howniceitwouldbetobeabletoadd
interactionandanimationtopages.WecreatedanimatedGIFs,
Flash,andJavaScript-driveneffects,whichattractedmore
peopletomoreapplications,increasingthedemandontheWeb
yetagain,leadingtoyetmoreimprovementsintheunderlying
technology.
Music.Didsomeonementionmusic?Musictodownload,music

toshare,musictocreateandpublishonline,andmusictosell.
Injustafewshortyears,theiTunes,eMusics,andAmazons
haveredefinednotonlyhowweusetheWeb,buthowwefind,
purchase,andlistentomusic.
Ofcourse,nowwe'refacedwiththeultimatemedia:video,
includingcompletemoviesbeingstreamedfromsites.Let'ssee,
tonightIthinkI'llwatchCorethroughNetflix.OrperhapsI'll
watchMaxHeadroomthroughJoost.
Pop!TherewenttheWeb!NoneofthisisessentialtotheWeb,
buthavingaccesstosuchthingshasbecomeessentialtous.
SomewouldsayitwastheeconomyoftheWebthatpushed
improvementsinwebservices.Iputsuchimprovementsfirmly
onthegraphicalgoodies.
Whichoftheitemsmentioned,though,arewebgraphics,the
topicofthisbook?Mostpeoplethinkofimagefileswith
extensionsofJPEG,GIF,orPNGwhentheyheartheterm"web
graphics."However,Iconsideranythingthatimpactsthe
visualizationofawebpage,aboveandbeyondthecomponents
thatprovidetheinitialstructure,partofthefamilyofweb
graphics.Thisincludes:
Imagefiles,aswewouldexpect
Visualattributesassociatedwiththepageelements,and
theCSSthatcontrolsthem
Embeddedorintegratedgraphics,suchasVML,VRML,SVG,


andthecanvaselement/object
Scriptedeffects,suchasthosemadepopularwithDHTML
andnowAjax
Packaged,interactiveanimationssuchasthoseprovidedby

Flash
Frameworksandlibrariesthatgenerategraphicaleffects
usinganyoftheabove
Theoneitemmissingisvideo,andthat'sprimarilybecause
videoexamplesarealittlehardtoembedinbookpages.
Perhapsbythetimethisisreadyforthesecondedition,we'll
haveaworkaroundforthisparticularchallenge,andI'lladdit
tothelist.Fornow,otherthanvideoandFlash,theseitems
formthebasisofthisbook.