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.8k
ピクシブ社内のImageFlux利用事例紹介
ImageFlux meetup #4で発表した内容です。
Atsushi Takayama
August 30, 2019
Tweet
Share
More Decks by Atsushi Takayama
See All by Atsushi Takayama
最高の開発者体験の追求が開発生産性を改善し続ける文化を生み出した話
edvakf
3
1.2k
NeurIPS 2021 論文読み会: How Modular should Neural Module Networks Be for Systematic Generalization?
edvakf
0
160
8年物のJavaのシステムをKotlinに変えていく選択に至るまで
edvakf
2
1.1k
学びの文化を育む社内読書会のススメ
edvakf
0
270
フルCDNアーキテクチャでサービス設計した話
edvakf
5
3.9k
Goでバイナリを読む+α
edvakf
1
940
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
2.5k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
830
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
400
Other Decks in Technology
See All in Technology
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
0
500
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
710
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
GoogleのAI Agent
shukob
0
140
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.2k
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
220
NW運用の工夫と発明
recuraki
1
800
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
やさしいClaude Code入門
minorun365
PRO
32
25k
libsyncrpcってなに?
uhyo
0
160
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
0
470
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
830
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Why Our Code Smells
bkeepers
PRO
336
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Faster Mobile Websites
deanohume
307
31k
Music & Morning Musume
bryan
47
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fireside Chat
paigeccino
37
3.5k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Agile that works and the tools we love
rasmusluckow
329
21k
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