Latest from ghostzhang's 设计稿分析与切图

JPEG 优化技巧 ... 3 replies

ghost@vip.qq.com (Ghostzhang) — Wed, 16 May 2012 15:30:39 +0800

译文地址：http://hi.baidu.com/jjmaxer/blog/item/aa4c5bdd0db825d08c102905.html
原文地址：http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/

当人们讨论图像优化时，他们只注意到一些流行软件提供的那几个仅有的参数调节工具，例如“质量”滑块，颜色数调板，抖动等。此外，少数专门的软件，如OptiPNG和JPEGtran，设法压缩一些多余的数据来优化图像。所有这些都是非常有名的工具，它们为网页开发者和设计师提供简单直接的方法来优化图像。

在本文中，我们会向您展示一种不同的方法来优化图像，这种方法是源于“图像数据在不同图片格式中的储存原理”。我们从JPEG格式开始，这里有个基础技术称“8像素栅格” (原文：eight-pixel grid )

eight-pixel grid

就如你已知的，JPEG图像由一系列8px × 8px区块组成，当您吧JPEG的图像质量调的太低的时候，这些区块尤其明显。这些东西如何帮助我们优化我们的图像呢？请观察下面的例子：

32x32 px, 图片质量:10（PS中），396 bytes

两个白色小方块都是8x8 px。虽然都是低质量，但右下角看起来失真更加的严重了（正如您预料的一样），而左上角的却非常的干净。这是怎么回事？要回答这个问题，我们需要看看这个衬在网格下的图像：

正如你看到的，左上角的小方块正好对齐在“eight-pixel grid”，这样就确保小方块保持是锐利。

当保存的时候，图片会被分成许多的8x8 px的区块，而软件是对每一个区块进行独立优化的。由于右下方的方块并不匹配这些区块（也就是这个方块跨越了几个区块，正好落于区块的交接线上），优化器在寻找索引的时候就会在黑色和白色之间寻找平衡（在JPEG里，每一个8x8 px的区块都是依据正弦算法来进行编码的
原句：in JPEG, each 8×8 block is encoded as a sine wave）。这就解释了失真的原因了。许多专门的JPEG优化软件都有选择性优化的功能，它能根据图像的不同区域设置不同的优化质量，以达到保留更多图像信息的目的。

这项技术对在保存含有有矩形图形的图片时尤其有效。我们一起来看看在实际中是怎样应用的：

13.51 KB.

12.65 KB.

在第一个图像里，微波炉的位置是随机的，在保存第二个文件之前，我们把图像按照eight-pixel grid来对齐。质量一样都设置在55。让我们把图像放大看看（红线标示出区块的边界）

正如你看到的一样，我们只是调整好图片的位置就已经缩小了1kb的空间。当然，我们也把图片变得“干净”了！

优化颜色

这项技术相当复杂而且仅适用于某些类型的图像，不过我们会继续下去，我们只是学习它的道理。

首先，我们需要知道JPEG使用哪一种颜色模式。大多数的图片格式都是使用RGB颜色模式，但JPEG格式也可以是YcbCr，这是一种广泛用于电视的颜色模式。RGB类似于HSV模式（大多数设计师都熟悉HSV模式）。HSV由三部分组成，色彩（H），纯度（S），明度（V）。其中在这里最重要的就是明度（也称为亮度），优化图像的时候通常是压缩颜色通道，但尽可能保持高亮的亮度通道，因为人们对它最为敏感。Photoshop有一个叫Lab的颜色模式，这有助于我们对图像做出预处理，以便使JPEG优化有更好的效果。

我们继续使用微波炉来作为我们的例子。在微波炉的门上有一层很小的网纹，这是一个很好的例子来演示我们的优化颜色方法。经过一个简单的压缩后，图像质量调节到55，文件体积是64.39KB。

990×405 px, 图像质量: 55 (PS中), 64.39 KB.
浏览大图
在Photoshop中打开上面的大图，然后转换成Lab模式：图像>>图像>>Lab颜色。

Lab模式与HSV或YcbCr非常接近，但不完全相同。亮度通道包含了图像里的亮度信息。A通道显示了图像包含了多少的红色和绿色信息，而B通道则控制图像的黄色和蓝色部分。尽管有些区别，但这个颜色模式使我们避免了很多多余的颜色信息。

