概要

背景

画像CDN・ImageFlux 画像変換・配信エンジンのオリジン設定には「パスパラメータ」と呼ばれる機能が存在する。
今回はそれを用い、画像のURLを簡潔なものに置き換えることを試した。

成果

画像変換パラメータおよびパスプレフィックスを繰り返し記述することなく、パスパラメータで一元管理できるようにした。

設定

オリジン設定

今回はオリジンをオブジェクトストレージに設定するため、そのアクセス情報を入力する。

オブジェクトストレージのoutputバケットに、画像を格納する。今回の場合はoutputバケット配下にflux-outputというフォルダがあり、そこに配信用の画像が格納されている。

プレビュー

ImageFluxにおいては、通常、URLに横幅や親ディレクトリのパスを追加し、画像変換を行う。プレビュー画面でURLを作成してみると、以下のような形になる（480pxのWebPに変換する例）。

https://p2-07eded31.imageflux.jp/c!/w=480,a=0,u=0,f=webp:jpeg,q=48/flux-output/CyberKnight_1.png

このままのURLでもよいのだが、パスパラメータを用いることでこうしたURLをドメイン/prefix/CyberKnight_1.pngという簡潔な形に置き換えることができる。

パスパラメータ設定

ここからが本番だ。
オリジン設定画面の最下部において、パスパラメータ設定を行う。
今回は、先ほどの480pxのWebPへの変換および親パスの設定を、Base Prefix１つで置き換えられるようにした。

この設定を行うことで、URLを以下のように置換することができる。

// 置換前
https://p2-07eded31.imageflux.jp/c!/w=480,a=0,u=0,f=webp:jpeg,q=48/flux-output/CyberKnight_1.png
// 置換後
https://p2-07eded31.imageflux.jp/prefix/CyberKnight_1.png

実際にURLを叩いてみると、無事480pxのWebP画像が表示された。

応用

オリジナルの画像は1024pxである。
レスポンシブ対応を考え、以下のような仕様にしてみる。

スマートフォンからのアクセスの場合、480px・WebPに変換する。
タブレットからのアクセスの場合、720px・WebPに変換する。
PCからのアクセスの場合は、WebP変換のみ行う。

対応して、以下のようなBase Prefixを設定する。

これで、/sm/画像ファイル名.jpgは常に同じパラメータで変換され、配信されるようになる。
実際に、以下のような試験用のHTMLを記述し、ブラウザで試してみる。
srcsetを使うことで、画面幅に応じて読み込む画像URLを変更するものだ。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Responsive Image Test (Width + DPR)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    body {
      margin: 0;
      padding: 1rem;
      background: #111;
      color: #eee;
      font-family: system-ui, sans-serif;
      text-align: center;
    }

    .container {
      max-width: 1024px;
      margin: 0 auto;
    }

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  </style>
</head>
<body>

  <div class="container">
    <p>お試し表示ページ</p>

    <picture>
      <!-- スマートフォン：～480px -->
      <source
        media="(max-width: 480px)"
        srcset="
          https://p2-07eded31.imageflux.jp/sm/CyberKnight_1.png 1x,
          https://p2-07eded31.imageflux.jp/sm/CyberKnight_1.png 2x
        "
      >

      <!-- タブレット：481～720px -->
      <source
        media="(max-width: 720px)"
        srcset="
          https://p2-07eded31.imageflux.jp/tb/CyberKnight_1.png 1x,
          https://p2-07eded31.imageflux.jp/tb/CyberKnight_1.png 2x
        "
      >

      <!-- PC：720px～ -->
      <source
        media="(min-width: 720px)"
        srcset="
          https://p2-07eded31.imageflux.jp/pc/CyberKnight_1.png 1x,
          https://p2-07eded31.imageflux.jp/pc/CyberKnight_1.png 2x
        "
      >

      <!-- フォールバック -->
      <img
        src="https://p2-07eded31.imageflux.jp/pc/CyberKnight_1.png"
        alt="CyberKnight"
      >
    </picture>
  </div>

</body>
</html>

iPhone SE設定では、/smの画像が表示され、

大画面では/pcの画像が表示される。

問題なく動作していることがわかる。

まとめ

今回はImageFluxのパスパラメータ機能を用いて、画像変換パラメータと画像ファイルまでのパス記述の簡略化を行ってみた。
パラメータの使いまわしを一元管理したい方、単純にURLをきれいにしたい方などにぜひ試してみて欲しい。