8分钟阅读时间 (1689个单词)

更快、更高、更强

六月

周日，2014年6月1日

14092次点击

0条评论

更快、更高、更强... 一旦涉及到我们的网站或客户的网站，奥林匹克理想就成为了我们的。这就是为什么我们愿意将它们托付给像 GTMetrix 这样的工具，以确保我们尽一切可能做到最好。而且，该工具返回的改进列表通常与所付出的努力相匹配。列表的顶端总是“优化图像”。尽管如此，图像优化是向网站添加的最容易的改进之一。

在开始并加强我们的主题之前，让我们看看我们是否可以区分出关键点

相对质量比较

我知道我已经没有了20岁的眼睛，但我看不到任何区别，这里有四张图片，三种不同的格式，所有都是259 x 173像素的图片，图片包含了很多细节。最重的是29 Ko，最轻的是5.3 Ko。在我们看到如何提高我们的得分之前，让我们先看看我们有什么。

不仅仅是大小。

总的来说，在网络上，有三种常用的图像类型

JPEG（联合摄影专家组）: 16.8百万种颜色，没有透明度，压缩类型“有损”¹。
PNG（可移植网络图形）: 超过16.8百万种颜色，透明度管理，压缩类型“无损”¹。
GIF（图形交换格式）: 256种颜色，透明度管理，动画管理，压缩类型“无损”，通常需要向 Unisys 支付许可证费用。

其他格式（TIFF、BMP...）已经变得很少见。关于 PNG 格式，64位格式已经完全取代了8位 PNG。

¹ 图像管理中存在两种压缩类型，一种是保证无损质量的“无损”，另一种是有损质量的“有损”。对JPG（有损类型）文件操作得越多，图像质量损失就越大。我们可以无损压缩和复制PNG或GIF文件，次数不限，不会有任何质量损失。

每个标准的采用技术都有其技术特性，但实际上也导致了不同的行为，无论是在图像压缩、解压缩还是显示过程中。如果相信Jackson Duncan进行的基准测试（http://jacksondunstan.com/articles/2117），我们会发现存在相当大的差异

压缩时间（仅创建时一次）对于使用快速压缩选项的PNG来说，比不使用此选项快20倍，且与JPG格式大致相同。
JPG格式的解压缩时间（每次显示）比相同大小的PNG格式快3.5倍。
灰度PNG格式比彩色PNG格式快两倍。

节省带宽

我知道，不仅仅是大小问题，但...最好还是从实质性问题开始（如果我可以这样表达的话）。总的来说，为了获得最终大小，不产生失真，我们有几种手段

首先，裁剪图像（裁剪）。我们通常不考虑这一点，但如果只有图像中央的400 x 220像素对您的访客感兴趣，那么没有必要拥有1680px x 1024px的图像。不采取任何措施，您的图像大小就已经可以减少15或20倍。
更改比例（压缩），也可能帮助我们节省很多，而不会对质量造成太大损害。这需要谨慎行事，这很大程度上取决于要展示的图像，但像PhotoShop或Gimp这样的工具，可以很好地通过改变显示比例来“减肥”您的图像。无损减小尺寸可以大大节省带宽。原理是将图像从400 x 192（116 Ko）减小到80 x 38（6Ko）。如果有幸的话，我们可以通过CSS稍微放大（轻微）它，而不会出现太多像素化。
压缩图像，这次不改变其尺寸。这需要一些工具，但正如我们在前面四龙的比较中看到的，重量的改变不一定会导致质量的改变。

用于...

这里不缺少这样的工具。快速浏览一下

Photoshop：Adobe的工具有36个不同的版本和价格。现在可以通过云服务使用，需要大量的资金和技术投资。
The Gimp（Gnu Image Manipulation Program）：几乎与Photoshop相同，但免费，由开源社区提供，有人喜欢有人讨厌，需要准备大量的技术投资，有很多免费的插件可以做任何事情（和任何事情）。
JCE Image Manager：只需支付少量费用，就可以直接在Joomla中处理您所需的大部分内容。
Save For Web：这是最佳的“减肥”工具。Photoshop和Gimp的一个相同的插件，允许您定义压缩文件的保存规则。必不可少。
Riot (Radical Image Optimization Tool) : 定义压缩规则，将超过20种输入格式转换为GIF、PNG或JPG，通过查看前后对比。允许以相同的规则批量处理无限数量的文件，目录目录，速度极快。需要注意的是，Riot基于optiPNG算法的定制。
optiPNG ：由GTMetrix本身推荐，这本身就足以说明一切，但仅供爱好者使用，功能丰富且操作复杂（在DOS命令模式下运行，为老手带来新鲜感）。注意：这不是批评，我也是其中的一员。
PNGOut ：同样由GTMetrix推荐，与optiPNG有相同的评价。这次有一个可视化界面，但只是摆设。结果非常可靠。
jpegTran ：由GTMetrix推动的另一个工具，与前面两个工具一样有效，但用户界面不太友好，尽管外观看起来是图形化的，但输出的图像...很难做得更好。
tinyPNG ：也是一个非常优秀的工具，可以直接在网上使用，也可以通过可安装在Photoshop中的组件使用。正如其名所示，只能用于压缩PNG文件。

那么我们现在该怎么办呢？

我们首先要考虑每个具体情况。不幸的是，没有现成的通用解决方案。

如果您需要动画，没问题，最好的选择是GIF格式。
如果您需要透明度，甚至需要多层透明度，也没有歧义，请选择PNG。
如果您需要摄影质量，同样，最好的选择是JPEG。
现在还有其他各种特殊情况。
- 如果您正在制作文档，需要带有文本的屏幕截图，PNG（有损）可以进行有趣的压缩，同时保持可读性。但是，在缩略图上使用JPG并进行缩放可能是一个有效的解决方案。
- 对于图像目录，强烈压缩并缩小的JPG，以及鼠标悬停时的缩放效果，是一种成本效益高且令人满意的解决方案。
- 使用Riot等工具重新利用现有内容并进行批量处理相对容易，例如，在批量处理模式下，然后修改文章内容，如果您选择了更改格式类型。

我们刚刚谈到了两种基于缩略图和缩放效果的节省带宽的解决方案。这种效果可以通过以下两种方式实现：使用单个放大后的图像，具有可变的比例，例如以下CSS代码所示，或者使用两个图像，一个非常小的缩略图，以及一个原始图像，在悬停第一个图像时通过小片段显示。JED上有许多基于此原理的工具。这种效果可以释放页面空间，并给用户带来更好的使用体验，但与我们的主题不符：节省带宽。我们需要原始图像仅在鼠标悬停时以及必要时才加载，以满足我们的需求，但我没有找到任何插件可以满足这一需求。

为了实现无额外成本且非常有效的缩放效果，我们可以只使用一个CSS类，例如：

img.zoom:hover {

  -moz-transform: scale(2.0);

  -webkit-transform: scale(2.0);

  -o-transform: scale(2.0);

  -ms-transform: scale(2.0,2.0);

  -webkit-transition: all 500ms ease-in-out;

  -moz-transition: all 500ms ease-in-out;

  -o-transition: all 500ms ease-in-out;

  transition: all 500ms ease-in-out;

  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

  position: relative;

  z-index: 50;

  margin: 0 -60px 27px 80px;

}