转到通道面板，查看A通道和B通道，这时候我们很明显能够看到网纹的纹理，并且我们能看到它是由三种不同亮度的色块组成的。

我们继续做一些颜色上的优化，为了保留原来的文件，先复制一份，这样在一个独立的窗口里编辑会非常有用。我们的目的在两个颜色通道里是光滑这些颗粒状的纹理。这样就能有更多简化的数据来让优化器处理了。你可能会奇怪为什么我们选择这样的一块区域（微波炉的门）来处理呢？很简单，因为这个部分是由黑色像素和橙色像素相间而成的。黑色意味着0亮度，这个信息已经被保留在了亮度通道里了。所以～如果我们在颜色通道里将这个区域完全变为橙色，我们将不会损失任何的信息。因为亮度通道决定了那些像素应该是黑色的，而在这样的纹理上，纯黑色和暗橙色则显得十分的含糊。（这里的意思大概是在亮度通道中的对比更强一些，容易看清楚）

转换到A通道，单独选择每一区块，为每个区块分别应用：滤镜>>杂色>>中间值，半径应该尽可能的小（直到纹理消失为止），这样不会损失太多的眩光效果。在此图中，第1区块半径应调节成4，第2区块为2，然后第3区块调节成4。现在，这个门看起来应该是这样的：

浏览大图

现在，图片的饱和度比较低，我们需要去改善它。为了使颜色的变化能够实时地显示出来，所以这里我们复制一个活动窗口：窗口>>排列>>新建窗口。在新的窗口里，点击Lab通道查看图片，现在你的工作界面应该像下面这样了：

右边的是原始的图像，左边的是复制出来的副本，底下的是工作现在的工作空间。
在A通道里把三个区块都选择上，打开色阶窗口（Ctrl+L 或图像>>调整>>色阶）。将中间的滑块向左边移动，这样副本里的微波炉的颜色就和原始的图像非常接近了（这里我把中间的滑块移到1.08的位置）。B通道进行同样的处理，现在的效果应该是这样的：

[img]http://media1.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/optimized-previ
ew.jpg[/img]
990×405 px, 图像质量: 55 (PS中), 59.29 KB
浏览大图

正如你所见，我们又减少了5 KB的大小（之前是64.39 KB）。虽然这项技巧看似非常得复杂麻烦，但是它仅需要你用上一分钟就能完成：转换到Lab颜色模式，选择颜色通道里的不同部分应用中间值滤镜，然后做一些饱和度修正。如前面说的一样，这个技巧比它的理论更来的有用，我常常使用这个技巧来调整一些大型广告图片，使他们看起来干净而锐利。

常规的JPEG优化技巧

本文将以以下的JPEG优化技巧作为尾声。

每次你选择压缩图片的时候，请仔细选择你的压缩软件，JPEG标准非常严格的，它只决定如何在转换的时候减少图片的体积，而软件的开发商却决定了该怎样正确利用JPEG优化器。（这里的意思大概是每个软件的优化算法都不同）

例如，有些商家使他们的软件做出做大程度的优化，允许您将文件压缩到很小的体积但依然保持高质量的设置，而photoshop则保存出来一个比这个大了一倍的文件。不要依赖这样的软件，每个软件都有他们的价值观来决定哪些信息是有用的，他们会根据这些标准来设定他们的优化算法。

唯一的判定标准是图像的质量和图像大小之间的比。如果你在Photoshop中保存一个质量55到60的文件，它可能跟在其他软件里把质量设置在80的时候输出的质量和体积差不多。

不要保存质量为100的图片。这个并不是最高质量的图片，只是一个数值上的优化底线，最终你会得到一个不合理的大文件。事实上把质量设置在95以上就已经足以防止丢失信息了。

记住，当你在Photoshop中把质量设置低于50的时候，它就会执行另一个叫做“降色采样（原文：color down-sampling）”的优化算法，它会在8个像素周围平均采样，这样会在边缘产生杂色：

48×48 px, 图像质量: 50 (PS中), 530 bytes.

48×48 px, 图像质量: 51 (PS中), 484 bytes.

因此，如果图片很小而且对比很大，建议在Photoshop中不要设置质量低于51。

在以后的文章里，我们将继续讲解一些PNG格式的压缩技巧。
（al）

