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

Transcript

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

2. 2 自己紹介 • 高山温 / @edvakf • ピクシブ株式会社 CTO ◦

   2012年入社 ▪ 主にサーバーサイドエンジニア&エンジニアリングマネージャー ◦ 2016年からCTO • pixiv / pixivコミック / ピクシブ福岡オフィス / ImageFlux

3. ピクシブと画像変換 3 • 2010年頃: 投稿時に裏で大量のサムネイルを生成 • 2011年頃: mod_smalllight • 2014年:

   go-thumber ◦ 特定のjpegだけを高速に変換するプロキシサーバー • 2016年: ImageFlux ◦ go-thumberをベースに、jpeg以外にも対応 ◦ 社内ではpximgと呼ばれている

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

   https://console.imageflux.jp/docs/image/origin-settings

5. 5 nginx.conf

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

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

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

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

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

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 などを使い分け

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 切り抜きは 上部、中央、 または任意座標で

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のイラスト画像用 チューニング

14. ところで 14

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

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

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

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

19. 例：pixivコミック 19 • 数年前は… ◦ 管理画面でアップされた画像をそのまま出していた ◦ 100kB〜1MBの画像が大量に！ • スマホシフトを期にサイト高速化に取り組み、

    pximg化 ◦ 現在は大抵のサムネイルは10kB程度 ◦ グレースケールのページ画像も非常に恩恵が大きい

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

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

22. og:image 22

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

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

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

26. 切り抜き 26

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

28. 28

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

30. 30

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