首先，老大拿了两个网站工具的分析跟我说，让我分析一下我们网站的图片有没有什么方法优化。

【网站分析工具】
webpage test： http://www.webpagetest.org/
谷歌pagespeed insights： https://developers.google.com/speed/pagespeed/insights/

【图片格式与编码】

我们网站png很少，主要是jpg。

JPEG的编码规则见度娘 http://baike.baidu.com/view/7679.htm

另一种更好的理解是借助Photoshop的3个编码选项 http://www.photoworld.com.cn/post/8614

1. 基线（“标准”）
2. 基线已优化
3. 连续（3/4/5）

总体上讲就是基线编码和连续编码。基线编码可做无损的哈夫曼编码优化。连续编码就是传说中的渐进式图片，这种需要浏览器支持JPEG2000。

【我们讲的是无损压缩】

JPEG是有损压缩格式，压缩图片大小的代价是失真。然而也还是有无损压缩的部分，比如刚才说的哈夫曼编码优化。

然而我们的图片已经是优化过的，为什么谷歌还提示能进一步压缩？

通过分析谷歌优化前优化后图片的元数据发现，JPEG图片中其实保存着EXIF即相机信息和编辑器信息。但这不是大头，只有24字节。

最天杀的元数据大约有900字节的信息是个叫XMP的东西。。。大概就是PS的编辑信息。所以谷歌所说的优化，就是移除图片的元信息。

【图片压缩工具】

分析过程中用到的工具：

JPEGsnoop 在windows下使用，用于分析图片的元信息和编码情况
jpegtran 谷歌推荐的压缩工具，在linux下压缩图片、移除元信息
coobird.thumbnailator java中的图片压缩工具，底层实现是调用java的ImageIO
Photoshop Adobe的知名的图片编辑图片转换工具

最后的结论是。。。PS就能解决的问题，搞那么复杂作甚。。。哈哈～

网站图片优化-解码JPEG的更多相关文章

  1. Web 性能优化： 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

  2. 深度学习原理与框架-Tfrecord数据集的制作 1.tf.train.Examples(数据转换为二进制) 3.tf.image.encode_jpeg(解码图片加码成jpeg) 4.tf.train.Coordinator(构建多线程通道) 5.threading.Thread(建立单线程) 6.tf.python_io.TFR(TFR读入器)

    1. 配套使用: tf.train.Examples将数据转换为二进制,提升IO效率和方便管理 对于int类型 : tf.train.Examples(features=tf.train.Featur ...

  3. Web性能优化：图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  4. 【PC网站前端架构探讨系列】结合公司网站首页，谈前端模块化开发与网站性能优化实践

    说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...

  5. Web前端性能优化之图片优化

    我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...

  6. 网站性能优化(Yahoo 35条)

    Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...

  7. 网站性能优化— WebP 全方位介绍

    谈到优化网站性能时,主要目标之一就是减少要发送到浏览器的数据量(即 payload).而当前,图片通常是页面构成中最耗费流量的部分,因此降低图片的大小是一个最为有效的优化网页前端性能的办法. 有很多工 ...

  8. Yahoo团队经验：网站性能优化的34条黄金法则

    Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...

  9. 网站性能优化实战——从12.67s到1.06s的故事

    文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...

随机推荐

  1. web api 500 错误

    改了API 方法内容后,就直接F5运行起来. 客户端用WebClient请求,老是返回500错误. 无意中重新编译了WEIAPI项目,客户端就正常了.

  2. Eclipse高效率开发技巧

    工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个"器".本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标,便可进行 ...

  3. NotifyIcon用法

    -------------------控件NotifyIcon-----------//客户端调用 private void btnShowError_Click(object sender, Eve ...

  4. Env:autojump安装使用

    注:这里只介绍我使用的方式,当然不是唯一方式 作用:autojump可以快速进行路径导航,具备记忆历史路径:不仅仅是可以进入当前路径下的某个路径,也可以是其他历史路径 1. 下载 首先,$ git c ...

  5. 【MySQL】原理 之 事务

    1.MySQL逻辑架构大致分为:连接认证层,核心服务层,存储引擎层. 2.锁策略,需要在开销和数据的安全性之间寻求平衡,这种平衡会影响到性能. 3.写锁优先于读锁. 4.行级锁只在存储引擎层实现,而M ...

  6. activiti自定义流程之整合（一）：整体环境配置

    结合之前所说的自定义流程的思路,分别是后台.前台.整合,之前的内容也分别进行了相关的练习和尝试,现在就该到了最后的整合了,依旧是以实现功能为目的,细节暂且不去管他. 因为我们实际项目后端用的是spri ...

  7. [Java A] – is not an enclosing class

    public class A {public class B { }}; 需要实例B类时,按照正逻辑是,A.B ab = new A.B();那么编译器就会出现一个错误–“is not an encl ...

  8. capture同focus

    SetCapture函数功能:该函数在属于当前线程的指定窗口里设置鼠标捕获.一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内.同一时刻只能有一个窗口捕获鼠标.如果鼠标光标在另一 ...

  9. mysql创建表与索引

    -- ---------------------------- -- 商品属性表 -- AUTO_INCREMENT=1为设置了自增长的字段设置起点,1为起点 -- ENGINE选择:MyISAM类型 ...

  10. Scala第三章学习笔记

    换行后的左大括号造成的问题: class FooHolder { def foo() { println("foo was called") } } Scala认为def foo( ...