Web性能优化：图片优化

4顶
0踩

2014-12-22 17:22 by 正式编辑 cao345657340 评论(0) 有8555人浏览

web 浏览器 google

HTTP Archieve有个统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看，图片也绝对是优化的热点和重点之一，Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。

Google Web Fundamentals的说法我很喜欢：

引用

图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。

真的要用图片吗？

要实现需要的效果，真的需要图片吗？这是首先要问自己的问题。浏览器和Web标准的发展速度极快，记得数年前我在用微软Silverlight 1.0写视频播放器的时候，中文还不能使用自定义字体显示，所以那时候写了很多糟糕的代码把需要的文字在服务器上生成图片并缓存起来。用户下载起来很慢，搜索引擎也完全无法检索这些文字。

但是现在不一样了，很多特效（渐变、阴影、圆角等等）都可以用纯粹的HTML、CSS、SVG等加以实现，实现这些效果少则寥寥数行代码，多则加载额外的库（一张普通的照片比非常强大的效果库也大了许多）。这些效果不但需要的空间很小，而且在多设备、多分辨率下都能很好的工作，在低级浏览器上也可以实现较好的功能降级。因此在存在备选技术的情况下，应该首先选择这些技术，只有在不得不使用图片的时候才加入真正的图片。

备选技术

CSS效果、CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显示得非常清晰，占用的空间也很小。
网络字体。现在连很多图标库都是用字体方式提供，保持文字的可搜索性同时扩展显示的样式。

前端工程师最好能和设计师、产品经理保持沟通，帮助他们了解到什么样的效果比较“简洁、高效、可维护”，毕竟对于CSS来说改变圆角矩形的Radius可以实时看到效果，用图片的话至少要重新生成图片、切图并替换资源。Retina、高分辨率屏幕、多尺寸的设备，这些都加快了非图片特效的发展，想想在高分辨率屏幕下Windows 7的惨不忍睹，就知道原生的图片资源绝对不是多多益善。

图片格式的选择

如果效果真的需要图片来表现，那么选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等，我们首先说明各种图片格式的特点

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

颜色丰富的照片，JPG是通用的选择

人眼的结构很适合查看JPG压缩后的照片，可以充分的忽略并在脑中补齐细节
JPG在压缩率不高时保留的细节还是不错的
WebP能够比JPG减少30%的体积，但目前兼容性较差

如果需要较通用的动画，GIF是唯一可用的选择

GIF支持的颜色范围为256色，而且仅支持完全透明/完全不透明
GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题

如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式

SVG是使用XML定义的矢量图形，生成的图片在各种分辨率下均可自由放缩
SVG中可以通过JavaScript等接口自由变换图片特效，可以完成其中部分元素的自由旋转、移动、变换颜色等

如果需要清晰的显示颜色丰富的图片，PNG比较好

PNG-8能够显示256种颜色，但能够同时支持256阶透明，因此颜色数较少但需要半透明的情景（如微信动画大表情）可以考虑PNG-8
PNG-24可以显示真彩色，但不支持透明，颜色丰富的图片推荐使用（如屏幕截图、界面设计图）
PNG-32可以显示真彩色，同时支持256阶透明，效果最好但尺寸也最大

图片尺寸的选择
尺寸，曾经是最不需要讨论的话题，但自从Retina出现之后世界就变得复杂多了。关于移动设备上的像素和尺寸，展开说足够写一篇论文，我建议想详细了解的同学参考下面的文章：

浅谈移动Web开发（上）：深入概念

这里只说我们关心的部分和结论，我们需要分清不同类型的像素：CSS像素和设备像素。一个 CSS像素可能包含多个设备像素。对于图片来说，在高DPI的屏幕上需要使用分辨率更高的图片，如果我们讨论的是Retina，那么就需要2倍分辨率（几乎4倍尺寸）的图片。这几乎没有取巧的空间，屏幕就是那么大，需要的图片也就是那么大。（鸽子为什么那么大？^_^）

我们能够控制的地方是“恰好”显示所需尺寸的图片。例如在屏幕中通过CSS或者标签的wihth/height属性，将一副200×200的图片调整为100×100大小，那么这其中就有(200×200)-(100×100)=30000个像素是浪费的，这占到了图片尺寸的75%！

