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
2
2.9k
ピクシブ社内のImageFlux利用事例紹介
ImageFlux meetup #4で発表した内容です。
Atsushi Takayama
August 30, 2019
Tweet
Share
More Decks by Atsushi Takayama
See All by Atsushi Takayama
最高の開発者体験の追求が開発生産性を改善し続ける文化を生み出した話
edvakf
3
1.3k
NeurIPS 2021 論文読み会: How Modular should Neural Module Networks Be for Systematic Generalization?
edvakf
0
170
8年物のJavaのシステムをKotlinに変えていく選択に至るまで
edvakf
2
1.1k
学びの文化を育む社内読書会のススメ
edvakf
0
280
フルCDNアーキテクチャでサービス設計した話
edvakf
5
4k
Goでバイナリを読む+α
edvakf
1
950
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
2.6k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
870
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
410
Other Decks in Technology
See All in Technology
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
1.8k
ガチな登山用デバイスからこんにちは
halka
1
200
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
250
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
430
Language Update: Java
skrb
2
190
2025年になってもまだMySQLが好き
yoku0825
6
2.9k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
2
540
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1k
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.2k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
0
140
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Code Review Best Practice
trishagee
70
19k
Typedesign – Prime Four
hannesfritz
42
2.8k
Side Projects
sachag
455
43k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
32
14k
Unsuck your backbone
ammeep
671
58k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Embracing the Ebb and Flow
colly
87
4.8k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
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