资源描述:
《网页制作教程 教学课件 作者 赵丰年 1_chap3-images.ppt》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、Chapter3Images1ObjectivesTellthedifferencebetweendifferentimagerepresentations.ComparedifferentWebgraphicfileformats.Masterthebasicimageprocessingskills.UseimagesonaWebpageappropriately.2ImagerepresentationThereare2typesofimage:bitmappedandvector.Bitmap---animageisdividedi
2、ntoamatrixofpixels.---eachpixelisassignedabitpattern.---torepresentablackandwhiteimage,1representswhitepixeland0representsblackone.---torepresentacolorimage,apixelisdecomposedintothreecolors(RGB).3ImagerepresentationForacolorimage,eachpixelhasthreebitpatterns:onetorepresen
3、ttheintensityoftheredcolor,onetorepresenttheintensityofthegreencolor,andonetorepresenttheintensityofthebluecolor.4ImagerepresentationVector---animageisdecomposedintoacombinationofcurvesandlines.---eachcurveorlineisrepresentedbyamathematicalformula.Forexample,alinemaybedesc
4、ribedbythecoordinatesofitsendpoints,andacirclemaybedescribedbythecoordinatesofitscenterandthelengthofitsradius.---theyusemuchlessstoragespacethanbitmapimages,butdonotlookasrealisticasbitmapimages.5WebgraphicimageformatAlthoughtherearedozensofgraphicfileformatsoutthereinthe
5、world,onlythreearesupportedbywebbrowsersforuseonwebpages:GIF(pronounced“jiff”)JPEG(pronounced“jay-peg”)PNG(pronounced“ping”)6GIFTheGIF(GraphicInterchangeFormat)isthefirstfileformattobesupportedbywebbrowsers.GIFsareindexedcolorfileswithamaximum8-bitpalettecapacity,whichmean
6、sthataGIFcancontainamaximumof256pixelcolors.GIFfilesaremostappropriateforgraphicsthatcontainareasofflatcolor,suchaslogos,cartoon-likeillustrations,icons,andlineart.TransparentGIFscanbeused.AnimatedGIFscanbeused.7JPEGJPEG(JointPhotographicExpertsGroup)filescontain24-bitcolo
7、rinformation.YoucancontroltheamountofcompressionwhenyousaveanimageasaJPEG,soyoucanprioritizesmallerfilesizesorbetterimagequality,basedonyourneeds.Photographicimages,oranyimageswithsubtlegradationsofcolor,arebestsavedasJPEGfiles,becauseJPEGcompressionismostefficientoncontin
8、uoustonesofcolor.8PNGUnlikeGIFandJPEG,PNG(PortableNetworkGraphic)wasdevelopedspecifically