約束の地

キャロ組

ImageFlux meetup #01

ImageFlux meetup #01

先日開催された ImageFlux meetup #01 の様子をざっくりと書きます。末尾にスライドを並べておきました。

f:id:gregminster:20180125184728j:plain

ImageFlux とは

開催概要

  • 2018/01/25(木)
  • 19:30~
  • ピクシブ株式会社

1. ImageFluxアップデート

  • 現在のサービス
    • URLを変えるだけで画像変換
      • API的
      • /c/w=500,f=webp:jpg/thumb.jpg
    • 開発負荷の低下
    • 既存のストレージをそのまま利用可能
      • 必要なところから変えていける
    • やれること
      • スケーリングモード
      • クロップ位置の指定 − 画像のオーバーレイ(ロゴやセール……)
    • 一番使われているのは WebP
      • ブラウザのリクエストを自動判別している
    • 転送量に応じた課金
  • アップデート予定
    • インフラ拡張 − 統計機能の改善 − 日付を指定してのレポート − 画像変換のレポート(フォーマットの間違いを見つけるなど) − 0バイト、壊れた画像…… − 料金体系の再考 − フォーマットの追加 − HEICへの対応(HEIF/HEIC) − ライブ配信 − ブラウザからすぐに大規模ライブ配信 − ライブ変換の動的変換サービス − 現在開発中

2. ユーザーセッション(1)

  • STORES.jp
  • 使われている場所
    • メイン
    • お知らせ
    • 商品画像
  • 導入の経緯
    • 導入前
      • STORES→S3←リクエスト→返却←API←閲覧者
      • ImageMagickで変換して返していた
      • 無ければその場でS3に作ってそのURIを返す
        • リサイズのたびにアプリ
        • リサイズのたびにS3に貯まる
      • ここに注力したくはない(インフラ専任者は不在)
      • (2017年1月)検討開始→(2月)無料トライアル〜(3月)一部導入〜(4月)本番環境 − 導入後
      • ImageFluxのアーキテクチャどおり
      • サーバのお守りがなくなって幸せ
      • 本質的な部分に開発リソースを使えるようになった
  • 導入時の問題点
    • まったくなかった
    • ドキュメントを読めばすぐに使えた
  • 移行作業
    • URIを変更するだけ
    • 変更する場所を探すのが一番つらかった
  • 現在の問題点
    • 統計表示が遅い
    • 統計の機能が浅い(比較などをしたい)

3. ユーザーセッション(2)

  • 画像配信の最適化
  • 主にスマートフォン
  • データ通信量の大部分は画像のデータ
  • 画像は毎日100万ファイル単位で増える
  • CDN
    • Akamai
    • ImageFlux
  • Origin
    • S3
  • User -> Akamai -> ImageFlux -> S3
    • 上記のようになった
  • なぜImageFluxか
    • データが増えて配信コストが増えるのを何とかしたい
    • スマートデバイスの通信量を減らしてUX向上させたい
    • UIやデザイン変更に伴う変更の困難さを解消したい
  • 長期間のA/Bテスト(数十個単位のテストが並行)
    • 3列に切り替えてみたところ……
      • CDNが1.5倍のトラフィックになった
        • コストがかかる……
        • ギガが減る……
  • ImageFlueを導入することで期待できること
    • 各種データ削減
    • 開発コスト削減
    • 三列向けに動的リサイズやWebP
  • WebP
    • Android 4.0 以上
    • iOSアプリの対応はネイティブ(6万行追加のPR)
  • 結果
    • 縮小とリサイズで10~20%減
    • WebPを加えると40~50%減
    • 通信量が30%減少(ペタが減った)
    • ただし、WebP対応と非対応の違いが生じたためにCDNのキャッシュヒット率減った
      • 数%のヒット率の差でS3の料金が100万円ぐらい違ってくる…… − UIやデザインに柔軟に対応できるようになった − スマホアプリ中心の場合は非常に重要

4. 技術セッション(1)

  • HEIF
    • コンテナ
    • JPEG2000を踏襲
    • H.265
  • いいところ
    • JPEGの半分容量
    • PNGのロスレス
    • アニメーション
    • RAWもTIFFも − 透明度指定も可能
    • Exif
  • だめ?なところ
    • YUV ではなく RGB
  • 一つの画像にサムネイルとかいろいろ入る
  • 変換
    • H.265 を使って画像を切り出す
    • ffmpeg
      • 64x64より小さいとダメ
  • MPEGライセンス問題(Qiitaに記事あり)
    • AVIF(AV1)
      • Netflix, Mozilla, Google...

5. 技術セッション(2)

  • ImageFlux Live
    • ブラウザからプラグイン不要でライブ配信
      • HLS
    • pixiv Sketch Live
      • pixiv ONE
      • 同時視聴5000ユーザ
      • このためにImageFluxチームで開発
  • WebRTC(よって低遅延)
    • HLSに変換(よって大規模配信が可能)
  • HTTP Live Streaming
    • by Apple
      • iOS: native(じゃないと審査が通らない)
      • Android: ExoPlayer
      • Web browser: hls.js
    • .m3u8
      • ポーリング
  • pixiv Sketch Live だと遅延は10秒くらい
    • 今は3秒にしてる、3つのファイルが仕様なので10秒位
    • 1秒にすれば3秒位まで減らせそう(実験中)
  • WebRTC SFU Sora
  • Stream Manager
    • RTP(UDP)
      • 並び替えが必要
      • パケットロスも
  • Transcoder
    • NVDEC/NVENC

6. その他(自分が思ったこと)

  • エラーレポート
    • 画像のageレート
    • Webhook対応の要望は多い
      • エラーレポートなどがすぐに Slack に投げられたりすると嬉しい

当日のスライド

当日の発表内容に即したブログ

備考

f:id:gregminster:20180125213626j:plain

絵馬は少し増えてます。 f:id:gregminster:20180125224422j:plain

Powered by はてなブログ