之所以有这么大的浪费，是因为图片的尺寸与面积基本成正比，与宽高的平方成正比。因此良好的计算客户端实际显示的图片尺寸，能够大大减小图片的大小。即使只有长和宽都只有10px被浪费，但是当图片足够大时，这部分也将产生很大影响。

响应式图片

上面提到“恰好”显示客户端所需大小的图片，听上去很容易不是吗？但当响应式布局出现后，这就变得极其困难。我们要支持上至1920宽度，下至320宽度的无数种设备，如果使用1920宽度的图片，那么在小型设备（这类设备往往对网速和流量更加敏感）上每个用户都要付出额外的带宽和等待时间，如果使用320宽度的图片，那么在1920的屏幕上就像是在高清屏上使用DOS那么让人难以接受。

很自然的，我们需要图片也能“响应式”加载，根据所在设备的不同，加载不同尺寸的图片。响应式图片尚没有写入Web标准，实现起来也有诸多不便和兼容性限制。我建议参考百度EFE团队的这篇文章：

实战响应式图片

响应式图片虽然尚未成为标准，但这是Web图片优化的一柄利器，一旦被广泛支持，再没有比缩小图片尺寸更有效的优化方法了。

优化JPG和PNG

选择了正确的图片格式，按照正确的大小生成了图片后，我们还需要对图片进行进一步优化，这种优化一般分两步进行：

有损优化，删除没有出现或极少出现过的颜色，合并相邻的相近颜色。这一步并不必须，如PNG格式就直接进入下一步
无损优化，压缩数据，删除不必要的信息

JPG和PNG格式的图片生成后，一般还有进一步优化的空间，例如JPG格式的照片中，可能携带有相机的Exif信息，PNG格式的图片中可能带有Fireworks等软件的图层信息等。去除这些额外信息后，还可以通过减小图片的调色板，去除没有出现过的颜色，以及合并相邻的相同颜色等手段来进行优化。原理性的内容这里不再赘述，仅介绍工程中可用的优化工具。

不同格式的图片有一系列工具，这些工具有有更多种参数调节方案，常见的几种调节工具有：

如果你真的需要追求各种图片的极限压缩，可以参阅这些工具的文档，但是对于一般的Web应用，面对的图片种类多样，几乎不可能在工程中实现对每种工具的独立配置，因此推荐使用以下工具来进行优化。这些工具往往使用了上表中的一种或几种优化工具。

ImageOptim (Mac)

主页：https://imageoptim.com/

Mac平台下非常赞的图片优化工具，只需要把需要优化的图片拖拽进ImageOptim，就能够完成对图片的优化。设置选择的也很丰富，目前支持JPG和PNG的优化。这是我在写文章时最常用到的工具，把网站用到的图片拖进去，优化就完成了~

Kraken (Web)

主页：https://kraken.io/

在免费模式下可以上传图片，优化后打包下载，很多国外企业也选择了它的收费服务。亲自测试Kraken的图片优化结果比ImageOptim一般要小3%左右，效果不错，当然价格也不错。适合偶尔有图片优化需求，或者不在开发机上没有优化软件可以使用的情况。

智图 (Web)

主页：http://zhitu.tencent.com/

腾讯ISUX团队有篇文章介绍智图：http://isux.tencent.com/zhitu.html

国货当自强，腾讯的智图工具推出不久，但实测效果很好，而且提供了Gulp的自动化支持，这部分会在后面自动优化章节介绍。只想建议一句，Kraken的首页比智图美好几百倍…… 而且把压缩前的PNG和压缩后的JPG放在一起对比大小，真的没关系么~

优化SVG

所有较新的浏览器都支持可缩放矢量图(SVG)，SVG是基于XML的图片格式，适用于二维图片。可以将SVG标记直接嵌入网页，也可以作为外部资源嵌入。可以通过大多数基于矢量的绘图软件创建SVG文件。这是一段简单的SVG图形：

这个圆形轮廓为黑色，背景为红色，从Adobe Illustrator直接导出。可以从中看到大量元数据，例如图层信息、注释和XML名称空间等等，在浏览器中呈现资源时，通常不需要这些数据。因此我们需要使用一些工具去除这些不必要的元数据，仅保留必须的标记。

