Thumbor で画像を最適化する

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 を使用して画像を最適化するをご覧ください。また、基本的なウェブサイトを構築したことがあることも前提としています。

Thumbor URL 形式

画像 CDN を使用して画像を最適化するで説明したように、画像 CDN はそれぞれ画像に対して若干異なる URL 形式を使用します。図 1 は Thumbor の形式を示しています。

Thumbor URL は、オリジン、セキュリティ キー、サイズ、フィルタ、画像のコンポーネントで構成されます。
Thumbor の URL 形式

起源

すべての origin と同様に、Thumbor URL のオリジンは、スキーム（ほとんどの場合は http または https）、ホスト、ポートの 3 つの部分で構成されます。この例では、ホストは IP アドレスを使用して識別されますが、DNS サーバーを使用している場合は、thumbor-server.my-site.com のようになります。デフォルトでは、Thumbor はポート 8888 を使用して画像を提供します。

セキュリティ キー

URL の unsafe の部分は、セキュリティ キーなしで Thumbor を使用していることを示します。セキュリティ キーは、ユーザーが画像の URL を不正に変更することを防ぎます。画像の URL を変更すると、ユーザーがサーバー（およびホスティング料金）を使用して画像のサイズを変更することや、悪意を持ってサーバーに過剰な負荷をかけるおそれがあります。Thumbor のセキュリティ キー機能の設定については、このガイドでは説明しません。

サイズ

URL のこの部分では、出力画像のサイズを指定します。画像のサイズを変更したくない場合は省略できます。Thumbor は、他の URL パラメータに応じて、トリミングやスケーリングなどのさまざまなアプローチを使用して目的のサイズに調整します。この投稿の次のセクションでは、画像のサイズを変更する方法を詳しく説明します。

今すぐ試す:

  1. 次の URL をクリックすると、元のサイズで配信された画像が新しいタブに表示されます。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

100×100 ピクセルの画像
画像を 100x100 ピクセルにサイズ変更しました

フィルタ

フィルタは画像を変換します。URL セグメントのフィルタ部分は filters: で始まり、その後にフィルタをコロンで区切ったリストが続きます。フィルタを使用しない場合は、省略できます。個々のフィルタの構文は、0 個以上の引数を含む関数呼び出し（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 機能（圧縮、サイズ変更、ファイル形式間の変換）に焦点を当てます。

圧縮

品質フィルタは、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）を使用して画像を圧縮します。

明らかな画質の問題がない圧縮画像
圧縮画像

サイズを変更する

元の縦横比を維持したまま画像のサイズを変更するには、URL 文字列の 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. 画像を元の 50% に変更します。http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    元のサイズの 50% の画像
    画像を元のサイズの 50% にサイズ変更しました

  2. 画像の幅を 1, 000 ピクセルに変更してから、現在のサイズの 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 に変換します。DevTools の [Network] パネルを開くと、ドキュメントの Content-Type レスポンス ヘッダーに、サーバーが WebP 画像を返したことが示されます（http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg）。
画像のコンテンツ タイプ（WebP）を示す DevTools のスクリーンショット
DevTools に表示される content-type レスポンス ヘッダー

次のステップ

hero.jpg 画像に対して、他のフィルタや変換を試してください。

独自の Thumbor インストールを使用している場合は、以下の付録で thumbor.conf ファイルの使用方法とその理由をご確認ください。

付録: thumbor.conf

この投稿で説明する構成オプションの多くは、thumbor.conf 構成ファイルをセットアップして使用することで、デフォルトとして設定できます。thumbor.conf ファイルの設定は、URL 文字列パラメータでオーバーライドされない限り、すべての画像に適用されます。

  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