图片的切法、图片的质量大小和图片的热点制作-20131020

1、大家都知道页面要求快速的加载进入让用户清楚的看到首先就是要图片要小，图片的品质低载入和显示的速度就会快但是，往往就是因为这个而导致一张图片用户根本看不出清是什么东西，所以在这里一般切图的话，新手都是直接切一张图片后放进html里面显示出来这样展示的慢还拖时间。

所以我们可以把一样大的图片比如 600*800的图片我们可以切成4张 600*200的图片给用户展示出来这样还可以节省用户的载入时间和提升图片的显示速度，一般内容都是居中的所以在一般头部的头片也是切的和内容的宽度相符后多余的长度都用背景方式插入到css里面，这样就大大的提升了页面的整体速度和用户的体验感觉。

2、图片质量的大小是可以通过ps来调节的当某些图片有它自己的标准的时候就需要切图人员来注意到图片的大小和图片的清楚度

下面就是展示出图片的品质在哪里设置


[img]http://dl2.iteye.com/upload/attachment/0090/3589/ed8211df-6aa2-3cee-b4fb-6a04777ed07a.jpg[/img]

为什么要设置图片的品质呢，直接100不就好了，不行的要有些页面的里的图片展示是有规定的比如不能大于多少品质，单个图片不能超过kb的规定哪么不知道的同学就可以在这边进行调节

下面的是图片的大小在哪里展示的


[img]http://dl2.iteye.com/upload/attachment/0090/3591/19d2df44-47df-3148-b7a7-d4da27b5193a.jpg[/img]

在调节图片质量的时候就可以看到图片的大小根据个人的需要来调节你的图片做到在规定的最大话的用户体验感觉。


3、就是图片的热点问题

这一段就是图片的热点设置

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" />
</map>

在图片里面定义 usemap 属性将图像定义为客户端图像映射，图像映射指的是带有可点击区域的图像。

在将这个id传入到下面的 area里面让其可以读取这张图片知道是哪张图片需要做热点

shape是定义热点的形状 circle是圆形 rect是块型 coords就是定义热点的在哪里什么地方多大 href就是链接

主要用来确定位置和大小的是 coords="距离左上角多少,距离左下角多少,距离右上角多少,距离右下角多少" 数字越小热点区域就越大反过来数字越小热点区域就越小 所以要设置热点区域的大小和位置的话 设置距离四个角的多少就可以直接呈现出来了，在没有设置的时候热点区域是整张图，当设置了以后就会根据你的四个角的距离来调节热点区域的位置和大小