画像変換をはじめる

ImageFluxを利用して画像変換、配信を始めるまでのステップを紹介します

ImageFluxでは、お客様のストレージサーバ（オリジン）から画像を取得し、URLに指定されたパラメータによって画像を変換、キャッシュして配信します。

リクエストの流れ

それぞれのオリジンにはImageFluxのホスト名が割り当てられます。ホスト名は.imageflux.jpで終わるランダムな英数字です。クライアントはこのホスト名を使用してImageFluxにリクエストします。ImageFluxは対応するオリジンからオリジナル画像を取得し、リクエストURLの変換パラメータで指定された画像変換を行って出力画像を応答します。

オリジンを追加するlink

オリジンを追加するには管理コンソールのを選択します。 オリジンの設定画面では、オリジンからの画像取得に関する設定を行います。ImageFluxでは、オリジンから画像を取得するプロトコルとしてHTTP、もしくはS3 API(Amazon S3、さくらのオブジェクトストレージ、Google Cloud Storage)をサポートしています。オリジンについてはオリジンの設定を参照してください。

たとえばhttps://www.example.com/をオリジンとして設定する場合、次のように指定します。

TypeHTTP
Schemehttps
Hostwww.example.com
Path Prefix/

画像変換をリクエストするlink

ImageFluxはオリジンごとに割り当てられたホスト名に対し、パスの先頭に画像変換パラメータをつけてリクエストすることで、オリジンから画像を取得しその画像を変換して応答します。 たとえば以下の画像は demo.imageflux.jp に割り当てられたオリジンから画像を取得し、幅を400pxに縮小し、ImageFluxがキャッシュして応答しています。

https://demo.imageflux.jp/w=400/bridge.jpg

このように画像変換パラメータを先頭につけたURLをWebアプリケーションやモバイルアプリケーションなどで用いることで、デザインやデバイスに最適化された画像をImageFluxから高速に配信できます。

対応する入力画像フォーマットlink

ImageFluxが対応する入力画像のフォーマットは以下の通りです。

  • JPEG
  • PNG
  • GIF ※アニメーションGIFの場合、出力画像フォーマットがMP4以外の場合は先頭フレームのみが処理されます
  • WebP ※WebPフォーマットは入力画像のフォーマットとして推奨はされません

出力画像のサイズlink

ImageFluxで出力可能な画像のサイズの上限は、幅・高さともに16383ピクセルです。 (これはWebPの仕様上の上限と同じです)
これを超えるサイズの画像を出力するようなパラメータ指定を行った場合、ステータスコード400が返されます。

なお、一切の変換が行われない場合には、この制限は適用されません。

出力画像フォーマットの指定link

ImageFluxが対応する出力画像のフォーマットは以下の通りです。

  • JPEG
  • PNG
  • GIF
  • WebP
  • MP4

どのフォーマットで出力するかは、パラメータ f= で指定できます。

代替フォーマット指定link

WebPでの出力に関しては、表示をサポートしないクライアントが存在するため、その場合に出力する代替フォーマットを追加で指定できます。(f=webp:jpeg など) しかし、この代替フォーマット指定を行った場合、クライアントが送信する Accept リクエストヘッダの内容ごとにキャッシュが生成されるため、そのぶんオリジンへのリクエストが増えてしまいます。 また、キャッシュエントリが自動的にパージされてしまう可能性も高くなってしまいます。 そのため、可能な限り、代替フォーマット指定を伴わない形での指定を推奨します。 なお、ブラウザをクライアントとして想定する場合、 <picture> タグを用いることにより、そのブラウザが対応するフォーマットごとに出力指定を行うことが可能です。

例

<picture>
  <source srcset="https://demo.imageflux.jp/w=200,f=webp/bridge.jpg" type="image/webp" width="200">
  <source srcset="https://demo.imageflux.jp/w=200,f=jpeg/bridge.jpg" type="image/jpeg" width="200">
  <img src="https://demo.imageflux.jp/w=200,f=webp:jpeg/bridge.jpg" width="200">
</picture>
出力例

このように指定した場合、WebPを表示可能なブラウザではWebPで、そうでなければJPEGでの変換結果が返されます。 <picture> に対応していない古いブラウザの場合は <img> タグが解釈され、従来通りの代替フォーマット指定によるWebPまたはJPEGの出し分けが行われます。(とはいえ、WebPをサポートするブラウザはおおむね <picture> タグもサポートしていると考えられます)

MP4出力link

f=mp4 を指定した場合、任意の入力画像をMP4に変換できます。 ただし、入力がアニメーションGIFでない限りは、単に入力画像を1フレームのみのMP4に変換することになり、あまり有意義ではありません。

MP4をブラウザ上で表示する場合は、 <img> タグではなく <video> タグを用いる必要があります。 アニメーションGIFと同じように自動で再生を開始したり再生をループさせたりしたい場合には autoplay 属性および loop 属性を指定できます。 ImageFluxのMP4出力結果はオーディオトラックを含みませんが、一般的なブラウザは音声を出力する動画の自動再生を抑止するため、 muted 属性も指定することを推奨します。

例

<video src="https://demo.imageflux.jp/w=240,h=240,f=mp4/images/rotating_earth.gif" width="240" height="240" autoplay loop muted />
出力例

キャッシュの有効化link

ImageFluxの現在の仕様では、オリジンからのレスポンスヘッダに指定がない場合、ImageFlux上でのキャッシュが行われません。※HTTP仕様上、オリジンが Cache-Control ヘッダを返さない場合はプロキシ側にキャッシュを行うかどうかの選択権があります。したがって、将来、ImageFluxでも Cache-Control がない場合にも自動でキャッシュを行うようになる可能性がありますのでご注意ください。

ImageFlux上でキャッシュを行わない場合、クライアントからのリクエストがあるたびにオリジンへの元画像の取得のリクエストが発生してしまい、速度的にも転送量的にも、ImageFluxを利用する恩恵を正しく受けることができません。

ImageFluxでキャッシュを有効化するには、具体的には、オリジンからのレスポンスヘッダに有効な Cache-Control 指定を含めるか、デフォルトキャッシュ機能を利用してください。 また、どうしてもキャッシュされては困るコンテンツに関しては、オリジンから Cache-Control: no-store を出力してその旨を明示してください。

次のステップlink

ImageFluxは拡大・縮小のほかに、クリッピング、オーバーレイ合成、アンシャープマスクといった画像変換を行えます。 画像変換パラメータについては、画像変換パラメータリファレンスを参照してください。

  • © pixiv Inc., SAKURA Internet Inc.