网站图片优化-解码JPEG
首先,老大拿了两个网站工具的分析跟我说,让我分析一下我们网站的图片有没有什么方法优化。
【网站分析工具】
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的更多相关文章
- Web 性能优化: 图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
- 深度学习原理与框架-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 ...
- Web性能优化:图片优化
程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...
- 【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践
说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...
- Web前端性能优化之图片优化
我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...
- 网站性能优化(Yahoo 35条)
Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...
- 网站性能优化— WebP 全方位介绍
谈到优化网站性能时,主要目标之一就是减少要发送到浏览器的数据量(即 payload).而当前,图片通常是页面构成中最耗费流量的部分,因此降低图片的大小是一个最为有效的优化网页前端性能的办法. 有很多工 ...
- Yahoo团队经验:网站性能优化的34条黄金法则
Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...
- 网站性能优化实战——从12.67s到1.06s的故事
文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...
随机推荐
- css之四大类选择器
一.选择器: 关于组合选择器之间的区别: 后代选择器(A B)与子选择器(A>B)之间的区别: 后代选择器: 子选择器: 总结:后代选择器的作用范围是一个元素里面包含的所有元素,即包括的是所有的 ...
- PHPnow升级PHP 5.4与Mysql 5.5
本文转载自:https://www.dadclab.com/archives/5928.jiecao 折腾开始 1.安装一下VC9的运行库,下载地址:https://www.microsoft.com ...
- (转)JS保留两位小数 四舍五入函数
本文转载自:http://www.cnblogs.com/446557021/archive/2011/10/13/2211047.html js 四舍五入函数 toFixed(),里面的参数 就是保 ...
- bzoj3136
Description 给定m个素数和Q个询问.每个询问有n个人,每次操作可以任意选择其中的一个素数p(素数可以重复使用),然后去掉剩余人数 mod p个人.对于每个询问,我们想知道,至少需要多少步操 ...
- bzoj2734 集合选数
Description <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集中,则 2x 和 3x 不能在该子集中 ...
- js setTimeout
setTimeout用法 //每个0.5秒钟改变字体和背景颜色,字体一闪一闪的效果 var flag = 0; function start(){ var text = document.getEle ...
- angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
使用$http.$location.$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘: 1.$http模拟从后台获取json格式的数据: 2.$watch实时监控数据变化: 3.$loca ...
- CF 120F Spider 树的直径 简单题
一个男孩有n只玩具蜘蛛,每只蜘蛛都是一个树的结构,现在男孩准备把这n只小蜘蛛通过粘贴节点接在一起,形成一只大的蜘蛛.大的蜘蛛也依然是树的结构.输出大的蜘蛛的直径. 知识: 树的直径是指树上的最长简单路 ...
- 0811 css样式表基本
CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 1. 样式表分类 ①内联样式表 和html联合显示,控制精确,但是可重用性差 ...
- jQuery-ajax: 取消关注|关注
ylbtech-jQuery-ajax: 取消关注|关注 1.A,jQuery-效果图返回顶部 1.B,jQuery-Source Code(源代码)返回顶部 <script src=&qu ...