Thumbor を使用すると、必要に応じて画像のサイズ変更、圧縮、変換を無料で行うことができます。
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">出発地
他のオリジンと同様に、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
<ph type="x-smartling-placeholder">画像を 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
<ph type="x-smartling-placeholder">複数のフィルタを適用します。グレースケールに変換し、画像を 90 度rotateします: 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
<ph type="x-smartling-placeholder">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
<ph type="x-smartling-placeholder">元のアスペクト比を維持したまま、画像の高さを 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
<ph type="x-smartling-placeholder">画像を幅 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
thumbor.conf
設定を使用するには、--conf
フラグを指定して Thumbor を実行します。thumbor --conf /path/to/thumbor.conf