网站制作中网站图片处理的技巧汇总

来源：未知时间：2014-09-10 15:05点击：次

从事网站建设工作的人，在网站制作的过程中不可避免的要用到一些图片，即背景图片或者产品图片，这些得要一些使用技巧，然而在页面中恰到好处地使用图像能使网页更加生动形象并且美观。在网站建设中关于图片的格式，图片的大小，图片的分辨率都有很多使用的技巧，下面济南网站制作的小编就给大家分享下这方面的经验。

有的网站打开好久，图片才出来，有时候网速不太给力的时候，还会直接显示一个叉，针对这样的情况，牛企建站是怎么做的呢？

1. 网站中所有的背景图都放在一张图片上面，降低图片加载时长，提高网站打开速度

一个网站中都会有各式各样的背景图片，比如网站图标，栏目图标，栏目背景图等，都会多多少少的用到网站背景图，在使用html语言进行网页布局的时候，有两种办法可以把背景图片显示到网页上面，一种是直接使用需要展示的图片，然后通过background属性显示，另一种办法是使用一个整张的大图片，使用background的repeat属性定位背景图片的显示位置。实际证明使用后者的方法显示背景图片可以有效的提高图片加载速度，因为所有的背景图片都是放在一张图片上面，当网页进行加载的时候，会一下全部加载完这张图片，然后当再遇到使用这张图片的时候，就无需重复加载，提高了图片打开速度。

2. 网站中的图片尽量使用GIF格式的图片，以降低图片的体积大小

网站建设中最常见的图片的格式可分为jpg、gif、png三种格式，其中gif格式是在所有图片中体积最小的一种格式，因为gif格式的图片是以265种色彩组成，是最符合网站图片的一种格式，同样一张图片体积大小，gif格式要比其他两种格式容量小80%左右，在保证图片不失真的情况下，尽量使用gif格式的图片，在Phtopshop中，可以使用ctrl+alt+shift组合键把任意格式的图片储存为gif格式图片，其中gif格式图片属性。

3. 网站中存在jpg的图片，需要在储存jpg图片的时候，选用品质高、格式基线已优化模式

在网页切图的过程中，如果必须使用jpg的图片，如网站banner，网站广告图片这种高质量的图片的图片的时候，在储存图片的时候，我们要选择品质高、格式基线已优化、分辨率72的选项，这两种选择可以在一定程度上减少JPG图片格式的体积，做过平面设计的人员可能会知道对于印刷性的图片应该选用品质最佳、格式基线标准、分辨率300的选项，因为只有这种选项才能保证在印刷的过程中不会出现图片模糊的现象，不过我们做网页的图片不能使用这么高的配置，我们应该保证图片不失真的前提下，做到图片体积最小。

4. 网站中相同背景的图片，使用背景平铺的方法显示

在网站布局中，有些背景图片在一个范围内都是一样的效果，比如网站的导航，栏目的导航等，这时我们可以使用背景图片的平铺方法进行显示，把需要平铺的背景图片用photoshop切成宽度为1px的大小，然后使用background的repeat-x的方法，再设置上限定宽度的属性，就可以让该图片在设定的范围内达到横向平铺的效果，减少了网站加载图片的速度，减少网站页面打开时长。

以上就是牛企建站在网站制作中对网站图片处理的常用技巧了，当然类似的方法还有很多。下面是从网上搜罗总结的一些方法技巧，希望对大家有用。

1. 网站在设计的时候，就先要做好相应的设计，如背景图怎么设计，使用等。

2. 在网站切图的时候，要尽量做好裁剪，只展示必要的、重要的、同内容相关的部分。

3. 在输出图片的时候，图片大小要设置妥当，长宽像素就设成你所需要的大小，而不要输出大图片，然后使用的时候，再指定较小的长宽，缩小图片。

4. 尽量组合装饰性的图片，以节省http请求数，在具体使用时，采用CSS sprite的方式。

5. 页面上的边框，背景，尽可能的使用CSS的方式来展示，而不要用图片。

6. 图片使用上，能用png格式的尽量用，以替代过去常用的gif和jpeg格式。在保证质量的情况下，用最小的文件。

7. 在html中明确指定图片的大小。

8. 若使用photoshop的话，缩放图片通常会让图像模糊，可以用smart sharpen来让图片更为出色。

9. 对于GIF和PNG文件格式，最小化颜色位数，可使文件更小。

10. 对于GIF和PNG文件，最小化dithering，可使文件更小。

11. 如果图片上要添加文字，可能的话，就不要把文字嵌入到图片中，而是采用透明背景图片，或者CSS定位让文字覆盖在图片上，既能获得相等的效果，还能把图片更大程度的压缩。