济南网站建设,网站运营维护,网站优化
优化方案您当前的位置:智达维网络科技 > 网站优化 > 优化方案 >

网站图片的优化技术研究

更新时间:2018-02-04 20:01:46 作者:千寻建站 访问量:9


网站图片的优化技术研究
1.引言
    随着信息网络技术的快速发展,各种图片在网络上大量传输和显示。由于图片表现的信息和内容非常丰富,所以在各种网络应用、网站、数据库中都有大量的使用。根据针对国内外网络信息的统计,图片内容所表示的信息和容量占到了当今网络数据的60%以上;网络图片在为网络用户带来非常直观、愉悦体验的同时也消耗了大量的网络传输、存储和计算机运算处理能力。为了提高用户的网络体验、加快网络传输速度、节约使用计算机资源。对网页图片的优化是一个非常重要的问题。国内外的大型网络服务提供商均把网络图片的优化技术作为工作的重点,制定了一系列的图片性能优化规范和措施,研究开发了一系列与图片优化存储、传输有关的程序框架、软件工具;上述工作为优化网站性能、提高传输和处理速度、节约网络和计算机资源做出了重要贡献,提高了网络用户的体验和感受。本文将在对网络图片数据格式进行简要介绍和分析对比基础上,对网络图片数据的处理、存储、传输等网站优化技术进行介绍。
2.网络图片数据格式
    网络系统中常见的图片格式主要包括JPEG、GIF、PNG、APNG、WebP、SVG等格式,BMP等格式图片由于没有采用任何压缩技术,所需要存储和传输的数据量特别大,所以在网络图片中一般不推荐使用。
各种常用的图片格式可以分为标量图和矢量图两种格式。标量图表现的内容丰富、以图像的像素为基础通过压缩得到,传输效率高,不直接支持动态缩放显示。矢量图以基本的图形元素(点、线等)和色彩为基础,可以任意缩放显示,在工程图中具有特别重要的地位。JPEG图像是在网络图片中使用最为广泛的一种图片数据格式,它把原始图片数据根据标准算法和设定的压缩参数有损压缩(压缩后的图片不可能完全还原为原来的位图数据图片)的方式得到目标图片,在显示时再解压显示。JPEG可以支持显示任意复杂的图片,对图片的颜色及形状等没有任何特殊要求,与所有的浏览器均具有良好的兼容性。JPEG图像格式不支持显示透明图片、也不支持显示动画。所以其使用也具有一定的限制。GIF图片是另外一种使用非常广泛的图片格式,它采用的是无损压缩算法,与目前所有的浏览器可以良好兼容。GIF图片支持显示动画和透明图片,所以在网络上被大量使用。由于GIF图片压缩后图片数据较大,采用较为简单的颜色搭配和图像元素可以部分弥补其压缩率不高的特点。GIF图片一般被用于显示小尺寸的各种动画。PNG图片也是一种在网络上应用非常广泛的图片格式,它采用的也是无损压缩的方式,所以其图片数据量较大。PNG的优点是可以支持以比较高效的方式显示透明图片,但是不支持动画显示。所以在网络上需要显示大尺寸的透明图片的时候一般优先选用PNG格
式的图片方式。
    此外,对于新版本的浏览器(Firefox、Chrome、Safari等),支持一些新型的图片格式的显示,例如APNG、WebP等格式。APNG是一种无损压缩格式的图片,支持半透明效果的动画。WebP是一种有损的压缩方式,可以支持复杂的图像和颜色的显示。上述图像格式由于支持的浏览器有限制,所以一般被用于某些浏览器平台可预知的场合。如果网页需要在不同的浏览器环境下正常显示,并不建议采用上述格式存储和传输图片。但是随着浏览器的发展和网络终端设备的不断更新,APNG、WebP等格式的应用也会逐渐增加。SVG是一种无损压缩的矢量图格式,一般用于图形简单,同时又需要良好的缩放体验的场合,可以实现动态控制的图片显示特效。SVG对浏览器也有一些要求,一般应在IE8及其兼容的浏览器上才能正常显示。