SVGO工具可以缩减SVG文件的体积，在这个的例子中，SVGO能够将Illustrator生成的SVG文件大小减小58%，从470字节缩减到199字节。

由于SVG是基于XML的格式，本质上是纯文本，所以，还可以采用GZIP压缩来减小传输大小，当然这需要一些服务器配置，例如在apache服务器中设置：

AddType image/svg+xml .svg
AddOutputFilterByType DEFLATE image/svg+xml

来对SVG文件启用GZip压缩（当然你还需要先加载deflate模块并进行适当配置，GZip的配置超出了本文的范畴，这部分内容请自行Google）

优化GIF和APNG

GIF有很多好处，在颜色数较低的时候能够大幅减小图片体积，而且他也是唯一能够较为通用的展示动画的图片格式。关于GIF格式的优化原理我并不熟悉，只是在工程中直接使用成型的压缩工具，在后文自动优化章节的Grunt中，会介绍通过Grunt Task进行自动优化的方法。

关于APNG，目前浏览器对他的支持还不够好，不过在支持HTML5的场景中，有成熟的开源工具apng-canvas可以用于支持APNG。

腾讯ISUX团队有篇文章介绍iSparta工具：http://isux.tencent.com/introduction-of-apng.html。这是目前几乎唯一能够批量处理APNG文件的工具，感兴趣的同学可以在那篇文章里得到更多地了解。

自动优化

前面说了太多关于如何优化各种不同格式图片的方法和工具，优化图片需要大量重复性的劳动，作为工程师显然不会忍受这一点，因此也产生出了很多工具对图片进行自动优化，这里主要介绍CDN、Grunt/Gulp、Google PageSpeed三种方式。

自动优化：CDN

使用CDN对图片自动进行优化，我在国外的CDN提供商处很少见到这类服务，倒是国内的两大新秀CDN七牛和又拍在这方面都做了大量工作。其工作方式为，向CDN请求图片的URL参数中包含了图片处理的参数（格式、宽高等），CDN服务器根据请求生成所需的图片，发送到用户浏览器。

七牛云存储的图片处理接口极其丰富，覆盖了图片的大部分基本操作，例如：

图片裁剪，支持多种裁剪方式（如按长边、短边、填充、拉伸等）
图片格式转换，支持JPG, GIF, PNG, WebP等，支持不同的图片压缩率
图片处理，支持图片水印、高斯模糊、重心处理等

七牛云存储的图片处理接口使用并不复杂，例如下面这张原图：

我们通过如下URL请求，裁剪正中部分，等比缩小生成200×200缩略图：

http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200

自动优化：Grunt/Gulp

这里介绍用于图片优化的Grunt组件：grunt-image。前端工程师的重复性工作，例如合并静态资源、压缩JS和CSS文件、编译SASS等都可以使用Grunt等自动化工具批量完成，图片优化也是如此。

grunt-image非常强大，按照作者的介绍，其内部加载的图片优化工具包括了pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle和svgo。支持批量自动优化PNG, JPG, SVG和GIF，速度也不错，配置方式支持单图片优化和全目录优化：

module.exports = function (grunt) {
  grunt.initConfig({
    image: {
      // 指定单独的图片优化
      static: {
        options: {
          pngquant: true,
          optipng: true,
          advpng: true,
          zopflipng: true,
          pngcrush: true,
          pngout: true,
          mozjpeg: true,
          jpegRecompress: true,
          jpegoptim: true,
          gifsicle: true,
          svgo: true
        },
        files: {
          'dist/img.png': 'src/img.png',
          'dist/img.jpg': 'src/img.jpg',
          'dist/img.gif': 'src/img.gif',
          'dist/img.svg': 'src/img.svg'
        }
      },
      // 指定图片目录进行优化
      dynamic: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'dist/'
        }]
      }
    }
  });
 
  grunt.loadNpmTasks('grunt-image');
};

自动优化：Google PageSpeed

