图片即时优化的三种简单解决方案

\

本文要点

\

• Web页面中的图片往往是页面加载缓慢的最主要原因； \
• 图片优化很复杂，涉及大小调整、裁剪、格式转换及质量参数微调； \
• 如今，有的云服务可以即时优化图片，极大地改善用户浏览包含图片的Web页面时的体验； \
• 云服务提供了简单的API用于操作图片； \
• 读者可以立即应用其中的一项服务，毫不费力地提升网站性能。

\

图片往往是导致页面加载缓慢的最主要原因。一些研究表明，以兆字节计的Web页面还在稳步增加，图片更是其中最大的部分。显然，大部分网站可以通过图片优化大幅提升性能。\

本文将介绍如何使用Kraken.io、Cloudinary和Imgix三种不同的云服务，借助几行代码轻松实现图片的自动优。你可以立即使用这些服务中的一种减少网站图片文件的大小，大幅提高页面加载速度和带宽使用率。\

图片优化涉及哪些方面？

\

在开始介绍如何自动优化图片之前，首先让我们了解下图片优化的基本要素：图片大小及调整、图片格式、图片质量或压缩。下面是图片优化的常见步骤，每一步对应其中一项要素：\

• 根据图片在Web页面上实际占用的空间调整图片大小及裁剪图片。我们认为，在浏览器端调整大小是不好的做法，因为那会强制用户无谓地下载大图片。 \
• 将图片转换成最恰当的文件格式。对于不同类型的图片，情况可能会有所差别；在某些情况下，PNG是最优的格式，而在其他情况下则是JPEG。如果用户有一个现代浏览器，则可以使用那个浏览器支持的新文件格式。例如，只有Chrome支持的WebP格式，或者IE9及以上版本支持的JPEG-XR格式。 \
• 优化目标文件格式的压缩。例如，JPEG图片有一个质量设置。指定一个小于100%的质量百分比会压缩图片，但同时也会降低视觉品质。优化的艺术是找出不会导致可见质量损失的最高压缩水平（图片质量确实降低了，但只是轻微的，所以人根本注意不到）。确切的压缩阈值会因图片和格式的不同而有所差别。

另外一种优化是去掉文件中不必要的元数据。大部分照片都包含相机和图形应用存储的元数据，这增加了图片的大小，而且终端用户并不需要。本文将要介绍的所有图片优化服务都会同时去掉这类元数据。\

上述步骤非常耗时，而且需要具备专业知识才能达到理想的效果。对于只有几张图片的网站而言，也许可以手工优化图片。不过，在现代网站上，一个页面就有几十或者几百张图片，所以，自动化是有必要的。\

首先让我们看下如何手工优化图片。然后，我们将向你展示如何使用其中每一种云图片服务自动实现同样的优化。\

下面是参考图片。这是一个2048 X 1365像素的PNG文件，大小为3975KB。\

图片来源：Marika Mariani on Flickr\

为了让情况更复杂一些并充分利用不同工具的功能，我们假设这个横向图片需要刚好放入网页上用于放置肖像的纵向区域。下面是示例Web网页，借用了Wikipedia上的Parrots条目：\

（点击查看大图）

\

为了优化这个图片并将其放到网页上，我们需要执行以下步骤：\

• 调整图片大小并进行裁剪，保证鹦鹉在可用区域里可见，而又不损失原始图片的长宽比。图片会明显变小。

  

  \
• 从PNG转换成一个对这个图片而言更有效的文件格式，如JPEG。 \
• 压缩图片，减少文件大小，而又不降低图片的视觉品质。

  

每个步骤都会明显减少文件大小，而又不会在视觉上降低质量。总之，如果我们调整图片大小，转换到一个更精简的文件格式，优化该格式的压缩参数，那么结果图片会是原始图片的一小部分。\

现在让我们看下，如何使用三种图片管理服务的其中一种自动实现这种转换，并且看下它们在每个阶段可以将文件缩小多少。\

请记住：这不是一个基准。图片内容不同，构图不同，优化后的文件大小可能会有差异。因此，这不是在对不同服务的有效性进行绝对测试，其有效性可能会因为图片类型的不同而不同。\

使用Kraken.io优化图片

\

Kraken.io是一项专门针对图片优化的云服务。其免费方案提供100MB的图片存储。\

Kraken提供一个API，你可以通过编程上传图片，或者提供一个指向该图片的URL。在调用这个API时，你可以给服务发送指令，让其对图片执行特定的优化，并下载优化后的新版本。\

下面是使用Kraken优化鹦鹉图片的步骤：\

1.注册Kraken账户，安装相关SDK，验证自己的身份，并使用POST请求将图片上传到Kraken。\

使用Kraken的PHP SDK，上传代码如下：

$kraken = new Kraken(\"your-api-key\