Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ピクシブ社内のImageFlux利用事例紹介
Search
Atsushi Takayama
August 30, 2019
Technology
1
2.5k
ピクシブ社内のImageFlux利用事例紹介
ImageFlux meetup #4で発表した内容です。
Atsushi Takayama
August 30, 2019
Tweet
Share
More Decks by Atsushi Takayama
See All by Atsushi Takayama
最高の開発者体験の追求が開発生産性を改善し続ける文化を生み出した話
edvakf
3
950
NeurIPS 2021 論文読み会: How Modular should Neural Module Networks Be for Systematic Generalization?
edvakf
0
110
8年物のJavaのシステムをKotlinに変えていく選択に至るまで
edvakf
2
950
学びの文化を育む社内読書会のススメ
edvakf
0
190
フルCDNアーキテクチャでサービス設計した話
edvakf
5
3.6k
Goでバイナリを読む+α
edvakf
1
830
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
2.3k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
680
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
330
Other Decks in Technology
See All in Technology
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Debugging Ruby Performance
tmm1
71
11k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
The Language of Interfaces
destraynor
151
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Designing the Hi-DPI Web
ddemaree
276
34k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Clear Off the Table
cherdarchuk
89
320k
What's new in Ruby 2.0
geeforr
338
31k
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