当前位置: 北京SEO > seo建站 >

返回上一页

如何改进网站大图呢?


文章来源:猎搜云    2017-08-26 03:43

   在网站建设过程中,有个网站存在可以使得网站视觉有更好的提升,进而增加了网站用户体验度,不知道你发现没,网站大量的图片会影响网站大打开速度,那么我们要怎么处理这些图片呢?要是网站打开速度慢,用户就会关闭网站页面,去找其他网站,这白白错失了客户。如何改进网站大图呢?


   网站建设中网站图片处理技巧总结


   一、网站中所有的背景图都放在一张图片上面,降低图片加载时长,进步网站打开速度


   一个网站中都会有各式各样的背景图片,比如网站图标,栏目图标,栏目背景图等,都会多多少少的用到网站背景图,在使用html语言进行网页布局的时候,有两种办法可以把背景图片表现到网页上面,一种是直接使用必要展示的图片,然后通过background属性表现,另一种办法是使用一个整张的大图片,使用background的repeat属性定位背景图片的表现位置。现实证实使用后者的方法表现背景图片可以有用的进步图片加载速度,由于所有的背景图片都是放在一张图片上面,当网页进行加载的时候,会一下悉数加载完这张图片,然后当再碰到使用这张图片的时候,就无需重复加载,进步了图片打开速度。下图所透露表现的一张图片上面放置了所有的网站所需图片,然后可通过代码background: url(“image/bg.gif”) no-repeat 10px 20px ;定位调用。


   二、网站中的图片尽量使用GIF格式的图片,以降低图片的体积大小


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


   三、网站中存在jpg的图片,必要在储存jpg图片的时候,选用品质高、格式基线已优化模式


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


   四、网站中存在png的图片,假如png背景透明,应该加入防止IE6 png背景透明失效的JS代码


   偶然候我们在进行网站建设中,面对比较壮丽的结果,会用到使用PNG格式的图片,其实gif格式图片也可以做到背景透明的结果,不过因为gif的色彩值的限定影响,像类似阴影结果的透明背景,gif就做不到了,只能通过png格式图片做阴影透明的结果。在使用png作为透明背景图片的时候,我们发如今IE6中,png透明的结果不表现了,成了一些蓝色的块状表现,这时我们必要在网页中加入防止IE6 png格式透明失效的JS代码,详细代码将在文章结束提供下载。


   <!--[if IE 6]>


   <script src=“DD_belatedPNG.js”></script >


   <script >


   DD_belatedPNG.fix(‘*’);


   </script >


   <![endif]-->


   五、网站中雷同背景的图片,使用背景平铺的方法表现


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


   六、网站中纯色的背景图片,应该使用CSS的方法控制,尽量削减图片的使用


   有一些纯色的背景图片,我们完全可以没有需要使用图片的方法进行表现,使用css属性也可以达到同样的结果,毕竟CSS的加载速度要比图片的加载速度要快许多的,还有像边框之类也可以使用CSS的属性,如许也同样可以进步网站的打开速度。


   网站建设中图片的处理技巧应该根据网站现实的切图进行详细的操作,能不用图片的地方我们就用CSS代替,能用GIF的图片的时候就不要使用JPG或者PNG格式的图片,假如非要使用JPG或者PNG格式的图片也应该在图片处理细节上面多加考虑,避免出现欣赏器不兼容的征象。想要建设一个比较漂亮,有视觉冲击力的网站,网站图片的使用是必不可少的,不过我们应该把每种类型的图片处理到最好,才能把网站建设的最完善。


上一篇:如何优化建的站

下一篇:要怎么选择关键词呢?