ライトメージ(画像最適化)オプション

ライトイメージはオリジンサーバーにある画像をリサイズ・フォーマット変換し、 Web高速化・転送量削減が可能 となるオプションサービスです。 手動最適化と自動最適化の2種類の方法をご用意しております。

サポートされるフォーマット

サポートされる画像フォーマットは以下の通りです。

  • JPEG
  • PNG
  • GIF
  • WEBP

手動最適化(リサイズ・フォーマット変換)

各画像URLに所定のクエリーストリングを付与することによってリサイズ・フォーマット変換ができます。

リサイズ

クエリーストリングでw=横幅,h=縦幅(数字)を指定することによりリサイズがおこなわれます。

画像サイズを300x200にリサイズ ?w=300,h=200

注釈

  • 画像サイズよりパラメーターが大きい場合処理はスキップされます。
  • 最大画像サイズは9999x9999 となり、比率に応じて横幅または縦幅の調整が行われます。

フォーマット変換

クエリーストリングで指定することにより指定フォーマットに変換することができます。 test.jpgをtest.pngに変更する場合 test.jpg?f=png と指定します。

自動最適化の無効化

クエリーストリングで ?lightimage=false と指定することにより、自動最適化処理を全てスキップし オリジナルの画像をキャッシュから配信します。

自動最適化

ライトイメージは対応ブラウザ・クライアントの場合、自動的に各種画像をWEBP形式にロスレス変換し画像サイズの大幅削減をおこないます。

Client Hints対応による自動リサイズ

ライトイメージは**Client Hints**に対応しており、HTMLページに以下のmetaタグを追加することによって、Client Hints対応ブラウザからのアクセスにおいて、 DPR(Device Pixel Ratios)を考慮した動的リサイズがおこなわれます。

<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">

ライトイメージは、以下のリクエストヘッダー内の値を判別し自動最適化をおこないます。

  • viewport-width
  • Width
  • DPR

Client Hintsの動作判定

  1. viewport-width 及び Width いずれかのヘッダーが存在する場合はリサイズ処理に入ります。
  2. Widthヘッダーが存在する場合はWidthヘッダー内の値にリサイズする。
  3. Widthヘッダーが存在しない(HTMLソースにsizes等指定していない)場合、DPRが1の場合に限りviewpoer-width の値で画像をリサイズします。DPRが1以外の場合は、リサイズ処理をスキップします。

デフォルトの品質レベル

指定されていない場合に限り、 デフォルト値85 が適用されます。

優先順位

手動によるリサイズ・フォーマット変換が最も優先され、 自動最適化は手動によるリサイズ・フォーマット変換が行われていない場合に限り適用されます。

エラー処理

何らかの理由により画像処理に失敗した場合は、オリジナルの画像を再取得します。