Google做事风格比较彻底，看见哪个软件不好用就拿来直接fork出新版本或者干脆重写，对于Web优化，Google发布了了Google PageSpeed这个服务器模块，可以在apache或ngnix中加载，通过在服务器配置文件中进行设置来进行自动化的优化。对于图片格式转换、图片优化甚至图片LazyLoad都有相关选项。这部分展开会非常长，请感兴趣的同学参考Google的手册。

查看图片附件

来自: 伯乐在线

分享到：

4
顶

0
踩

评论共 0 条请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

聊聊Spring中的事务

事务在实际开发中，重要性不言而喻。假设没有合理的事务控制，A向B发起了100元转账，A账户减100，B账户加100，但是转账中途因网络等因素导致程序异常（B账户更新记录没有成功，A账户更新成功），这就导致A账户...

Spring 中的事务管理

事务是一系列的动作，它们综合在一起才是一个完整的工作单元，这些动作必须全部完成，如果有一个失败的话，那么事务就会回滚到最开始的状态，仿佛什么都没发生过一样。 2 事务的四个特性原子性（Atomicity）：...

Spring事务管理（详解+实例）

写这篇博客之前我首先读了《Spring in action》，之后在网上看了很多关于Spring事务管理的文章，具体参考文章如下： 1、将相应的接口依赖图理清出 2、将每个类的具体配置弄明白 3、将具体的配置给出来 4、给出...

Spring和SpringBoot中的事务详讲

Spring 中的事务管理初步理解理解事务之前，先讲一个你日常生活中最常干的事：取钱。比如你去ATM机取1000块钱，大体有两个步骤：首先输入密码金额，银行卡扣掉1000元钱；然后ATM出1000元钱。这两个步骤必须是...

Spring事务管理与传播机制详解以及使用实例

写这篇博客之前我首先读了《spring in action》，之后在网上看了一些关于Spring事务管理的文章，感觉都没有讲全，这里就将书上的和网上关于事务的知识总结一下，参考的文章如下： Spring事务机制详解Spring事务...

spring事务管理(详解和实例)

理解事务之前，先讲一个你日常生活中最常干的事：取钱。比如你去ATM机取1000块钱，大体有两个步骤：首先输入密码金额，银行卡扣掉1000元钱；然后ATM出1000元钱。这两个步骤必须是要么都执行要么都不执行。如果银行...

Spring 事务

1. 关于事务事务控制就是将一系列操作当成一个不可拆分的...在关系数据库中，一个事务可以是一条SQL语句，一组SQL语句或整个程序。事务应该具有4个属性：原子性、一致性、隔离性、持续性。这四个属性通常称为ACID特性。

Spring事务的深入理解

Spring进阶（五）：Spring事务管理（详解+实例）

理解事务之前，先讲一个你日常生活中最常干的事：取钱。比如你去ATM机取1000块钱，大体有两个步骤：首先输入密码金额，银行卡扣掉1000元钱；然后ATM出1000元钱。这两个步骤必须是要么都执行要么都不执行。如果银行卡...

事务管理之Spring事务管理

Spring事务机制主要包括声明式事务和编程式事务，此处侧重讲解声明式事务，编程式事务在实际开发中得不到广泛使用，仅供学习参考。 Spring声明式事务让我们从复杂的事务处理中得到解脱。使得我们再也无需要去处理...

Spring事务管理

写这篇博客之前我首先读了《Spring in action》，之后在网上看了一些关于Spring事务管理的文章，感觉都没有讲全，这里就将书上的和网上关于事务的知识总结一下，参考的文章如下： Spring事务机制详解 Spring事务...

spring事务详解

什么是事务事务是访问数据库的一个操作序列，数据库应用系统通过事务集来完成对数据库的存取。事务的正确执行使得数据库从一种状态转换成另一种状态。事务有四个特性：ACID ● 原子性（Atomicity）：事务是一个原子...

Spring Cloud 从入门到精通

Spring Cloud 是一套完整的微服务解决方案，基于 Spring Boot 框架，准确的说，它不是一个框架，而是一个大的容器，它将市面上较好的微服务框架集成进来，从而简化了开发者的代码量。本课程由浅入深带领大家一步步...

spring 事务管理

