你可能已经知道,现在网页文件的平均大小比Doom游戏的安装文件还还大。
  
  文件变大的原因之一是图片的增加,并且还需要支持更高的分辨率。
  
  Google来拯救了
  
  Google刚刚发布了一种新的JPEG压缩算法:Guetzli。该算法的主要思想是重点保留人眼可以轻松识别的细节,同时跳过眼睛无法注意的细节。
  
  我不是专家,但预期的结果是获得一个感知质量相同,但文件大小更小的图像。
  
  这不是一种新的图像格式,而是一种压缩JPEG图像的新方法。这意味着不需要一个定制的图像查看器,而是可以由任何一个能渲染JPEG的软件来显示。
  
  现实生活中Guetzli
  
  在我的一个项目中,有一个包含很多图片的主页(仅主页就有大约30Mb,其中27M是图片)。
  
  我决定给Guetzli一个尝试的机会,为了说服我们的产品所有者和设计师质量损失是可以接受的,我试着把这个新的算法应用在一张没有使用的高分辨率的图片上(一张8574×5715,22MB的JPEG图片) 。
  
  它崩溃了。
  
  根据google所说(并且我的经验证实了这些数字),Guetzli每一百万像素的图像大约需要占用300MB的内存(因此,我的图像大约需要15GB),而当时我没有这么大的内存(六个节点服务器,两个docker容器,chromium和几个electron实例所占用的内存使得我的电脑不符合要求)。
  
  在清理了一些不重要的进程之后,我重新试了一次,Guetzli占用了12GB的内存,但是成功了。
  
  Google还表示,Guetzli处理一张图片每一百万像素大概需要一分钟的时间,我差不多也花了这么多时间(总时间略超过40分钟)。
  
  压缩后的图像不到7MB(原始大小为22MB),我无法通过肉眼来确定哪个是压缩过的(我们的设计师可以,但是承认差异“小到令人难以置信”)。
  
  6.9M home-guetzli.jpg
  
  22M home-raw.jpg
  
  我使用的是Guetzli默认的品质设置(从84到100,如果要低于84,你需要自己编译并更改这个最小值)进行的压缩。
  
  更多的测试以及一些成功的例子
  
  然后,我决定为该图像尝试使用不同的品质设置(我写了一个非常简单的脚本,从而无需每40分钟重新启动一次,并且在我睡觉的时候也能够运行)。
  
  结果在这里(Guetzli的默认品质因素似乎是95)。
  
  6.9M ./home-guetzli.jpg
  
  22M ./home-raw.jpg
  
  3.0M ./home-raw.http://www.yuheng119.com/  jpg.guetzli84.jpg
  
  3.4M ./home-raw.jpg.guetzli87.jpg
  
  4.2M ./home-raw.jpg.guetzli90.jpg
  
  5.5M ./home-raw.jpg www.huazhyyule99.cn .guetzli93.jpg
  
  8.8M ./home-raw.jpg.guetzli96.jpg
  
  18M ./home-raw.http://www.acnet.cn/ jpg.guetzli99.jpg
  
  产品所有者和设计师均同意使用84这个品质因素。然后我转换了所有的图片,我们从主页从30MB变为不到8MB(其中3MB是CSS和脚本)。
  
  应该注意到的是,我们的图片之前并没有进行任何形式的压缩。
  
  附加说明
  
  在我的机器上安装Guetzli很顺利(有人在archlinux上创建了一个包含Guetzli的AUR包,非常感谢这个人),并且可以直接运行它(只要你拥有足够的内存)。
  
  似乎还有一个brew包(针对Mac OS用户),但是我没有测试它。
  
  对于超大的图片,Guetzli需要占用大量的内存和CPU时间(很多时候是相对的,不要指望着在运行的时候能够做其他事情)。如果RAM不是你的瓶颈,那你甚至可以考虑针对不同的图片并行运行多个Guetzli实例,因为它仅占用一个核心(仅作为写入)。
  
  作为一个JPEG编码器,它不能输出PNG(因此没有透明度),但它可以转换和压缩PNG图片。
  
  运行效率与图片的初始质量有关:我注意到压缩比范围大约为大图像上的7倍到小图像上的2倍之间。在小图片上,质量损失也更加明显。
  
  在少数情况下,我也发现色饱和度存在损失(在我这个案例中,这个是可以接受的)。
  
  长话短说
  
  给Guetzli一个尝试,它可能会给你一个不可接受的结果(特别是低品质),但它也会让你的网站减少几MB的大小。

