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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. 4
   ImageFluxの管理画面の
   「パスパラメータ」設定
   /small/bridge.jpg にアクセス
   ↓
   /c!/w=100/bridge.jpg と同等
   これと同じものは
   pximgには無いので…
   https://console.imageflux.jp/docs/image/origin-settings
   

   View Slide

5. 5
   nginx.conf
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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;
    変換の例
    10
    

    View 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;
    変換の例
    11
    画質は
    99,80,70,60,30,10
    などを使い分け
    画質は
    99,80,70,60,30,10
    などを使い分け
    画質は
    99,80,70,60,30,10
    などを使い分け
    

    View 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;
    変換の例
    12
    切り抜きは
    上部、中央、
    または任意座標で
    

    View Slide

13. # サイズ・画質変換のみ
    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 Slide

14. ところで
    14
    

    View Slide

15. 15
    ピクシブのサービス（何個わかるかな？）
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. og:image
    22
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. 切り抜き
    26
    

    View Slide

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

    View Slide

28. View Slide

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

    View Slide

30. View Slide

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

    View Slide