网站设计中对图片的选用和处理

   今天有朋友咨询一个问题,他的网站打开的速度越来越慢了,好像是在网页中加载的图片太多了。想寻找一些对图片的处理方式。连云港久爱网络公司(92网络)对于这种情况,一般需要对网站做下分析,找出影响网速的真正原因。如果是仅是图片问题,92网络就说一说自己关于“网站设计中对图片的选用和处理”的相关经验。

        来说说几种常见的图片格式和在网站上的使用情况

         PNG(Portable Networf Graphics)的原名称为"可移植性网络图像",是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。由于PNG非常新,所以目前并不是所有的程序都可以用它来存储图像文件,但Photoshop可以 处理PNG图像文件,同时在图片保存方面,PNG可以保存背景为透明,目前背景可以透明的图片格式有:*.tif,*.gif,*.png,他们生成的文 件都是比较大的。

   同时,因为PNG是矢量图,一般图片处理或网页放大缩小上,不容易失真。但很多时候PNG图片也很大,我们就需要考虑下其它的图片格式了。

        PNG同时支持8位和24位的图像。24位PNG,支持160万种不同的像素颜色且支持Alpha透明效果,这就意味着,无论透明度设置为多少,PNG图片均能够与背景很好的融合在一起。


   GIF文件最突出的地方就是他支持动画,同时GIF也是一种无损的图片格式,也就是说你在修改图片之后,图片质量并没有损失。再者GIF支持半透明(全透 明或是全不透明)。所以一般GIF图会比较大些,但对于一些单像素,或小图片,反而会比JPG文件要小,根据Google的说法,GIF适用于很小或是较 简单的图片(10×10以下或是3种颜色以下的图片)。所以我们对于网页上的小部件图片和简单动画可以使用GIF来做。

        GIF是8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指,所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色(一个多余256种颜色的图片若用gif图片保存会出现失真)。楼主说的失真应该是指这方面吧?

      JPEG文件的扩展名为.jpg或.jpeg,其压缩技术十分先进,它用有损压缩方式去除冗余的图像和彩色数据,获取得极高的压缩率的同时能展现十分丰富生动的图像,换句话说,就是可以用最少的磁盘空间得到较好的图像质量。

       你可以根据你网页的需要,灵活运用好各种图片格式。

     但对于有些GPG图片我们压缩后,还是觉得有些大,是因为图片的像素比例比较高。

    连云港92网络公司在这里再给你支几个招,说一说网页图片的处理方式:

     首先,用一个简单方法,就可以调整好。那就是——截图。

        这一招真好不错

    人的眼睛对图片的分辨率在72dp以下,所以一般网页的图片基本为72dp。所以我们在上传图片的时候,不需要高精度的图片。那么我们只需要用截图工具在截取另存一下图片,这样保存的图片就是72dp的图了,适合在网页上使用。

      第二招:我们我们如果是在Photoshop中制作的图片或是网站素材,在保存图片时,切记选择”存储为Web和设备所用格式”。因为这样往往在同等质量下能获得更小的图片体积(相比直接”存储为”)。

     第三招:使用Smush it工具

     Smush it包含在著名的著名插件YSlow之中,并确保已经安装了Firebug.使用方法很简单,只需要在YSlow中打开”tool”下的All Smush it! 将会跳转到一个新页面,对当前网页的图片进行压缩,而这些压缩都是在不损失图片质量下进行的。所以你大可放心。

     第四招:技术处理

      如果网站需要更高精度的图片,可以适应一下预载技术,就像百度图片那样,开始的时候先加载低精度的图片,让网页尽快打开,后再显示高精度的图片。


     好了,内容不少,也在网上找了些文章来验证一下,手打的也够累了,相信以上的内容应该可以解决他的问题了。欢迎追问,在网站建设和优化上能有更多的交流。

手机用户浏览,请扫描此二维码: