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

ピクシブ社内のImageFlux利用事例紹介

 ピクシブ社内のImageFlux利用事例紹介

ImageFlux meetup #4で発表した内容です。

Atsushi Takayama

August 30, 2019
Tweet

More Decks by Atsushi Takayama

Other Decks in Technology

Transcript

  1. ピクシブ社内の
    ImageFlux利用事例紹介
    ImageFlux meetup #4
    pixiv Inc.
    Atsushi Takayama
    2019.8.30

    View full-size slide

  2. 2
    自己紹介
    ● 高山温 / @edvakf
    ● ピクシブ株式会社 CTO
    ○ 2012年入社
    ■ 主にサーバーサイドエンジニア&エンジニアリングマネージャー
    ○ 2016年からCTO
    ● pixiv / pixivコミック / ピクシブ福岡オフィス / ImageFlux

    View full-size slide

  3. ピクシブと画像変換
    3
    ● 2010年頃: 投稿時に裏で大量のサムネイルを生成
    ● 2011年頃: mod_smalllight
    ● 2014年: go-thumber
    ○ 特定のjpegだけを高速に変換するプロキシサーバー
    ● 2016年: ImageFlux
    ○ go-thumberをベースに、jpeg以外にも対応
    ○ 社内ではpximgと呼ばれている

    View full-size slide

  4. 4
    ImageFluxの管理画面の
    「パスパラメータ」設定
    /small/bridge.jpg にアクセス

    /c!/w=100/bridge.jpg と同等
    これと同じものは
    pximgには無いので…
    https://console.imageflux.jp/docs/image/origin-settings

    View full-size slide

  5. 6
    「pixivではImageFlux導入前は
    サムネイルの種類が15種類だったが、
    ImageFluxを作ったら70種類になった」
    ImageFlux meetup #3

    View full-size slide

  6. 7
    「pixivではImageFlux導入前は
    サムネイルの種類が15種類だったが、
    ImageFluxを作ったら70種類になった」
    ImageFlux meetup #3
    便利になると
    サムネイルが増える!

    View full-size slide

  7. 8
    スマホ版pixivトップページ
    (の一部)
    ここに見えてるだけで
    画像の種類が6個

    View full-size slide

  8. 9
    スマホ版pixivトップページ
    (の一部)
    ここに見えてるだけで
    画像の種類が6個
    実はここだけで9個

    View full-size slide

  9. # サイズ・画質変換のみ
    rewrite ^/c/100x100/(.+)$ /w=100,h=100,q=99,a=0,u=0/$1 break;
    # 上部を切り抜き
    rewrite ^/c/960x504_80_a2_g2/(.+)$ /w=960,h=504,q=80,a=2,u=0,g=2/$1 break;
    # WebP
    rewrite ^/c/960x504_10_a2_g2_webp/(.+)$ /w=960,h=504,q=10,a=2,u=0,g=2,↵
    f=webp,webp:sns_strength=25,webp:filter_sharpness=6,webp:filter_strength=10/$1 break;
    変換の例
    10

    View full-size slide

  10. # サイズ・画質変換のみ
    rewrite ^/c/100x100/(.+)$ /w=100,h=100,q=99,a=0,u=0/$1 break;
    # 上部を切り抜き
    rewrite ^/c/960x504_80_a2_g2/(.+)$ /w=960,h=504,q=80,a=2,u=0,g=2/$1 break;
    # WebP
    rewrite ^/c/960x504_10_a2_g2_webp/(.+)$ /w=960,h=504,q=10,a=2,u=0,g=2,↵
    f=webp,webp:sns_strength=25,webp:filter_sharpness=6,webp:filter_strength=10/$1 break;
    変換の例
    11
    画質は
    99,80,70,60,30,10
    などを使い分け
    画質は
    99,80,70,60,30,10
    などを使い分け
    画質は
    99,80,70,60,30,10
    などを使い分け

    View full-size slide

  11. # サイズ・画質変換のみ
    rewrite ^/c/100x100/(.+)$ /w=100,h=100,q=99,a=0,u=0/$1 break;
    # 上部を切り抜き
    rewrite ^/c/960x504_80_a2_g2/(.+)$ /w=960,h=504,q=80,a=2,u=0,g=2/$1 break;
    # WebP
    rewrite ^/c/960x504_10_a2_g2_webp/(.+)$ /w=960,h=504,q=10,a=2,u=0,g=2,↵
    f=webp,webp:sns_strength=25,webp:filter_sharpness=6,webp:filter_strength=10/$1 break;
    変換の例
    12
    切り抜きは
    上部、中央、
    または任意座標で

    View full-size slide

  12. # サイズ・画質変換のみ
    rewrite ^/c/100x100/(.+)$ /w=100,h=100,q=99,a=0,u=0/$1 break;
    # 上部を切り抜き
    rewrite ^/c/960x504_80_a2_g2/(.+)$ /w=960,h=504,q=80,a=2,u=0,g=2/$1 break;
    # WebP
    rewrite ^/c/960x504_10_a2_g2_webp/(.+)$ /w=960,h=504,q=10,a=2,u=0,g=2,↵
    f=webp,webp:sns_strength=25,webp:filter_sharpness=6,webp:filter_strength=10/$1 break;
    変換の例
    13
    WebPのイラスト画像用
    チューニング

    View full-size slide

  13. ところで
    14

    View full-size slide

  14. 15
    ピクシブのサービス(何個わかるかな?)

    View full-size slide

  15. 16
    ImageFlux (pximg) を使ってるのは

    View full-size slide

  16. 社内での利用シーン
    第1位
    17

    View full-size slide

  17. リサイズ・WebP
    18
    ウェブパフォーマンス
    計測ツールLighthouseで
    最も頻繁に指摘される
    改善ポイント

    View full-size slide

  18. 例:pixivコミック
    19
    ● 数年前は…
    ○ 管理画面でアップされた画像をそのまま出していた
    ○ 100kB〜1MBの画像が大量に!
    ● スマホシフトを期にサイト高速化に取り組み、
    pximg化
    ○ 現在は大抵のサムネイルは10kB程度
    ○ グレースケールのページ画像も非常に恩恵が大きい

    View full-size slide

  19. 「画像が大きすぎるので
    再アップロードしてください」と
    何度も言わなくて良くなった
    20

    View full-size slide

  20. 社内での利用シーン
    第2位
    21

    View full-size slide

  21. 例:VRoid Hub
    23
    ● 背景画像に2枚の画像を重ねるリッチな
    og:imageを作りたかった
    ● ImageFluxに画像を2枚オーバーレイできる機能を追加

    View full-size slide

  22. 24
    ドキュメントには
    無いですが
    `l`パラメータは
    複数つけられます

    View full-size slide

  23. 社内での利用シーン
    第3位
    25

    View full-size slide

  24. 切り抜き
    26

    View full-size slide

  25. 例:pixivision
    27
    ● 投稿画面に切り抜き用のUIを作成
    ○ 座標をDBに保存
    ● 同様の要件が社内でちらほら聞こえてくるようになった

    View full-size slide

  26. 今日一番伝えたいこと
    29

    View full-size slide

  27. 「開発サイクルを促進する」を
    最も実感しているのは
    ピクシブ自身だと思います
    31

    View full-size slide