CSS Sprite 的细节优化 ... 1 replies

ghost@vip.qq.com (Ghostzhang) — Mon, 23 Apr 2012 11:43:36 +0800

原方地址：http://lifesinger.org/blog/2009/07/css-sprite-performance/

CSS Sprite 最大的好处是：减少 HTTP 链接数。

页面上的数据，通过 TCP/IP 包传输。在 1M ADSL 环境下，网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图：

需要的包越少，意味着速度越快。

例子：淘宝首页有一张 sprite: hd_20090313.png, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输（5848 / 1460 = 4.005）。看数据，只多出了 8 bytes. 优化到 5840 bytes 后，就可以减少一个传输包。

也许吹毛求疵了，但对于关键页面，任何细节优化，有时都是值得的。

类似的，对于页面中的链接数量，也可以考虑浏览器的最大并发数来做细节优化。比如，在 Firefox 下，同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下：

当链接数从 6 的整数倍增 1 时，下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时，尽量减少到偶数，是一个不错的优化守则。

参考资料
◦CSS Sprites: Image Slicing’s Kiss of Death
◦CSS, Image Sprites, Background Images and Website Optimization

有趣的PNG优化 ... 1 replies

ghost@vip.qq.com (Ghostzhang) — Sat, 28 Aug 2010 13:05:32 +0800

译文地址：http://www.csspeople.cn/archives/86
原文地址：http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques

引言

做为一名网页设计师你或许已经对 png 格式非常熟悉，它提供了完整的透明度，这是一种无损的，功能强大的图像格式。能够很好代替 gif 图像格式。但是绝大多数人认为它不可被压缩，带着这样的疑问我们来认真看完下面这篇文章。

每一种图像格式都有自己的优缺点，如果掌握了相关知识，在进行图像优化时能够针对不同图像格式进行相应处理，以得到高品质的图像和高压缩率，这是图像优化的关键所在。

png 被称为开源的 gif 图像格式，它们之间有很多相同的地方（如：索引色），但 png 在每一个方面都要强于 gif。它介绍了一些非常酷的功能，图像封装和压缩，但对网页设计师来说最重要的还是线性过滤（也称为“三角过滤”）。

什么是线性过滤？

这里来介绍下它的原理，假如我们有一张5*5像素水平渐变的图片，如下图（每个数字代表了一种颜色）

通过上图你会发现相同的颜色都是在垂直方向上扩展，而不是水平方向。这样的图片如果用 gif 格式将很难获得高压缩率，它只压缩水平方向扩展的颜色（图像尺寸越大，越能说明问题）。让我们看看线性过滤是怎样将这类图像压缩的：

以数字2为标识的每一行都经过了“Up过滤”，“Up过滤”向 png 解码器发送信息：“对于当前的像素，提取上方像素的值，并将其添加到当前值”。图中2-5行垂直方向都拥有相同的值。所以它们的值都是0，如果这样的图片越大那么压缩比率也越大。

在理想情况下，“Sub过滤”能提供更好的结果：

以数字1为标识的每一行都经过了“Sub过滤”，它发送信息给解码器：“当前像素提取左侧像素的值，添加到当前值”。例子中的值全为1，我想你大概也猜到这样的数据肯定能被有效的压缩。

线性过滤是非常重要的概念，尤其是在图片处理时可以针对过滤特点进行处理以便得到更好的过滤效果。有5种过滤器：None（无过滤），Sub（当前值减去左侧像素的值），Up（减去上方像素的值），Average（减去左侧和上方像素的平均值）和Paeth（替换上方，左边或者上方的左边像素值，并重新以Alan Paeth命名）。

通过比较下面的图片，我想大家应该都能明白“线性过滤”的魅力所在。

gif：2568字节

png：372字节
图片类型

png 是一种存储元数据信息的图片类型。如果你是 Photoshop 用户，你应该已经对 png8（索引图像）和 png24（真彩色图像）非常熟悉，如果你是 Fireworks 用户，或许已经知道 png32（真彩色透明图像）。但是 Photoshop 的 png24 格式也能存储真彩色透明图像，其实这些命名都不是官方的，所以在 png 图像格式说明面并不能找到这些概念，为了方便起见，在这次讨论中我们采用Photoshop 的命名方式。

png 可提供5种图片类型：灰度，真彩色，索引色，带alpha通道的灰度，带alpha通道的真彩色。遗憾的是 Photoshop 只能导出3种图像类型：带透明的索引颜色，真彩色，带透明度的真彩色。这就是为什么大家一直认为 Fireworks 是 Png 图像最好处理工具。其实不然，Fireworks 并没有足够的工具来处理导出的 png 图像，它仅仅是在导出时做一些微小的优化工作。

那还有没有更好的 png 压缩工具呢？答案是肯定的。OptiPNG 和 pngcrush 都是非常有效的工具，从本质上来看，这些工具主要做以下优化：

1. 1.选择最合适的图像类型（例如：如果图像中没有太多的颜色，真彩色图像会被转化为索引色图像）
2. 2.选择最合适的过滤方式
3. 3.选择最合适的压缩策略以及选择性的减少颜色深度

所有这些操作都不会影响到图像质量，却能减小 png 图像文件的大小，所以我强烈建议您每次保存 png 图像时都使用这些工具。

下面来介绍几种处理图像的方法，使图片更好的执行“线性过滤”。

1.色调分离

色调分离的优化方法已经广为人知。在 Photoshop 中打开样例图片，点击图层面板中的“

”，并选择色调分离：

选择尽可能小的数值（通常40就够了）并保存图片：

原图：84K

压缩后：53K

优化原理：有效的减少色彩数，合并相似的颜色，创建出色调区域，更好的执行“线性过滤”，得到高压缩率。

这种方法有一定的局限性，尤其是优化的图片与 html 背景融合的情况下须慎用（蓝色为 html 背景）。

2.多余的透明

看看下面的图片：

75K

30K

两张图片都是用 Photoshop 导出的，而且没有经过任何优化。即使对比图中的每个像素，你都不会发现它们之间存在任何区别。但是为什么前者居然是后者的2.5倍大？

在探寻奥秘之前，你必须安装一个“Remove Transparency”的 Photoshop 插件才可以看到隐藏的细节。

在 Photoshop 中打开上面的两张图片，选择 Filer -> Photo Wiz -> Remove Trasparency。现在，你就可以看到保存在图像中的真实像素信息了：

这是怎么回事？其实很简单。带 alpha 通道的真彩色图像每个像素都用了4个字节来表示：RGBA。最后一个是 alpha 通道，控制该像素透明度：值为0则完全透明，255则完全不透明。这意味着每一个像素（任何RGB值）只要 alpha 值设为0就可以完全隐藏。但是这些 RGB 数据仍然存在，而且，它不利于 PNG 编码器对数据流进行有效的封装和编码。因
此，我们必须在导出图像前删除这些隐藏数据（例如上图中填充的黑色）。下面是一个比较便捷的方法：

1.在 Photoshop 中打开上面例子中第一张图片；

2.Ctrl+单击（Mac系统中为？+单击）图层面板中的缩略图，建立选区 -> 单击选择栏目 -> 选中反向。

3.切换到快速蒙版模式，按Q键：

4.我们已经建立了一个半透明图像的蒙版，但我们只需要完全透明的图像。图像 -> 调整 -> 阈值，并将阈值色阶滑到最右端，从而使选区完全透明：

5.退出快速蒙版模式（按Q键），并用黑色填充选区：

6.再次反选（选择 -> 反向），点击图层面板的“

”图标，添加蒙版。

对于上述这些操作我们只须了解即可，因为png二次压缩工具内已经内置了该项操作。
3.透明分离

有时候因为图片中存在一些半透明像素，你不得不保存一个“重量级”的PNG-24文件。如果将此类图像一分为二，一部分是不透明像素，另一部分则为半透明，然后各以适当格式保存。比如你可以用 PNG-24 格式保存半透明像素，而不透明像素则用 PNG-8 甚至 JPEG 格式保存。这样操作下来在实际应用中你将会节省很大的图片流量。看一下实际案例：

PNG24 62K

1.在图层面板中 Ctrl+单击（或？+单击）图像缩略图建立选区：

2.在通道面板中选择“将选区存储为通道”：

3.取消（Ctrl+D 或？+D）选区，选择新建的通道，然后打开阈值（图像 -> 调整 -> 阈值）。将滑块尽量向右拖动：

