新浪微博UDC-浅谈图片优化的方法.pdf

新浪微博 UDC- 浅谈图片优化的方法 在网站优化中，如果图片优化得好，不但可以提高页面的加载速度，提升网站的用户体验，而且还 可以通过图片优化来节省网站的带宽。那么作为页面构建工程师应该采用什么方法来优化图片，既 能保证 UI 的还原度，又使图片最精简呢？下面我就个人经验，来简单介绍一下图片优化的方法，首 先我们了解一些图片方面的知识： 矢量图 位图 十字绣 十字绣放大 下表为矢量图和位图的对比： 有损压缩 右上角的白色格子刚好没有在 8*8 像素的网格单元中，所以保存时会跟周围的 8*8 的网格单元颜色 融合，下图的效果： 这就是平时保存 JPG 图片时图像会模糊的原因，下面是几张彩色图的局部对比效果： 无损压缩 为什么无损压缩的图也会有失真的？因为他的压缩原理是通过索引图像上相同区域的颜色进行压缩 和还原，也就是说只有在图像的颜色数量小于我们可以保存的颜色数量时，才能真实的记录和还原 图像，否则就会丢失一些图像信息。例如， PNG-8 和 GIF 格式： 而 PNG24 为真彩色所以颜色表为空，不会失真。 0 在我们进行图像优化技术前，需要学习有关的图片格式的一些技术细节。每个图形格式都有自己的 优势和弱点，知道他们会使你得到更好的视觉质量和压缩品质。 网页图片优化是网页加速中非常重要的一步，对图片进行压缩，不仅能够节约带宽，并且加快网页 的速度。我们常用的图片编辑软件都可以在压缩图片。 切图时，有时选择 PNG-8 可以获得更高的压缩比。注意，是 PNG-8 ，不是 PNG-24 。不过有些情 况下还是 GIF 或 JPG 会小一些，需要根据实际情况调试以选择最佳方案。 拿微博左侧导航的小 icon 为例，压缩后的图像大小对比如下图： PS色调分离的操作步骤如下： 对比大小： 使用工具优化后，还能够小一些： 请注意，上图中原本是 GIF 格式的图片 被改为了 PNG 格式 ::__IHACKLOG_REMOT E_IMAGE_AUTODOWN_BLOCK__::1 。所以，在使用工具优化时 后需要再查看一下文件格式是否被更改，避免漏过某些图片没有优化。 图片优化在微博首页上的应用： 1. 图型类、照片类 对于图像格式的选择，我们还需要考虑图片的使用场景或功能，概括为两类：图型类、照片类 图型类：图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性，颜色数量较少。 图型类一般可以使用 PNG 格式或者 GIF 格式。优化时可采用 PNG 格式为 PNG8 或者 PNG24 ，品质 为32 ，如果色彩有损失可采用品质 64 或者 128 。 例如：首页左导的图标、 feed 区图标、勋章图、表情动画都属于图形。 照片类：照片通常含有百万数量级的颜色，包括平滑的颜色过度和渐变，如果是图形较为复杂，图 中有时会出现真实的照片。 照片类一般用 PNG 和JPG 。可以根据图片色彩的丰富程度而定。 PNG 的品质一般要到 128 。JPG 的品质一般要在 70-80 之间，以噪点的程度确定。 例如：皮肤背景图、发布器、按钮背景、发布器下方的 tips 、右侧广告、用户头像、用户发布的 图片。 2. 通用类、随机类 按照首页图片出现的频率分成：通用类、随机类 通用类：每个人首页都会看到，图标、按钮、小背景。 例如，顶部托盘图标、左导图标、 feed 区图标、发布器图标、身份图标、操作类图标、状态类图标 、按钮。尽可能的采用 PNG 的格式保存，文件会相对来说较小一些。 下图为微博的按钮和左侧导航 icon 小图的，使用 GIF 和 PNG 格式的大小对比： 下图为微博的按钮背景图分别使用 GIF 和PNG 格式保存的大小对比： 随机类：根据自己定义和发布的内容而定。 A. 表情 GIF 可以使用 FireWorks 或者 ImageReady ，建议使用 ImageReady 。 最好是手动一张张的调整，因为这些表情图的色彩值都比较少，如果使用比较大的颜色时会存储量 较大。