当前位置：网站首页 >> 建站知识 >> 网站技术 >>


郑州做网站公司整理的网站图片的处理技巧

【来源：郑州凯讯网站    发布人：郑州凯讯公司    发布日期：2014-10-26】

从事网站建设工作的人，在网站建设的过程中不可避免的要用到一些图片，有的是背景图片，有的是广告图片，也有的是产品和服务图片，在页面中恰到好处地使用图片能使得网页更加美观、生动，对用户具有吸引力。在图片的使用中，关于图片格式、图片大小和图片分辨率等都有一定的技巧，下面郑州做网站公司整理了网站图片的处理技巧，来与大家分享一下这方面的经验。

一、网站中的图片尽量使用GIF格式的图片，以降低图片的体积大小：
网站建设中最常见的图片其格式主要有三类，即jpg、gif、png三种，这三种图片以gif格式的体积最小，因为gif格式的图片是以265种色彩组成，是最符合网站图片的一种格式，同样一张图片体积大小，gif格式要比jpg格式图片大小的70%左右，但gif格式的图片在清晰度、色彩丰富程度上远不如jpg和png格式图片。当然如果能在保证图片不失真的情况下，尽量使用gif格式的图片，但如果使用gif格式图片无法保证图片质量，那么，我们就不应该在使用gif格式的了，而应以图片质量为前提了。按照郑州做网站公司的经验，较大的图片、色彩丰富的图片需要使用jpg和png格式的图片，而较小的图片可以适当采用gif格式的。此外，gif格式的图片还可以做成动画的形式，动画图片放在网站上，能够带给网站以美观的界面。

二、网站上相同背景的图片，使用小图片但采取平铺的方法更好：
对于网站上的背景图片，一般都是较为单一的画面，在这种情况下，我们没有必要使用较大的背景图片，而是采取加载较小的背景图片，并采取平铺的方法将较小的图片“平铺”成较大的背景。比如网站的导航背景图片、栏目的背景导航图片、整个网页的背景图片等等，我们可以在显示这些背景图片的时候，就可以采取平铺的方法进行显示。方法是把需要平铺的背景图片采用常用的图片处理软件如photoshop切成宽度为1px的大小，然后使用background的repeat-x和repeat-y的方法，再设置重复的宽度，就可以让该图片在设定的范围内达到横向或者竖向平铺的效果，这种技术实际上是减小了加载的图片大小，而让客户端承担了平铺的工作，这可以在很大程度上减少了网站加载图片的速度，减少网站页面打开时长。

三、为了降低图片加载的延时，提高网站打开速度，网站中的背景图都可以放在一张图片上面：
一个网站上都会有各式各样的背景图片，比如网站图标、栏目图标、栏目背景图等等，都会多多少少的用到网站背景图片，在进行网页布局的时候，有两种办法可以把背景图片显示到网页上面：
1、直接使用需要展示的一个个图片，通过background属性显示出来，这种加载图片的方式，如果图片较多，会对网页的加载造成延时，不利于网页打开速度。
2、将所有的背景图片集中在一整张图片上，然后使用background的repeat属性定位背景图片的显示位置，这种加载图片的方式即使在图片较多的情况下，也不会造成大的延时。
两种加载图片的方法，相对来说第二种方法显示背景图片可以有效的提高图片加载速度，因为所有的背景图片都是放在一张图片上面，当网页进行加载的时候，会一次性全部加载完这张图片，然后当再遇到使用这张图片上的部分图像时，就无需重复加载，而只需要指明图片上的哪一部分图像即可，这显然提高了图片加载速度。

四、下面是郑州做网站公司收集整理的一些处理网站上图片的技巧，可供各位参考：
1、在做网站切图的时候，要做好图片剪裁和缩放工作，只展示必要的、重要的、同内容相关的部分，不必要的部分剪除掉，如果需要放大或者缩小图片，则需要在保证图片质量的情况下进行缩放，不能因为缩放图片而影响了图片质量，导致图片模糊不清。
2、尽量把要显示在网站上的图片组合起来一张大图片，以节省网页打开时的http请求次数，在具体使用这些图片时，一次性加载图片，并采用CSS sprite的方式来加载各个小图片。
3、图片在使用上，能用png格式的地方要尽量使用png格式的图片，以替代过去常用的jpg格式，相比较来说png格式的图片要比jpg格式的图片体积要小一些，在保证图片质量的情况下，用png格式的图片更好一些。
4、在html中引用图片的时候，要在img标签内尽量指明图片的width和height属性，也即明确指定图片的大小，这样对搜索引擎更友好一些，对客户端显示图片也更快一些。