3.网络图片使用
    针对特定的网络应用,网络图片数据的优化首先需要考虑的问题是是否需要使用图片的方式来表示必要信息,合理使用图片可以优化网站的整体性能和显示效果,大量不合理使用图片,同时不采取必要的针对图片的优化显示技术,将使网站整体性能严重降低,同时也不利于提高用户的使用体验。在某些未经过优化的网站中,把需要而且可以用文字方式显示的信息在服务器上通过软件生成图片并缓存起来或者直接将可用文字显示的信息用图片方式显示。这种网页不但无法被基于文字的搜索引擎检索,也严重增加了网络负担。合理使用外部的图片数据处理库,也可以降低网络图片数据量,在各种网站上经常需要显示一些图片的特效(例如:渐变、阴影、圆角等),这些都可以用HTML、CSS、SVG代码实现,所使用的程序代码非常简洁,虽然使用了额外加载的图片处理库,但是在整体上可以显著降低数据量的大小和网页刷新显示速度。一般而言,额外加载的图片处理库在数据量上比图片要小很多,而一个库文件可以处理多张图片,所以效果非常显著。图像特效库的表现效果非常丰富,而且所需要的存储空间很小,传输方便,可以在分辨率不同的多种终端设备上展现出良好的效果。国内外很多的大型网站都通过使用 CSS效果、CSS动画等技术进行了优化,取得了较好的效果,实现了与分辨率无关的显示效果,可在任何分辨率和缩放级别上清晰显示图像,占用空间极小,运算处理速度快。此外,网络字体的合理使用也可以起到降低图片使用量的效果。网络字体的使用在保持较好的显示效果的同时还可以保持文字的可搜索性,扩展了显示的样式,所以被大量使用于网页优化过程中。在网页布局和设计阶段,对图片数据的合理规划是非常重要的一个环节。在良好规划的网站中合理使用各种图片数据,可以保证网站的简洁、高效、可维护等特点。直接、大量地使用各种照片、图片在网站建设过程中是非常不可取的,这将严重降低系统的性能。此外,在不可避免或有必要使用图片的情况下,应对图片数据进行必要的预先处理,调整图片内容和格式也是非常重要的一个环节。图像的预处理包括图像内容的调整和图片裁剪、缩放、图片压缩格式和参数的调整等方面。在对图片进行裁剪时,尽量贴合需要显示的图形区域,避免留下空白区域,否则将增加输出图片的实际文件大小。对于采用数码相机等设备拍出的照片,一般分辨率都是根据冲洗照片的要求设置的,图片尺寸大,像素点特别多,在网页上浏览时传输过大的图片严重影响传输速度,而在实际终端设备上根本无法按照原始尺寸显示图片,增加了前端的解压和显示处理时间。一般而言,网页中显示的图片不应大于所对应终端设备实际显示区域像素大小,必要时还可以适当降低。此外,同样的图片由于压缩格式和参数的不同实际输出的图片数据量也会有较大差别。在Photoshop处理图片时,优先选择“存储为web所用格式”,在相同的压缩参数下,图片数据可以降低一半以上。如果图片的色彩数较少,可以考虑使用PNG-8、GIF等格式输出图片;图片色彩和渐变比较丰富,则优先使用JPG格式。在综合显示品质和数据量的条件下,尽量选择效果好且压缩品质较低的压缩参数,可以达到缩小图片文件的目的。对于没有多通道透明显示需要的图片,应严格避免使用PNG24位等数据量特别大的输出格式。对于色彩简单的图像,GIF格式可以得到较小的图像文件。对于需要非多通道输出为透明格式的文件,优先选用GIF图像格式。除了处理图片数据文件外,采用必要的针对网络图片的显示技术也可以提高网页图片的综合显示性能。下面主要从网络图片的自适应显示与动态压缩两个方面进行介绍。
4.网络图片的自适应显示
    在网络图片显示的时候,由于终端设备显示器硬件分辨率不同,实际可显示区域的像素差别极大。例如:针对1920x1080和640x480两种显示终端。如果在界面上显示同一幅图片,为了保证在两个显示器上都得到比较满意的显示效果,只能根据1920x1080显示器的需要配置图片,在640 x480的显示器上显示时,网络服务器将传输1920x1080显示器所要求的图片到客户端,然后抽取出1/6的图像像素数据进行显示。对于分辨率较低的显示器而言,传输大尺寸的图像并进行变换处理是完全没有必要的。针对上述情形,比较合理的处理方式是前端浏览器获取显示终端的分辨率,然后根据实际分辨率从服务器获取适合分辨率的图片。这种处理方式具有显著的优点:可以减少不必要的图片数据加载和传输,实现了图片显示的灵活控制,即使通过网速较慢的终端访问网站也可以保证用户加载小图片并成功显示,可以减少或避免由于网络速度限制而加载失败的情形。这种方式可以通过不同的处理方式兼容所有浏览器,具有一定通用性。网络图片自适应加载显示的实例代码如下所示:<imgsrcset=”MyPic/Large.jpg 1240w,MyPic/Medium.jpg 620w,MyPic/Small.jpg 310w”sizes=”(min-width: 41.25em) 38.75em,calc(100vw - 2.5em)”src=”MyPic/medium.jpg”/>上述代码中img的src参数可保证在不支持srcset属性的浏览器中可以正常显示medium.jpg。在分辨率为1240、620、310的系统中分别显示Large.jpg、Medium.jpg和Small.jpg。sizes用于计算图片的显示尺寸。