4.我们已经为不透明的像素创建了蒙版。现在利用这个蒙版来分离原始图层。Ctrl+单击（或？+单击）alpha1通道，转到图层面板，选择原始图层层，打开图层 -> 新建 -> 通过剪切的图层。这样我们就分离出了不透明和半透明像素。

现在你需要将这两个文件分别存储为不同的文件格式：不透明像素保存为 PNG-8，半透明像素保存为 PNG-24。针对半透明像素图层你还可以使用色调分离技术让文件变得更小。

PNG-8 17KB

PNG-24 色调分离（色阶=35） 6KB

最终对比结果：

原图：63K

优化后：23KB

优化后的图片大小几乎只有原图的1/3，在原来的基础上能够节省2/3的流量。但是这种方法有一个明显的缺点：将一个图片分成两个图片，增加了重构人员的工作量，减少图片大小的同时却又增加了 Http 连接数。

这里只是介绍些优化方法，在实际应用中请大家多去尝试，发现不同方法的应用规律，总结出来大家一起分享！

在原文中Sergey Chikuyonok提到还会有第二部分的内容，将进一步探讨更高层次的技术，会谈到灰度模式的图像，使用更少的颜色，降低细节，并讨论进一步优化 PNG 的小技巧，以及 PNG 优化的实例。让我们一起期待下一篇大作。

To Sprite Or Not To Sprite ... 0 replies

ghost@vip.qq.com (Ghostzhang) — Thu, 30 Jul 2009 09:42:48 +0800

原文地址：http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/

CSS Sprites have been around for a while, and keep coming up as a way to get blazing fast speed to your site. Steve Souders just showed off SpriteMe! at Velocity '09 (speaking of — why use the CSS Sprite Generator or other server-based tools when you can use <canvas> and toDataURL and generate sprites on the fly?). However, there are a number of misconceptions about CSS Sprites, the main one being that they have no downsides.

The basic idea of CSS Sprites is to combine a number of images used on your site into a single image, thus reducing the number of HTTP requests that need to be made to your site. The image is rendered using a CSS background and background-position (which, incidentally, means that your markup becomes more complex; the image to use is specified in CSS, not in a plain <img> tag).

The biggest problem with CSS sprites is memory usage. Unless the sprite image is carefully constructed, you end up with incredible amounts of wasted space. My favourite example is from WHIT TV's web site, where this image is used as a sprite. Note that this is a 1299x15,000 PNG. It compresses quite well — the actual download size is around 26K — but browsers don't render compressed image data. When this image is downloaded and decompressed, it will use almost 75MB in memory (1299 * 15000 * 4). If the image didn't have any alpha transparency, this could be maybe optimized to 1299 * 15000 * 3, though often at the expense of rendering speed. Even then, we'd be talking about 55MB. The vast majority of this image is blank; there is nothing there, no useful content whatsoever. Just loading the main WHIT page will cause your browser's memory usage to go up by at least 75+MB, just due to that one image.

That's not the right tradeoff to make for a website.

Another (but much less important) downside is that if a sprite-using page is zoomed using the full-page zoom feature that's present in many browsers, the browser may need to do extra work to get the correct behaviour at the edges of these images — basically, to avoid adjacent images in the sprite from "leaking in." This isn't a problem for small images, but can be a performance hit for bigger ones.

There are cases where CSS sprites are clearly beneficial; the main example is combining a bunch of small similarily-sized images into a single one. For example, a bunch of 16x16 icons used as indicators for various things on your site, or a bunch of 32x32 icons used as category headers or similar. But combining images with vastly different dimensions, especially when there are skinny and tall images in the same sprite as wide and short ones is almost never a good idea.

However, sprites do improve page load time (at least initial page load — on subsequent page loads, the browser hopefully has the images cached). What's the alternative? Unfortunately, there isn't one, yet. Many browsers have support for offline manifests already; it might be possible to extend that to allow downloading one file (like a jar/zip file) that contains a manifest of resources and equivalent URLs that are contained inside it. But any such work won't show up on the web for some time yet.

So, when deciding whether to sprite or not to sprite, keep in mind that there are factors in play other than raw page load performance. As a general rule of thumb, if most of your sprite doesn't contain real image content, you should probably avoid using it. Also, keep an eye out for future solutions that will preserve both the page load speed, as well as avoiding the negative memory and performance impact of sprites.