Upgrade to Pro — share decks privately, control downloads, hide ads and more …

顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と ...

顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~

SRE NEXT 2025 で発表した内容となります。

Avatar for Takuya TAKAHASHI

Takuya TAKAHASHI

July 12, 2025
Tweet

More Decks by Takuya TAKAHASHI

Other Decks in Programming

Transcript

  1. 2 自己紹介 技術部 技術基盤グループ プリンシパルエンジニア 2019年 中途入社 高橋 拓也 takutaka

    インフラエンジニア。パブリッククラウドの活用と クラウドネイティブ関連技術に関する業務が 多い。自宅の Kubernetes はもうすぐ5年目 となり、愛着があるため破壊的な構成変更が できない。
  2. - ショップオーナー - カラーミーショップを用いて EC サイトを運営する方 - カラーミーショップに料金を支払ってくれているのはこちら - エンドユーザー

    - ショップに訪れて購買行動を起こす方 - ショップオーナーにとっての「お客様」 8 カラーミーショップ カラーミーショップには 2種類の「お客様」がいる
  3. 14 画像配信サーバ 商品画像に向く画像の例 - jpeg to jpeg の動的画像変換サーバで入稿画像の自動変換を実施している - ショップオーナーの手間なく最適な画像を配信するため

    - 配信容量の削減と表示速度の高速化が実現できている 転送容量削減によるコスト最適化と 顧客体験の向上を目的として 次世代フォーマットへの動的変換を行った
  4. - カラーミーショップで運営されているショップの回遊をシミュレーション a. とあるショップの「よくアクセスされる URL」トップ100を出す b. 100のURLからリンクで辿れる2階層までの全画像を収集する c. 画像の出現回数、画像の容量を集計する d.

    画像を WebP に変換する e. 変換後の容量 * 出現回数を全画像で計算する f. 足し合わせて総容量を比較する 19 実ワークロードでの有効性検証 実ショップから傾向を知る
  5. - 「ショップオーナーだけ WebP で表示される」モードを実装 by windyakin - ショップの管理画面から有効化できる - 確認の結果、品質が受け入れられないショップに対しオプトアウトを提供

    27 漸進的なリリース戦略 WebP お試しモードの実装 ショップオーナーにご納得いただいたうえで リリースを迎えることができた
  6. 29 リリース戦略 - WebP に変換する画像は jpeg に限定した - png, gif

    は対象外とした - 可逆圧縮やアニメーションを含みリスクが高いため - 商品に紐づく画像を対象とした - https://img.shop-pro.jp/[ショップを表すパス]/product/ に配置されている 変換対象の決定
  7. 41 リリース戦略 - 拡張子に .webp をつけた Location をつけてクライアントに 302 Redirect

    する 最終的な構成 CF /cat.jpg 変換 url-conv /cat.jpg 302 Loc: /cat.jpg.webp 302 Loc: /cat.jpg.webp
  8. 51 画像が表示できない! - max-age が切れ、再度 CF にリクエストを送る - この際に if-modified-since

    ヘッダを付けて送信する 発生していたであろう事象 CF /cat.jpg 変換 S3 url-conv j If-Modified-Since: 3days-ago
  9. - 拡張子を変えずに古いjpeg のキャッシュが使えるようにした - 転送量、ユーザー体験ともに悪化しないため問題ない - ブラウザでの表示や保存した場合の挙動も問題なし - ブラウザは Content-Type

    でフォーマットを判断する仕様 66 実行した対策 302リダイレクトをやめた 紆余曲折あったがリリースが完了! 効果測定を実施した
  10. 69 リリース後の効果測定 - WebP での表示件数の増加 - 画像あたりの容量の減少 - その結果による CDN

    の総転送量の低下 期待する効果が得られたか? S3 に貯まるリクエストログを Athena で分析することで効果測定を実施した
  11. 80 想定通りの効果が出ていない!! - `/product/` のみ変換する仕様なので、集計を絞る - この範囲では WebP が容量と件数ともに一番多い 変換しているパスのみに集計を絞る

    種別 割合(容量) 割合(件数) image/jpeg 13.20% 6.4% image/webp 61.08% 88.5% image/png (更新対 象外) 25.70% 5.0% この jpeg は オプトアウトなど
  12. 81 想定通りの効果が出ていない!! - `/product/` のみ変換する仕様なので、集計を絞る - この範囲では WebP が容量と件数ともに一番多い -

    `/product/` 以外に大量に画像が配信されている? 変換しているパスのみに集計を絞る 種別 割合(容量) 割合(件数) image/jpeg 13.20% 6.4% image/webp 61.08% 88.5% image/png (更新対 象外) 25.70% 5.0%
  13. 85 想定通りの効果が出ていない!! - 見積もりでは総転送量の55%削減とあった - 後方互換維持やオプトアウトで13%ほど変換できなった jpeg が残っていた - 変換対象外の

    png が転送量の25%を占めていた - 見積もりに含まれていたが変換されていない画像の転送量が 53%を占めていた 見積もりとの差分まとめ
  14. 86 想定通りの効果が出ていない!! - 見積もりでは総転送量の55%削減とあった - 後方互換維持やオプトアウトで13%ほど変換できなった jpeg が残っていた - 変換対象外の

    png が転送量の25%を占めていた - 見積もりに含まれていたが変換されていない画像の転送量が 53%を占めていた 見積もりとの差分まとめ jpeg を対象として すべての画像を WebP にする追加リリースを実施した
  15. 87 全画像へのリリース - ほぼすべての jpeg を WebP に変換することができた - 全件数のうち3%ほど

    jpeg が残り、全容量の9.5%を占める 最終的なフォーマットの割合 画像種別 容量 件数 image/png 49.34% 51.06% image/webp 38.15% 40.08% image/jpeg 9.59% 2.87%
  16. - 最終的に約30%の転送量の削減が確認された - 当初の見積もり55%削減から、事実に基づき補正をかける - 当初の見積もりには png が含まれるため25%を割り引く - 後方互換維持のため変換できなかった

    jpeg 分9.5%を割り引く - 補正後の見積もりは 36%削減となり、致命的な見落としはなさそう 89 全画像へのリリース 最終的な転送量の削減効果 リリース前を100とすると 100-25-9.5=65.5 65.5*(1-0.55)=29.475 29.47+25+9.5=63.97 100-63.97=36.03
  17. 91 自己紹介 技術部 技術基盤グループ ソフトウェアエンジニア 2024年 中途入社 菅原 大和 drumato

    Kubernetesとシステムプログラミングが好きな ソフトウェアエンジニア。サービスに存在する あらゆる課題にインフラの専門性で貢献す る、をミッションに活動。休日は趣味プログラミ ングとゲームで一日が終わる。
  18. - オリジン(S3)の画像を取得(src) - /tmp に一時ファイルを作成 - disintegration/imaging で処理 - cwebp

    を実行して変換 - 結果をレスポンス 93 従来の仕組み WebP対応時の実装
  19. 104 新実装の評価 定量評価-統計値- min max mean median std AS-IS_JPEG_PROXY 18.0

    1015444.0 111159.963123 20651.0 142252.035273 AS-IS_WEBP_CONVERSION 18.0 881900.0 88504.311372 15628.0 120473.495223 TO-BE_JPEG_PROXY 18.0 877438.0 102079.783984 18342.0 131056.972249 TO-BE_WEBP_CONVERSION 18.0 1023856.0 72857.659620 13506.0 103922.802539
  20. - 画像品質の変化に対し、デザイナーやステークホルダと認識をすり合わせる - ECサイト制作サービスにおいて、 画像の重要性はきわめて高い - ショップオーナーにとって - 商品のイメージ向上 -

    購買率の変化によるビジネスインパクト - エンドユーザーにとって - 安心して商品を購入するための情報量 - 先ほどの統計レポート、新手法によって変換された画像データ、コストインパクトなどを共有 109 リリース方針 デザイナーとのすり合わせ
  21. - リリース前 P95: 100k~140k bytes - リリース後 P95: 80k~120k bytes

    116 リリース後 レスポンスボディのサイズ改善
  22. - リリース前 P95: 0.3~0.4 sec - リリース後 P95: 0.1~0.2 sec

    117 リリース後 レスポンスタイムの改善