5.网络图片的动态压缩
    在网站设计过程中,经常需要把相同的图片通过不同方式缩放显示。例如淘宝网中商品图片的缩略图就是一种动态缩略的显示方式。为了解决这个问题,一种比较简单的方式就是直接根据明确的预先需求,把图片按照不同比例缩放并存储在服务器中,但是这种方式不能动态调整显示大小、也会增加服务器端的存储容量。还有一种方式是直接修改脚本中图片的显示尺寸,这种方式在某些浏览器上可以比较合理显示,有的浏览器则显示不正常,而且大大增加了网络传输的数据量和前端的处理时间。针对上述应用,可以考虑采用编写网络图片的动态压缩程序实现图片的动态自适应压缩,这种处理方式具有网络传输数据量小、适应能力强的特点。通过·NET[5]、PHP和JSP 编写动态网页程序都可以实现图片的动态压缩。下面以·NET平台上实现网络图片的动态压缩进行简要介绍。在·NET平台上实现网络图片的动态压缩需要通过编写一般处理程序(ashx文件)。一般处理程序(HttpHandler)是·NET众多web组件的一种,ashx是其文件扩展名。httpHandler可以识别并处理http请求,和JSP中的servlet基本相似(JSP中servlet需要继承HttpServlet类)。一般处理程序需要实现IHttpHandler接口,该接口有一个虚拟方法ProcessRequest(HttpContextctx) 。在processRequest方法中可以提取Http请求参数并根据参数做出处理。HttpHandler的IsReusable成员可以表明其实例是否可以处理多个网络请求。在·NET实现网络图片压缩的过程中,主要通过processRequest提取图片路径、压缩参数,然后调用压缩工具实现图像的动态压缩。调用时代码格式如下:<img runat=”server” src=”~/Dynamicimage.ashx?src=/ Upload/Pic/Original.jpg&width=100&height=100” />上述代码中Dynamicimage.ashx为编写的一般处理程序文件单元的名称。src=”~/Dynamicimage.ashx?src=/ Upload/Pic/Original.jpg为需要压缩处理的原始图片,width=100和height=100为压缩的参数(要求输出图像大小为100x100像素)。参数名称的定义和Dynamicimage.ashx的具体实现方式有密切关系。
6.图片优化技术效果的测试
    根据本文优化方法,对某集团下属3个网站的图像数据进行了评估和优化。在优化前,上述网站的主页和常用页面中存在接近500张左右直接由数码相机导出的图片数据,网页中使用的图片数据量大,且内容、格式较多且不规范。在网站优化过程中,重新调整了网站的图片文件格式、布局方式和内容[6],添加了必要的程序代码对静态图片进行自适应调整和动态压缩传输。调整后,网站在相同硬件基础上性能得到了显著提升,网站访问时网页加载时间平均减少了30%以上。
7.总结
    本文主要介绍了网络图片优化的若干基本技术和技巧。在实际的工程实践中,完成一个网站的图片优化需要较多的经验,并需要有针对性地开展一系列精细调节和测试工作。网站图片优化是一门具有艺术特征的工程技术;一般情况下很难根据绝对的标准评价图片优化策略的细微差异和作用,个人的素质、经验和偏好对优化结果有较大影响。与此同时,图片优化也牵涉到一些网络编程方法和算法,合理使用程序可为图片优化性能的提升起到重要作用。

    文章说明:本站发布的所有文章,版权均属于智达维网络科技。如需转载、摘编或利用其它方式使用上述作品,请注明“转载自:智达维网络科技”或“转载自:智达维网络科技/网站优化网站建设相关内容”,谢谢您的浏览!

相关推荐
热线:0531-87583458 电话:0531-66812586 QQ:2676834962
Copyright 智达维网络科技 版权所有
ICP备案编号:鲁ICP备11034527号-1 鲁公网安备 37010402000703号

扫二维码加微信咨询

拨打客服热线

0531-87583458

在线客服