本发明涉及网页优化技术领域，尤其涉及一种web网页图片优化的方法。
背景技术：
图片内容已经占到了互联网内容量的62％，因而对于web性能优化来说，图片是优化的热点和重点。图片的格式选择不正确，在浏览器上的兼容性不好；不同的设备下，图片的尺寸没有相应改变，导致显示不清晰，用户体验不好的问题。
技术实现要素：
本发明要解决的技术问题，在于提供一种web网页图片优化的方法，保证在各个web网页浏览器下图片的正常显示，减少图片加载的时间，在较低像素的移动端设备下加快加载速度、节省流量。
本发明是这样实现的：一种web网页图片优化的方法，所述方法为：根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化。
进一步的，所述方法进一步具体为：web网页判断是否需要显示动态图片，是显示动态图片，则判断web网页是否只兼容OSX和IOS系统即可，是，则选择APNG格式的图片进行显示；否，则选择GIF格式的图片进行显示；不显示动态图片，则判断是否需要精确保留图片细节，否，则选择JPEG格式的图片进行显示，是，判断要选择的图片是否大于256色位图，是，则选择PNG-8格式的图片进行显示，否，则判断是否需要多阶透明显示，是，则选择PNG-32格式的图片进行显示，否，则选择PNG-24格式的图片进行显示。
进一步的，所述图片响应优化具体为：对网页图片的标签仍然使用img标签；
通过javascript脚本语言获取设备屏幕的视口viewport的尺寸，并将图片的信息存储在网页cookie中，传给一服务器；
服务器根据图片的信息，改变网页代码中img标签的src属性，从而对图片响应进行优化。
进一步的，所述图形显示优化具体为：使用CSS代替图片，
用CSS的设置元素的背景颜色background-image和设置背景图像的起始位置background-position属性，将多个页面上用到的背景图片合并成一个大的图片，将资源内嵌于CSS或HTML中，而不必单独请求，也不用加载多个图片，从而对图片显示进行优化。
本发明具有如下优点：本发明根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化，从而保证在各个web网页浏览器下图片的正常显示，减少图片加载的时间，在较低像素的移动端设备下加快加载速度、节省流量。
附图说明
下面参照附图结合实施例对本发明作进一步的说明。
图1为本发明方法流程示意图。
具体实施方式
请参阅图1所示，一种web网页图片优化的方法，所述方法为：根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化。
根据各种图片格式的特点(如下表格1)：
表格1
各个图片格式的特点
颜色丰富的照片，JPG是通用的选择：人眼的结构很适合查看JPG压缩后的照片，可以充分的忽略并在脑中补齐细节。
如果需要较通用的动画，GIF是唯一可用的选择：GIF支持的颜色范围为256色，而且仅支持完全透明/完全不透明；GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题。
如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式：SVG是使用XML定义的矢量图形，生成的图片在各种分辨率下均可自由放缩；SVG中可以通过JavaScript等接口自由变换图片特效，可以完成其中部分元素的自由旋转、移动、变换颜色等
如果需要清晰的显示颜色丰富的图片，PNG比较好：PNG-8能够显示256种颜色，但能够同时支持256阶透明，因此颜色数较少但需要半透明的情景(如微信动画大表情)可以考虑PNG-8；PNG-24可以显示真彩色，但不支持透明，颜色丰富的图片推荐使用(如屏幕截图、界面设计图)；PNG-32可以显示真彩色，同时支持256阶透明，效果最好但尺寸也最大。
其中，所述方法进一步具体为：web网页判断是否需要显示动态图片，是显示动态图片，则判断web网页是否只兼容OSX和IOS系统即可，是，则选择APNG格式的图片进行显示；否，则选择GIF格式的图片进行显示；不显示动态图片，则判断是否需要精确保留图片细节，否，则选择JPEG格式的图片进行显示，是，判断要选择的图片是否大于256色位图，是，则选择PNG-8格式的图片进行显示，否，则判断是否需要多阶透明显示，是，则选择PNG-32格式的图片进行显示，否，则选择PNG-24格式的图片进行显示。
在本发明中，图片尺寸的选择，这里的图片尺寸的选择，是一种响应式图片的实现方法。关于响应式图片的实现原因和必要：在不同的移动设备中一个CSS像素包含的设备像素是不同的；在高DPI(每英寸的像素)上需要使用分辨率高的图片；这使得图片在低DPI下造成不必要的浪费，用户要付出额外的带宽和等待时间。所述图片响应优化具体为：对网页图片的标签仍然使用img标签；
通过javascript脚本语言获取设备屏幕的视口viewport的尺寸，并将图片的信息存储在网页cookie中，传给一服务器；
服务器根据图片的信息，改变网页代码中img标签的src属性，从而对图片响应进行优化。
所述图形显示优化具体为：使用CSS代替图片，
用CSS的设置元素的背景颜色background-image和设置背景图像的起始位置background-position属性，将多个页面上用到的背景图片合并成一个大的图片，将资源内嵌于CSS或HTML中，而不必单独请求，也不用加载多个图片，从而对图片显示进行优化。
总之，本发明根据不同设备的web网页选择不同格式的图片和不同文件大小的图片进行显示，且对图片响应和图片显示进行优化，从而保证在各个web网页浏览器下图片的正常显示，减少图片加载的时间，在较低像素的移动端设备下加快加载速度、节省流量。
虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。