Google Guetzli是如何压缩图片的?的更多相关文章

  1. 使用Google Thumbnails 压缩图片

    背景说明:最近项目中需要用到一些图片文件的上传 ,但是有些图片很大,比如轮播图,大有的有几兆,这样加载一个首页都要很久,显然这样对用户体验是非常不友好的,对服务器资源将是一种浪费. 为了解决这个问题, ...

  2. Joomla - 优化(时区、google字体、压缩图片、压缩自定义代码)

    Joomla - 优化(时区.google字体.压缩图片.压缩自定义代码) 一.时区 发布文章是往往会发现发布时间和当前时间对不上,原因是 Joomla 用的是国际标准时间,和中国时区大约相差8小时, ...

  3. 四:Java使用google的thumbnailator工具对图片压缩水印等做处理

    Thumbnailator是一个非常好的图片开源工具 使用方法: 在pom中加入以下jar包 <!-- 图片缩略图 图片压缩 水印 start--> <dependency>& ...

  4. Android 高清加载巨图方案 拒绝压缩图片

    Android 高清加载巨图方案 拒绝压缩图片 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...

  5. 移动端使用localResizeIMG4压缩图片

    移动h5开发避免不了上传图片,一般我们使用html自带的控件input或者使用微信上传API.但微信上传API不是任何地方都可以使用的,使用html自带的控件input上传又免不了图片体积太大,上传不 ...

  6. java 上传图片 并压缩图片大小

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  7. 用gulp-imageisux智图api压缩图片

    ➣ 智图平台是什么? 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式.同时, ...

  8. java 上传图片 并压缩图片大小(转)

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  9. word转html 压缩图片网站

    word转html https://docs.google.com/document/d/1MS-os1NcEPSEe2OWRenGR_6CsEmEQUchoQoh-abmL1Y/edit 压缩图片 ...

随机推荐

  1. BEC listen and translation exercise 44

    But over the past 70 years or so, there's been a massive increase in one type of crime which was wha ...

  2. BEC listen and translation exercise 42

    These were built for the workers towards the end of the eighteenth century, and they are still furni ...

  3. leetcode 1 Two Sum(查找)

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  4. NO3:步履蹒跚-完成第一章节学习

    第一章小记: 每个C程序都要求有一个main()函数(多于一个main()函数是不合法的(已犯错:在VS 2010一个项目里两个C文件都有main函数,不能编译通过,必须删除一个文件,永记)).mai ...

  5. @@cursor_rows变量解析

    刚刚看了@@curosr_rows这个全局变量,发现这个变量挺有意思.要懂得这个变量的意义,基本上牵扯到cursor一些比较容易忽视的内容. @@cursor_rows是用来记录当前游标的数量,也就从 ...

  6. 【LeetCode】013. Roman to Integer

    Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...

  7. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...

  8. HDOJ1251(前缀匹配---分块查找&map应用)

    分块查找算法 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm ...

  9. 【jQuery】slice()方法的使用

    [jQuery]slice()方法的使用  slice()方法:从已有的数组中返回选定的元素.  语法:          arrayObj.slice(start, end)             ...

  10. <正则吃饺子> :关于mybatis中使用的问题(一)

    在公司项目开始之前,根据springboot .mybatis.Swagger2 整合了一个demo,在测试时候,遇到的问题,简单记录.之前在使用mybatis时候,没有注意到这一点. 1.错误:Th ...