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
1k
学びの文化を育む社内読書会のススメ
edvakf
0
250
フルCDNアーキテクチャでサービス設計した話
edvakf
5
3.9k
Goでバイナリを読む+α
edvakf
1
930
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
2.5k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
820
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
390
Other Decks in Technology
See All in Technology
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
750
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1.4k
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
160
生成AIによるCloud Native基盤構築の可能性と実践的ガードレールの敷設について
nwiizo
7
980
AWSLambdaMCPServerを使ってツールとMCPサーバを分離する
tkikuchi
1
3k
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
410
Would you THINK such a demonstration interesting ?
shumpei3
1
220
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
240
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
750
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
1
270
ブラウザのレガシー・独自機能を愛でる-Firefoxの脆弱性4選- / Browser Crash Club #1
masatokinugawa
1
490
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
99
5.5k
Code Review Best Practice
trishagee
67
18k
Building Applications with DynamoDB
mza
94
6.3k
We Have a Design System, Now What?
morganepeng
52
7.5k
Facilitating Awesome Meetings
lara
54
6.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Building an army of robots
kneath
304
45k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
530
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
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