Thumbor を無料で使用して、オンデマンドで画像のサイズ変更、圧縮、変換を行うことができます。
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 の形式を示しています。
起源
すべての origin と同様に、Thumbor URL のオリジンは、スキーム(ほとんどの場合は http
または https
)、ホスト、ポートの 3 つの部分で構成されます。この例では、ホストは IP アドレスを使用して識別されますが、DNS サーバーを使用している場合は、thumbor-server.my-site.com
のようになります。デフォルトでは、Thumbor はポート 8888
を使用して画像を提供します。
セキュリティ キー
URL の unsafe
の部分は、セキュリティ キーなしで Thumbor を使用していることを示します。セキュリティ キーは、ユーザーが画像の URL を不正に変更することを防ぎます。画像の URL を変更すると、ユーザーがサーバー(およびホスティング料金)を使用して画像のサイズを変更することや、悪意を持ってサーバーに過剰な負荷をかけるおそれがあります。Thumbor のセキュリティ キー機能の設定については、このガイドでは説明しません。
サイズ
URL のこの部分では、出力画像のサイズを指定します。画像のサイズを変更したくない場合は省略できます。Thumbor は、他の URL パラメータに応じて、トリミングやスケーリングなどのさまざまなアプローチを使用して目的のサイズに調整します。この投稿の次のセクションでは、画像のサイズを変更する方法を詳しく説明します。
今すぐ試す:
次の URL をクリックすると、元のサイズで配信された画像が新しいタブに表示されます。http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
画像を 100x100 ピクセルに変更します。http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
フィルタ
フィルタは画像を変換します。URL セグメントのフィルタ部分は filters:
で始まり、その後にフィルタをコロンで区切ったリストが続きます。フィルタを使用しない場合は、省略できます。個々のフィルタの構文は、0 個以上の引数を含む関数呼び出し(grayscale()
など)に似ています。
今すぐ試す:
単一のフィルタを適用します。半径 25 ピクセルのガウスぼかし効果(http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg)
複数のフィルタを適用します。グレースケールに変換し、画像を 90 度回転します(http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg)。
画像の変換
このセクションでは、パフォーマンスに最も関連性の高い Thumbor 機能(圧縮、サイズ変更、ファイル形式間の変換)に焦点を当てます。
圧縮
品質フィルタは、JPEG 画像を目的の画質レベル(1 ~ 100)に圧縮します。品質レベルが指定されていない場合、Thumbor は画像を品質レベル 80 に圧縮します。これは適切なデフォルト設定です。80 ~ 85 の画質レベルは通常、画質にほとんど影響しませんが、通常は画像サイズを 30 ~ 40% 小さくします。
今すぐ試す:
画像を 1 の品質に圧縮します(非常に悪い)。http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
Thumbor のデフォルトの圧縮設定(http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg)を使用して画像を圧縮します。
サイズを変更する
元の縦横比を維持したまま画像のサイズを変更するには、URL 文字列の size
の部分で $WIDTHx0
または 0x$HEIGHT
の形式を使用します。
今すぐ試す:
元の縦横比を維持したまま、画像の幅を 200 ピクセルに変更します。http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
元の比率を維持しながら、画像の高さを 500 ピクセルに変更します。http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
比率フィルタを使って、画像を元の比率にサイズ変更することもできます。サイズを比率フィルタと組み合わせて指定すると、画像のサイズが変更され、「比率」フィルタが適用されます。
今すぐ試す:
画像を元の 50% に変更します。http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
画像の幅を 1, 000 ピクセルに変更してから、現在のサイズの 10% に変更します(http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg)。
これらの方法は、Thumbor の多数の切り抜きとサイズ変更のオプションのほんの一部です。その他のオプションについては、使用方法をご覧ください。
ファイル形式
形式フィルタは、画像を jpeg
、webp
、gif
、または png
に変換します。パフォーマンスを最適化する場合は、JPEG または WebP のいずれかを使用してください。PNG ファイルと GIF ファイルはサイズがかなり大きく、それほど圧縮されない傾向があるためです。
今すぐ試す:
- 画像を WebP に変換します。DevTools の [Network] パネルを開くと、ドキュメントの Content-Type レスポンス ヘッダーに、サーバーが WebP 画像を返したことが示されます(http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg)。
次のステップ
hero.jpg
画像に対して、他のフィルタや変換を試してください。
独自の Thumbor インストールを使用している場合は、以下の付録で thumbor.conf
ファイルの使用方法とその理由をご確認ください。
付録: thumbor.conf
この投稿で説明する構成オプションの多くは、thumbor.conf
構成ファイルをセットアップして使用することで、デフォルトとして設定できます。thumbor.conf
ファイルの設定は、URL 文字列パラメータでオーバーライドされない限り、すべての画像に適用されます。
thumbor-config
コマンドを実行して、新しいthumbor.conf
ファイルを作成します。thumbor-config > ./thumbor.conf
新しい
thumbor.conf
ファイルを開きます。thumbor-config
コマンドにより、すべての Thumbor 構成オプションを一覧表示して説明するファイルが生成されました。行のコメント化を解除し、デフォルト値を変更して、設定を構成します。次の設定を使用すると便利です。
QUALITY
AUTO_WEBP
MAX_WIDTH
、MAX_HEIGHT
ALLOW_ANIMATED_GIFS
--conf
フラグを指定して Thumbor を実行し、thumbor.conf
設定を使用します。thumbor --conf /path/to/thumbor.conf