图片是网页跟着文字最早进进群集多媒体的对象。有效的经常图片设置能极除夜地丰富 、丑化网页界面 。独霸的图跟着带宽和用户屏幕尺寸的片格添加
，愈来愈多的网页网站在页面中独霸除夜幅图片 ，人们也更偏向不雅不雅不雅不雅鉴赏有超卓图片的经常网站  。

网页图片的独霸的图选择

不合种此外网站对图片的需求各不不异，此次要表示在对图片圭表类型的片格选择和图片在界面中的比例大年夜小上。屈就图片的网页掉落踪掉落踪编制，其圭表类型除夜致分为摄影类与矢量类。经常

摄影类图片来***照，独霸的图图片可以直不美不雅不雅不雅不雅不雅不雅地默示主题  ，片格侧重于照实地默示产品本身 ，网页是经常以，电子商务类网站出格喜悦爱好高清的独霸的图摄影类图片
。如Lecoqsportif官网的全数图片均为服装鞋类的真实照片拍摄 ，且对图片质量请求很高。对次要信息 ，概略页面会给出高清的细节图片
，辅佐用户多方位领构和品的属性、细节及产品下身终局。

矢量类图片是用图形软件绘制的 。该类图片气焰多变 ，尺寸大年夜小矫捷，具有很强的装潢性。良多笼统图形
、图表、图标都属于矢量类图片。如英国动力Evoenergy消费指南网站中 ，其布景除夜量独霸矢量插画图片，图形回结综合，色采搭配亮丽，将机械的动力破钞数据用矢量插画的编制揭穿，使得图表信息可视化 、定见意义化。

再如Mailbakery网站，它独霸了除夜量超卓的***矢量图来宣传它们定制化的邮件处事。当鼠标单击并切换第一屏下方不合的导航图标时，上方Banner区域就被更调成照顾的图片内容，令用户随便邃晓，过目难忘 。全数网页非论是默示网站笼统的Banner图片 ，仍是导航图标都因不合独霸矢量插画的编制而令其视觉气焰上抵达了高度不合。

现如今非论是摄影图片仍是矢量图片 ，独霸除夜图作为网页布景愈来愈受迎接，有的甚至是全屏图片 。如Martina Sperl家居网站（见图6.11）首页将全数布景都展满了除夜图，全局导航结实在界面右边，其方针是让用户无缺沉沦在夸姣的家居糊口中。在其lookbook页面中一样也独霸了全屏图片布景 ，它模仿杂志的版式，奇妙地将界面一分为二 ，当用户单击右边场景内某个家居商品时 ，右边则会展示该商品的单品图 ，若感欢欣乐乐喜悦爱好还可单击右边单品图进进该产品的具体页面。

当然安妥独霸摄影图片来做网站布景可以汲引网页的视觉终局 ，但图片的加载仍是若干很多若干良多若干很多若干良多若干很多若干会影响网站速度，是以这类筹划较合用于筹划复杂的品牌企业网站 、时髦类网站、专题网站等。格式与优化网站中图片的格式圭表类型以放除夜后可否能了然地展示为维度 ，可分为位图格式与矢量图格式两种 。

1.位图格式

位图格式是网页筹划中最经常独霸的图片格式 。图片有本身结实的尺寸大年夜小 ，放除夜后不克不及了然展示 。假定将一个网页“另存为”，会看到文件夹中保管除夜量的JPG、PNG、GIF各类格式标图片

这3种格式是位图中最类型 、也是最具代表性的格式
，它们有着各自的益处
，筹划师切图输进时必须屈就图片本身需求，选择安妥的格式 。JPG、PNG 、GIF 3种图形格式圭表类型特点比照以下
 。

（1）JPG是一种有损膨胀的格式，它可以将图象膨胀在很小的储存空间 
，以24位色彩存储单个光栅图象，支撑224（约1670万）种色采，特别很是契合储存像素色采丰富的图片、照片等（见图6.14)，这些图片即便有略微的损掉落踪落真也不随便随便察觉。但JPG不合实用来储存有了然边沿的线条图、图标或文字等图片 。