标签：写这篇博客之前我首先读了《Spring in action》，之后在网上看了一些关于Spring事务管理的文章，感觉都没有讲全，这里就将书上的和网上关于事务的知识总结一下，参考的文章如下： Spring事务机制详解 ...

Spring 事务管理

养老院管理系统：SpringBoot与Vue前后端不分离架构的设计与实现

内容概要：本文详细介绍了基于SpringBoot和Vue开发的养老院管理系统的具体实现细节。该系统采用前后端不分离的架构，旨在快速迭代并满足中小项目的开发需求。文中涵盖了多个关键技术点，如数据库设计（组合唯一约束、触发器）、定时任务（@Scheduled、@Async）、前端数据绑定（Vue的条件渲染和动态class绑定）、权限控制（RBAC模型、自定义注解）以及报表导出（SXSSFWorkbook流式导出）。此外，还讨论了开发过程中遇到的一些常见问题及其解决方案，如CSRF防护、静态资源配置、表单提交冲突等。适合人群：具备一定Java和前端开发经验的研发人员，尤其是对SpringBoot和Vue有一定了解的开发者。使用场景及目标：适用于需要快速开发中小型管理系统的团队，帮助他们理解如何利用SpringBoot和Vue进行全栈开发，掌握前后端不分离架构的优势和注意事项。其他说明：文章不仅提供了详细的代码示例和技术要点，还分享了许多实用的小技巧和避坑指南，有助于提高开发效率和系统稳定性。

家族企业如何应对人才流失问题？.doc

家族企业如何应对人才流失问题？

员工关怀制度.doc

路径规划领域中基于排序搜索的蚁群算法优化及其应用

内容概要：本文详细探讨了对传统蚁群算法进行改进的方法，特别是在路径规划领域的应用。主要改进措施包括：采用排序搜索机制，即在每轮迭代后对所有路径按长度排序并只强化前20%的优质路径；调整信息素更新规则，如引入动态蒸发系数和分级强化策略；优化路径选择策略，增加排序权重因子；以及实现动态地图调整，使算法能够快速适应环境变化。实验结果显示，改进后的算法在收敛速度上有显著提升，在复杂地形中的表现更加稳健。适合人群：从事路径规划研究的技术人员、算法工程师、科研工作者。使用场景及目标：适用于需要高效路径规划的应用场景，如物流配送、机器人导航、自动驾驶等领域。目标是提高路径规划的效率和准确性，减少不必要的迂回路径，确保在动态环境中快速响应变化。其他说明：改进后的蚁群算法不仅提高了收敛速度，还增强了对复杂环境的适应能力。建议在实际应用中结合可视化工具进行调参，以便更好地观察和优化蚂蚁的探索轨迹。此外，还需注意避免过度依赖排序机制而导致的过拟合问题。

基于PSO算法的配电网分布式光伏选址定容优化及其Matlab实现

内容概要：本文详细介绍了利用粒子群优化（PSO）算法解决配电网中分布式光伏系统的选址与定容问题的方法。首先阐述了问题背景，即在复杂的配电网环境中选择合适的光伏安装位置和确定合理的装机容量，以降低网损、减小电压偏差并提高光伏消纳效率。接着展示了具体的PSO算法实现流程，包括粒子初始化、适应度函数构建、粒子位置更新规则以及越界处理机制等关键技术细节。文中还讨论了目标函数的设计思路，将多个相互制约的目标如网损、电压偏差和光伏消纳通过加权方式整合为单一评价标准。此外，作者分享了一些实践经验，例如采用前推回代法进行快速潮流计算，针对特定应用场景调整权重系数，以及引入随机波动模型模拟光伏出力特性。最终实验结果显示，经过优化后的方案能够显著提升系统的整体性能。适用人群：从事电力系统规划与设计的专业人士，尤其是那些需要处理分布式能源集成问题的研究人员和技术人员。使用场景及目标：适用于希望深入了解如何运用智能优化算法解决实际工程难题的人士；旨在帮助读者掌握PSO算法的具体应用方法，从而更好地应对配电网中分布式光伏系统的选址定容挑战。其他说明：文中提供了完整的Matlab源代码片段，便于读者理解和复现研究结果；同时也提到了一些潜在改进方向，鼓励进一步探索和创新。

4顶0踩