Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ピクシブ社内のImageFlux利用事例紹介
Atsushi Takayama
August 30, 2019
Technology
1
1.8k
ピクシブ社内のImageFlux利用事例紹介
ImageFlux meetup #4で発表した内容です。
Atsushi Takayama
August 30, 2019
Tweet
Share
More Decks by Atsushi Takayama
See All by Atsushi Takayama
NeurIPS 2021 論文読み会: How Modular should Neural Module Networks Be for Systematic Generalization?
edvakf
0
16
8年物のJavaのシステムをKotlinに変えていく選択に至るまで
edvakf
2
620
学びの文化を育む社内読書会のススメ
edvakf
0
100
フルCDNアーキテクチャでサービス設計した話
edvakf
5
2.5k
Goでバイナリを読む+α
edvakf
1
650
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
1.9k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
430
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
250
脆弱性報奨金制度との付き合い方
edvakf
5
4.1k
Other Decks in Technology
See All in Technology
srenext2022-skaru
mixi_engineers
0
250
CADDi HCMC Technology Center
caddi_eng
0
190
Babylon.js v5 新機能の紹介
limes2018
0
320
インフラエンジニアBooks 30分でわかる「Dockerコンテナ開発・環境構築の基本」
cyberblack28
9
6.1k
プロダクトグロースと技術のベースアップを両立させるRettyのアプリ開発スタイル / Achieve Product Growth and Tech Update
imaizume
1
250
Who owns the Service Level?
chaspy
5
660
jaws-ug-asa-datasync-20220510
hiashisan
0
450
スタートアップ入社4日目までに考えたAWSのセキュリティ向上/ Startup AWS Security
shonansurvivors
3
2.4k
How We Foster Reliability in Diversity
nari_ex
PRO
8
1.9k
AWS CloudShellという推しサービスについて / lt-20220502-jawsug-cli
becominn
0
620
tfcon-2022-cpp
cpp
5
4.4k
Power BI ”を” 可視化しよう!
hanaseleb
0
140
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Typedesign – Prime Four
hannesfritz
33
1.3k
Fireside Chat
paigeccino
11
1.2k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
Ruby is Unlike a Banana
tanoku
91
9.2k
Scaling GitHub
holman
451
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
Building Your Own Lightsaber
phodgson
94
4.6k
Transcript
ピクシブ社内の ImageFlux利用事例紹介 ImageFlux meetup #4 pixiv Inc. Atsushi Takayama 2019.8.30
2 自己紹介 • 高山温 / @edvakf • ピクシブ株式会社 CTO ◦
2012年入社 ▪ 主にサーバーサイドエンジニア&エンジニアリングマネージャー ◦ 2016年からCTO • pixiv / pixivコミック / ピクシブ福岡オフィス / ImageFlux
ピクシブと画像変換 3 • 2010年頃: 投稿時に裏で大量のサムネイルを生成 • 2011年頃: mod_smalllight • 2014年:
go-thumber ◦ 特定のjpegだけを高速に変換するプロキシサーバー • 2016年: ImageFlux ◦ go-thumberをベースに、jpeg以外にも対応 ◦ 社内ではpximgと呼ばれている
4 ImageFluxの管理画面の 「パスパラメータ」設定 /small/bridge.jpg にアクセス ↓ /c!/w=100/bridge.jpg と同等 これと同じものは pximgには無いので…
https://console.imageflux.jp/docs/image/origin-settings
5 nginx.conf
6 「pixivではImageFlux導入前は サムネイルの種類が15種類だったが、 ImageFluxを作ったら70種類になった」 ImageFlux meetup #3
7 「pixivではImageFlux導入前は サムネイルの種類が15種類だったが、 ImageFluxを作ったら70種類になった」 ImageFlux meetup #3 便利になると サムネイルが増える!
8 スマホ版pixivトップページ (の一部) ここに見えてるだけで 画像の種類が6個
9 スマホ版pixivトップページ (の一部) ここに見えてるだけで 画像の種類が6個 実はここだけで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
# サイズ・画質変換のみ 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 などを使い分け
# サイズ・画質変換のみ 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 切り抜きは 上部、中央、 または任意座標で
# サイズ・画質変換のみ 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
15 ピクシブのサービス(何個わかるかな?)
16 ImageFlux (pximg) を使ってるのは
社内での利用シーン 第1位 17
リサイズ・WebP 18 ウェブパフォーマンス 計測ツールLighthouseで 最も頻繁に指摘される 改善ポイント
例:pixivコミック 19 • 数年前は… ◦ 管理画面でアップされた画像をそのまま出していた ◦ 100kB〜1MBの画像が大量に! • スマホシフトを期にサイト高速化に取り組み、
pximg化 ◦ 現在は大抵のサムネイルは10kB程度 ◦ グレースケールのページ画像も非常に恩恵が大きい
「画像が大きすぎるので 再アップロードしてください」と 何度も言わなくて良くなった 20
社内での利用シーン 第2位 21
og:image 22
例:VRoid Hub 23 • 背景画像に2枚の画像を重ねるリッチな og:imageを作りたかった • ImageFluxに画像を2枚オーバーレイできる機能を追加
24 ドキュメントには 無いですが `l`パラメータは 複数つけられます
社内での利用シーン 第3位 25
切り抜き 26
例:pixivision 27 • 投稿画面に切り抜き用のUIを作成 ◦ 座標をDBに保存 • 同様の要件が社内でちらほら聞こえてくるようになった
28
今日一番伝えたいこと 29
30
「開発サイクルを促進する」を 最も実感しているのは ピクシブ自身だと思います 31