（2）GIF是一种无损膨胀的格式 ，它限制了色采默示身手、可以有效地俭仆文档存储空间。GIF只具有8位的色彩深度信息，支撑28（256)种色采 
。当图片中的色采在256色以内时，独霸GIF可以掉落踪掉落踪相当好的输进质量 ，同时兼顾了文件大年夜小
。是以GIF特别很是合实用来默示扁平化图标（见图6.15） 、线条插画、文字等部分的输进 ，同时还支撑全通明静态图片和动画图片格式，能兼容全数不雅不雅不雅不雅鉴赏器。

以一张450像素×390像素的照片切图为例，分袂输进JPG 、GIF两种格式（见图6.16）来做个比照 。两张图的了然程度相当 ，但GIF格式中的渐变色呈颗粒状，文件大年夜小为92.4KB，JPG格式渐变色过渡天然，文件大年夜小仅为26.4KB，较着JPG格式更契合储存色采丰富具有渐变色的照片图象。

PNG分为PNG-8和PNG-24两种格式，后背的数字是代表这类PNG格式最多可以索引和存储的色彩值。“8”代表28次方也就是256色，PNG-8与GIF图片展示的特点特别很是接近 。“24”则代表224（约1600多万）种色采，也就是说即便碰着色采丰富的渐变色PNG-24也能了然展示。

在通明度上PNG-8与GIF一样 ，支撑图片的无缺通明与无缺不通明；而PNG-24格式支撑图片全通明及半透较着示 
。这里的通明图片近似于PS源文件中的一个图层，图象以外的空间不展示
。全通明与半通明的分辨在于全通明的alpha值为0，放置网页上为一个无缺、不透底的图；半通明的alpha值可以肆意设置，似乎一个水印
。如都可饮品的网站（见图6.17），推荐饮品的文字布景与coco通明塑料瓶都均为PNG-24格式 ，透过两个图片均能看幻想下场下的木纹肌理。

当然PNG-8和PNG-24都支撑全通明图片，但存储的终局却除夜不一样，假定将一个蛋糕的图片存成两种PNG格式（见图6.18），放在一个布景物上，比照终局会创作创造PNG-8格式图片邻近会有白色的杂边 ，内存占用大年夜小为25.6KB，而PNG-24格式标图片邻近滑腻、干净 ，内存大年夜小为101KB 。由此可以看出貌似完竣的PNG-24格式窘蹙的中心就是该格式文件所占空间较除夜 ，是以图片在选择切图格式时要均衡图片质量与其所占空间 。

2.矢量图格式

矢量图格式标有SVG（Scalable Vector Graphics）。其特点一是文件体积小，二是可以被除夜量的膨胀，图片可无量放除夜而不损掉落踪落真，可以完成互动和滤镜终局，三是此格式既支撑筹划师在筹划软件中筹划后保管，还支撑法度圭表类型员经由过程代码直接生成图形。

如在Illustrator软件上钩整洁个200像素×200像素西瓜的图片 ，将图形分袂保管为JPG、GIF 、SVG 3种格式。

先比照JPG 、GIF两种格式终局，两张图的了然程度相当，JPG格式标图片默许布景为白色，文件大年夜小为6.06KB，GIF格式标图片布景为全通明
，文件大年夜小为2.68KB。而储存为SVG格式标图片独一2KB ，用不雅不雅不雅不雅鉴赏器翻开时能跟着不雅不雅不雅不雅鉴赏器的窗口的扩除夜而扩除夜 ，图片还是了然 。斥地与筹划人员都可在SVG格式中变换代码来调剂图形的格式 。

3 图象的肌理

肌理 ，又称质感，因为物体的材料不合 ，外不雅的列举、构造、构造等不合 ，是以产生发火粗拙感、滑腻、软硬感不合，不合的质感和肌理，会令人产生发火不合的心思感应感染。如rosa网站（见图6.21），网站的桌面肌理布景营建一种进餐的氛围 ，加强食欲感。

I do官网钻石戒指选用银色的丝绸作为布景营建出戒指温柔的质量。Thenestonline网站除夜面积的木纹布景营建出一种复古的氛围。该品牌的产品以牛皮纸张作为衬景，衬托花费物的纯天然、朴质的特点。