Web性能优化之图片优化

http://get.jobdeer.com/6513.get

其中APNG和WebP格式出现的较晚,尚未被Web标准所采纳,只有在特定平台或浏览器环境可以预知的情况下加以采用,虽然均可以在不支持的环境中较好的功能降级,但本节暂不讨论这两种格式

http://isux.tencent.com/introduction-of-webp.html

什么是 WebP?

WebP(发音 weppy,项目主页),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。

2010 年发布的 WebP 已经不算是新鲜事物了,在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用,如腾讯新闻客户端、腾讯网、QQ空间等,同时也有一些针对 WebP 的图片格式转换工具,如 智图iSparta 等。

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

科技博客 Gig‍‍‍aOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以节省几 TB 的带宽,页面平均加载时间大约减少 1/3;Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。

兼容性与可用性

现在问题来了:WebP 的支持度和兼容性如何?

根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。假如你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库(Android 、iOS )。

综合技术方案

对于不同场景下 WebP 的使用,我们总结了一些解决方案,如下:

1、若使用场景是浏览器,可以:

  • JavaScript 能力检测,对支持 WebP 的用户输出 WebP 图片
  • 使用 WebP 支持插件:WebPJS

2、若使用场景是 App,可以:

  • Android 4.0 以下 WebP 解析库(链接
  • iOS WebP 解析库(链接

3、转换工具:

时间: 2024-10-29 04:54:03

Web性能优化之图片优化的相关文章

Web性能优化:图片优化

程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片.从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择.到尚未被

Android APP内存优化之图片优化

网上有很多大拿分享的关于Android性能优化的文章,主要是通过各种工具分析,使用合理的技巧优化APP的体验,提升APP的流畅度,但关于内存优化的文章很少有看到.在Android设备内存动不动就上G的情况下,的确没有必要去太在意APP对Android系统内存的消耗,但在实际工作中我做的是教育类的小学APP,APP中的按钮.背景.动画变换基本上全是图片,在2K屏上(分辨率2048*1536)一张背景图片就会占用内存12M,来回切换几次内存占用就会增涨到上百兆,为了在不影响APP的视觉效果的前提下,

Cocos2d-x优化中图片优化

在2D游戏中图片无疑是最为重要的资源文件,它会被加载到内存中转换为纹理,由GPU贴在精灵之上渲染出来.它能够优化的方面很多,包括:图片格式.拼图和纹理格式等,下面我们从这几个方面介绍一下图片和纹理的优化.1.选择图片格式要回答这个问题,我们需要先了解一下目前在移动平台所使用的图片文件格式,以及这些图片格式Cocos2d-x是否支持.图片格式有很多,但是在移动平台主要推荐使用的PNG,JPG也可以考虑,而其它的文件格式最好转化成为PNG格式.我们先了解一下它们的特点.1.PNG文件PNG文件格式设

android内存优化之图片优化

对图片本身进行操作.尽量不要使用setImageBitmap.setImageResource.BitmapFactory.decodeResource来设置一张大图,因为这些方法在完成decode后,最终都是通过java层的createBitmap来完成的,需要消耗更多内存.因此,改用先通过BitmapFactory.decodeStream方法,创建出一个bitmap,再将其设为ImageView的source,decodeStream最大的秘密在于其直接调用JNI>>nativeDeco

Android优化之图片优化

1. 对图片本身进行操作 尽量不要使用 setImageBitmap.setImageResource. BitmapFactory.decodeResource 来设置一张大图,因为这些方法在完成 decode 后,最终都是通过 Java 层的 createBitmap 来完成的,需要消耗更多内存.因此,改用先通过 BitmapFactory.decodeStream 方法,创建出一个 bitmap,再将其设为 ImageView 的 source,decodeStream 最大的秘密在于其直

(转)web性能优化

前端是庞大的,包括 HTML. CSS. Javascript.Image .Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提供更为友好的体验. 2. 从服务商角度而言,优化能够减少页面请求数.或者减小请求所占带宽,能够节省可观的资源. 总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用. 前端优化的途径有很多,按粒度大致可以分

Web性能优化:What? Why? How?

转:http://www.cnblogs.com/dojo-lzz/p/4591446.html 为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据著名的`2-5-8`原则: 当用户在2秒以内得到响应,会感觉系统的响应非常快 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以 当用户在5-8秒之内得到响应,会感觉系统的响应非常慢,但还可以接受

web性能优化--总体总结。

web性能优化: 1,从http方面考虑:我们应该尽量减少http请求数量,因为前后端通信的成本很大,请求一个100k的文件和请求两个50k的文件的时间是相差很多的.那么我们应该怎么做呐?                 (1),合并js,css,减少请求的数量.使得性能提升 (2),使用雪碧图将背景图片合并成一个文件. 2,从代码需求来分析 (1),非核心的代码延迟来进行加载或者动态进行加载,将公共代码就行抽离,使用cdn存储静态的资源,在浏览器进行缓存资源. 总结的不全,希望以后可以一直总结

关于 Web 性能优化

压缩源码和图片 JavaScript 文件源代码可以采用混淆压缩的方式,CSS 文件源代码进行普通压缩,JPG 图片可以根据具体质量来压缩为 50% 到 70%,PNG 可以使用一些开源压缩软件来压缩,比如 24 色变成 8 色.去掉一些 PNG 格式信息等. 选择合适的图片格式 如果图片颜色数较多就使用 JPG 格式,如果图片颜色数较少就使用 PNG 格式,如果能够通过服务器端判断浏览器支持 WebP,那么就使用 WebP 格式和 SVG 格式. 合并静态资源 包括 CSS.JavaScrip