日期：2016-3-29（原创文章,禁止转载）
图片已经成为网页设计中不可或缺的元素，但是对于普通网站来讲，图片也成为页面加载的一大负担。因此，一个好的网站要求站长合理的使用图片，灵活运用网页图片处理技巧和网页图片设计规则，让图片在传达信息和美化界面的同时又不会给网站的浏览速度带来影响。
在网页中使用用图片，先要处理要用到的图片，再利用网页制作工具在需要的位置插入相应的图片，然后设置其宽度和高度，添加文字说明。在这个过程中，图像设置规则显得尤为重要。
1 图片位置的选择与设置
通常网页图像主要包括网站logo，网站banner，网站导航和各种辅助修饰图片以及网页背景图片等等。这些图像位置的选择应该有利于浏览者接受信息和提高页面美感，做到既不喧宾夺主又能很好的传达信息。
一个网站页面的头部一般由导航和网站banner组成，网站设计者可以在bannar中投放广告吸引用户，并利用导航栏清晰的像用户展现网站的栏目结构。
网站logo做为网站的标志性图像，应该安排在页面最突出最显眼的位置，而辅助说明的小文字应当紧靠相应的文字。
对于大篇幅的文字内容，在适当的位置插入概括大意的图片可以帮助用户理解内容，而且还可以通过这些插入的图片划分章节。
以京东商城首页的头部页面为例，他总共包括网站banner，网站logo，搜索栏和导航三个部分。他直接将网站banner放在了顶部，将店内最重要的信息通过这个显著的位置发布出去。将logo放在了第二行位置来显示网站的品牌属性，同时网站banner和导航都用红色加深，突出了视觉效果，京东这么做的目的主要是从视觉效果，用户体验方面来考量的。
值得注意的是，图片位置的选择不必局限于常规手法，适当的发挥创意调整位置，能使网站更具有吸引力。
2 切图规则
对于一个已经设计好的网页效果图进行切图是主要涉及两个原则：一个以色块为单位尽量保持网页元素相对独立。二是尽量保证切线的水平对齐从而方便页面布局。大面积相同色块部分在切割时只需切割一小段，充分利用背景重复的特性，提高页面加载速度。
3 设置图片尺寸
在布局网页的时候，将切割好的图片插入相应的位置，不应使用图片的width和hight属性改变图片的尺寸，因为那样会使图片变形和失真。使用矢量绘图工具制作的图像适合保存为png格式，其大小尺寸应在设计的时候确定，变为位图后不宜对其进行缩放操作。
4 背景图片的设置
如果想在某个图片上添加文字，则可以将该图片设计为背景图片。除此功能外，灵活设置网页背景图片还能大大加快网页的加载速度。对于大面积相同色块的背景图片，我们可以只切割狭小的长条，然后利用背景图在水平和垂直方向上自动重复的特性设置背景图片。对于单一颜色的背景，我们则可以利用html单元格背景属性直接设置相应的背景颜色。
以上四点都是常用的图片使用技巧，不必太拘泥于这些规则，只要给用户带来好的用户体验那就是好的使用规则。同时在使用图片时还要考虑搜索引擎的优化，这一方面也是非常重要的一个方面。文章原创于 高端网站制作 ，转载请附带链接。
【推荐阅读】
