使用拇指优化图片

Thumbor 可免费使用，以按需调整图片大小、压缩和转换图片。

Katie Hempenius
Katie Hempenius
X

Thumbor 是一个免费的开源图片 CDN，可让您轻松压缩、调整和转换图片。在这篇博文中，您无需安装任何工具即可亲身试用 Thumbor。我们在 http://34.67.235.246:8888 中设置了沙盒 Thumbor 服务器，供您试用。您可以通过以下网址获得要实验的图片：http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg。

前提条件

这篇博文假定您了解图片 CDN 如何提高您的加载性能。如果没有，请查看使用图片 CDN 优化图片。此外，本指南还假定您之前构建过基础网站。

缩略图网址格式

如使用图片 CDN 优化图片部分所述，每个图片 CDN 都会使用略有不同的图片网址格式。图 1 表示 Thumbor 的格式。

Thumbor 网址包含以下组成部分：来源、安全密钥、大小、过滤条件和图片。
Thumbor 的网址格式

原点

与所有源站一样，Thumbor 网址的来源由三部分组成：架构（几乎总是 http 或 https）、主机和端口。在此示例中，主机使用 IP 地址标识，但如果您使用的是 DNS 服务器，则它可能类似于 thumbor-server.my-site.com。默认情况下，Thumbor 使用端口 8888 传送图片。

安全密钥

网址的 unsafe 部分表示您使用的 Thumbor 没有安全密钥。安全密钥可以防止用户未经授权更改您的图片网址。通过更改图片网址，用户可能会使用您的服务器（以及您的托管账单）来调整其图片的大小，或者以恶意方式使服务器超载。本指南不会介绍如何设置 Thumbor 的安全密钥功能。

大小

网址的这一部分用于指定所需的输出图像大小。如果您不想更改图片大小，可以忽略此字段。Thumbor 会根据其他网址参数使用不同的方法（如剪裁或缩放）来达到所需的尺寸。本文的下一部分将更详细地介绍如何调整图片大小。

立即试用：

  1. 点击以下网址，即可在新标签页中查看以原始大小投放的图片：http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    图片（原始大小）
    原始图片

  2. 将图片尺寸调整为 100x100 像素：http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

100x100 像素的图片
图片大小已调整为 100x100 像素

过滤条件

过滤器用于转换图像。网址段的过滤条件部分以 filters: 开头，后跟以英文冒号分隔的过滤条件列表；如果您未使用任何过滤条件，则可以省略此字段。各个过滤条件的语法类似于包含零个或多个参数的函数调用（例如 grayscale()）。

立即试用：

  1. 应用单个滤镜：半径为 25 像素的高斯模糊效果：http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    经过模糊处理的图片
    经过模糊处理的图片

  2. 应用多个过滤条件。转换为灰度模式并将图片旋转 90 度：http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

已旋转 90 度的灰度图片
已旋转的灰度图片

转换图片

本部分重点介绍与性能最相关的 Thumbor 功能：压缩、调整大小和文件格式转换。

压缩

quality 过滤器会将 JPEG 图片压缩至所需的图片质量级别 (1-100)。如果未提供质量级别，Thumbor 会将图片压缩至质量级别 80。这是一个不错的默认值：质量级别 80 到 85 通常对图片质量影响不大，但通常会将图片大小减小 30-40%。

立即试用：

  1. 将图片压缩至质量 1（非常差）：http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    图片质量不佳
    低画质图片

  2. 使用 Thumbor 的默认压缩设置压缩图片：http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

没有明显质量问题的压缩图片
压缩的图片

调整大小

要在保持图片原始比例的同时调整图片大小，请在网址字符串的 size 部分使用 $WIDTHx0 或 0x$HEIGHT 格式。

立即试用：

  1. 将图片宽度调整为 200 像素，同时保持原始比例：http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    图片宽度为 200 像素
    图片的宽度已调整为 200 像素

  2. 将图片的高度调整为 500 像素，同时保持原始比例：http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

图片高度为 500 像素
已将图片高度调整为 500 像素
1-5

您还可以使用比例过滤条件，将图片大小调整为原始比例。如果同时指定尺寸和比例过滤器，系统会调整图片大小，然后应用比例过滤器。

立即试用：

  1. 将图片大小调整为原始图片的 50%：http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    图片尺寸为原始图片大小的 50%
    图片大小已调整为原始大小的 50%

  2. 将图片的宽度调整为 1000 像素，然后将图片大小调整为当前大小的 10%：http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

图片宽度为 100 像素
图片的宽度已调整为 100 像素

这些方法只是 Thumbor 众多剪裁和大小调整选项中的几种。如需了解其他选项，请参阅用法。

文件格式

格式过滤条件可将图片转换为 jpeg、webp、gif 或 png。请注意，如果您要优化性能，则应使用 JPEG 或 WebP，因为 PNG 和 GIF 文件往往会比较大，因此也不应进行压缩。

立即试用：

  1. 将图片转换为 WebP 格式。如果您打开开发者工具的 Network 面板，文档的 Content-Type 响应标头会显示服务器返回了 WebP 图片：http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
显示图片的内容类型 (WebP) 的开发者工具屏幕截图
开发者工具中显示的 content-type 响应标头

后续步骤

尝试对 hero.jpg 图片使用其他滤镜和转换效果。

如果您遵循了自己的 Thumbor 安装步骤，请参阅以下附录，了解使用 thumbor.conf 文件的方式和原因。

附录：thumbor.conf

可以通过设置和使用 thumbor.conf 配置文件，将本博文中讨论的许多配置选项以及许多其他配置选项设为默认选项。除非被网址字符串参数替换，否则 thumbor.conf 文件中的设置将应用于所有图片。

  1. 运行 thumbor-config 命令以创建新的 thumbor.conf 文件。

    thumbor-config > ./thumbor.conf

  2. 打开新的 thumbor.conf 文件。thumbor-config 命令生成一个文件，其中列出并说明所有 Thumbor 配置选项。

  3. 通过取消注释这些行并更改默认值来配置设置。 您可能会发现设置以下设置很有用：

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH和MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. 运行带有 --conf 标志的 Thumbor，以使用您的 thumbor.conf 设置。

    thumbor --conf /path/to/thumbor.conf