Thumbor で画像を最適化する

Thumbor を使用すると、必要に応じて画像のサイズ変更、圧縮、変換を無料で行うことができます。

Katie Hempenius
Katie Hempenius
X

Thumbor は無料のオープンソースの画像 CDN で、画像の圧縮、サイズ変更、変換を簡単に行えます。この投稿では、何もインストールせずに Thumbor を直接試すことができます。サンドボックスの Thumbor サーバーを設定しましたので、http://34.67.235.246:8888 でお試しいただけます。テストに使用する画像は、http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg で確認できます。

前提条件

この投稿は、画像 CDN によって読み込みのパフォーマンスがどのように改善されるかを理解していることを前提としています。そうでない場合は、画像 CDN を使用して画像を最適化するをご覧ください。また、基本的なウェブサイトの構築経験があることを前提としています。

Thumbor URL 形式

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

<ph type="x-smartling-placeholder">
</ph> Thumbor URL には、オリジン、セキュリティ キー、サイズ、フィルタ、画像というコンポーネントがあります。
Thumbor の URL 形式

出発地

他のオリジンと同様に、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

    <ph type="x-smartling-placeholder">
    </ph> 元のサイズの画像
    元の画像

  2. 画像を 100x100 ピクセルに変更します: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

で確認できます。 <ph type="x-smartling-placeholder">
</ph> 100 x 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

    <ph type="x-smartling-placeholder">
    </ph> ぼかしを入れた画像
    ぼかしを入れた画像

  2. 複数のフィルタを適用します。グレースケールに変換し、画像を 90 度rotateします: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

で確認できます。 <ph type="x-smartling-placeholder">
</ph> 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

    <ph type="x-smartling-placeholder">
    </ph> 画像の品質が低い
    低画質の画像

  2. Thumbor のデフォルトの圧縮設定（http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg）を使用して画像を圧縮します。

で確認できます。 <ph type="x-smartling-placeholder">
</ph> 顕著な品質の問題がない圧縮された画像
圧縮された画像

サイズを変更する

元の縦横比を維持したまま画像のサイズを変更するには、URL 文字列の size 部分に $WIDTHx0 または 0x$HEIGHT という形式を使用します。

今すぐ試す:

  1. 元のアスペクト比を維持したまま、画像を幅 200 ピクセルに変更します: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    <ph type="x-smartling-placeholder">
    </ph> 幅 200 ピクセルの画像
    画像を幅 200 ピクセルにサイズ変更しました

  2. 元のアスペクト比を維持したまま、画像の高さを 500 ピクセルに変更します: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

で確認できます。 <ph type="x-smartling-placeholder">
</ph> 縦 500 ピクセルの画像
画像を高さ 500 ピクセルにサイズ変更しました

[比率] フィルタを使用して、画像を元のサイズの一部にサイズ変更することもできます。比率フィルタと同時にサイズを指定すると、画像のサイズを変更してから比率フィルタが適用されます。

今すぐ試す:

  1. 画像を元のサイズの 50% に変更します: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    <ph type="x-smartling-placeholder">
    </ph> 元のサイズの 50% のサイズの画像
    画像を元のサイズの 50% にサイズ変更

  2. 画像を幅 1, 000 ピクセルにサイズ変更してから、画像を現在のサイズの 10% に変更します（http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg）。

で確認できます。 <ph type="x-smartling-placeholder">
</ph> 幅 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）。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> 画像のコンテンツ タイプ（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. thumbor.conf 設定を使用するには、--conf フラグを指定して Thumbor を実行します。

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