この第三回目の記事ではImage Resizingを使ってみます。第一回、第二回では、Imagesについてまとめていますので併せて参考にしてください。
Image Resizingはエッジ プラットフォームで画像を変換するサービスです。画像のサイズ変更、品質の調整、WebP または AVIF 形式への変換を行うことができ帯域を削減し結果としてサイトの読み込みを高速化させます。すべての派生画像をエッジで自動的にキャッシュするため、元の画像を 1 つだけ保存することとなるため、ストレージ料金の削減も可能です。
この機能の利用にはBusiness以上のプランが必要で、1 か月あたり 10 万件のリクエストごとに 10 ドルが請求されます。
前回取り上げたImagesと Image Resizingは機能が似ており連動しますが、ImagesはVariantというあらかじめサイズ変更やぼかしなど画像変換方式を指定して使うのに対して、Image Resizingはより動的にクライアント環境に合わせて自動で画像が最適化され配信される、という違いがあります。
Imagesの配信URL：
"https://imagedelivery.net/5v1HJYxUmB5cn9GF7iGU5g/6bad5c22-0f2d-4a76-c376-c175f6e27800/resize"
Image Resizingの配信URL：
"https://yoursite.com/cdn-cgi/image/width=100,height=100,quality=75/images/yourimage.jpg"
resizeがあらかじめサイズ変更が設定済のバリアントと呼ばれるもので変換は動的に行われますが、原則固定です。一方Image Resizingはwidth,height,qualityの値を変更することでより動的に変換を指定することが可能です。
早速有効化してみる
ImagesとImage Resizingは機能が似ており連動しますが、マネージメントコンソールの場所が異なっています。Speedの下のOptimizationに存在しています。
まずはトグルをオンにして有効化します。
では次に画像を配信するオリジンを作成します。Cloudflareで管理しているドメインからCNAMEをDNS Proxyモードで張る必要があります。
オリジンは何でもよいのですがCNAMEを設定できる必要があるため、Amazon EC2でWordPress AMIを適当に設定し以下とします。
"http://ec2-43-206-120-139.ap-northeast-1.compute.amazonaws.com/icons/apache_pb2.gif"
"https://imageresize.harunobukameda.labrat.online/icons/apache_pb2.gif"
(このサイトはしばらく皆さんのテスト用に残しておきます）
このProxyモードにセットしておくことで、クライアントからオリジンへの通信はCloudflareネットワークを通ることとなります。このネットワークの中でImage Resizeが動作します。
では早速Image Resizingを呼び出してみます。書式は以下です。
https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
ZONE:ドメイン名。今回でいうとimageresize.harunobukameda.labrat.online
OPTIONS:画像の動的変換パラメータ。width、heightなど。ここに一覧があります
SOURCE-IMAGE:変換対象画像の絶対パス。今回の例でいうと"https://imageresize.harunobukameda.labrat.online/icons/apache_pb2.gif"
今回の環境だと以下になります。
https://imageresize.harunobukameda.labrat.online/cdn-cgi/image/width=300/https://imageresize.harunobukameda.labrat.online/icons/apache_pb2.gif
画像がリサイズされて表示されていることがわかるでしょうか。では、width=300の数字を自由に返還して再読み込みを行ってみて下さい。画像が動的にリサイズされていることがわかります。
複数のパラメータを設定したい場合以下となります。
https://imageresize.harunobukameda.labrat.online/cdn-cgi/image/width=300,height=300/https://imageresize.harunobukameda.labrat.online/icons/apache_pb2.gif
"&"ではなくカンマ区切りであることに注意してください。
Image Resizingでは先日紹介したバリアント形式の画像変換以外にも、便利な機能がいくつかあります。
[compression=fast]
画像の品質を少し落とし転送速度を最適化させます。WebP または AVIF よりも JPEG が優先的に選択されます
[fit=contain]
画像の縦横比を維持して拡大、縮小します
[format=webp],[format=avif]
配信される画像形式を指定します
[metadata=none]
EXIFメタデータを廃棄します。最近の主要SNSは画像共有時にはEXIFが破棄されるようになっていると思います。画像には実は撮影時間や場所の情報がメタデータとしてくっついていますが、このオプションはそれを破棄します。
またHTMLから呼び出す場合は、例えば同じドメインであれば
<img src="/cdn-cgi/image/width=80,quality=75/icons/apache_pb2.gif" />
と記載して呼び出すことも可能です。
いかがでしょうか。非常に簡単に実装できることが分かったかと思います。
ダッシュボードではこのようにどれぐらいの帯域が節約できたか？が表示されています。
サポート画像形式や制限など
入力：
JPEG
PNG
GIF（アニメーション含む）
WebP (アニメーションなし)
SVG
出力：
JPEG
PNG
GIF（アニメーション含む）
WebP（アニメーション含む）
SVG
AVIF
Imagesとことなり、アニメーション画像はそのアニメーション情報を維持したまま変換が可能になっていることも特徴です。
処理可能な画像サイズは以下です。
ファイルサイズ：70MB 最大画像領域 100メガピクセル
その他細かい制限はこちらを参考にしてください。