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ではいかにして超えてきたか / Imag...
Search
ImageFlux
August 30, 2019
Technology
1
3.2k
画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか / ImageFlux meetup #4 (5)
画像処理サービスを作る際の落とし穴をImageFluxではいかにして超えてきたか
ピクシブ株式会社
中村宇作
ImageFlux meetup #4
- 2019-08-30
ImageFlux
August 30, 2019
Tweet
Share
More Decks by ImageFlux
See All by ImageFlux
ImageFluxについて / CAMPHOR- 2021-12-18
imageflux
0
550
Webサービスにおける画像変換の実践 / ImageFlux meetup - hands-on
imageflux
2
18k
最高の購入体験を実現するための画像ダイナミックチューニング / ImageFlux meetup - Guest session #1
imageflux
3
18k
ImageFlux Live Streamingでサービス開発に集中する / ImageFlux meetup #2 - Guest Session #3
imageflux
0
5.6k
ImageFlux Live Streamingについて
imageflux
0
31k
ImageFlux Updates 2018
imageflux
2
1.3k
ピクシブの大規模ライブ配信 / ImageFlux Live
imageflux
6
10k
Other Decks in Technology
See All in Technology
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
20241220_S3 tablesの使い方を検証してみた
handy
3
240
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
140
OpenShift Virtualizationのネットワーク構成を真剣に考えてみた/OpenShift Virtualization's Network Configuration
tnk4on
0
130
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
180
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
180
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
250
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
220
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
160
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
YesSQL, Process and Tooling at Scale
rocio
169
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Statistics for Hackers
jakevdp
796
220k
Agile that works and the tools we love
rasmusluckow
328
21k
Writing Fast Ruby
sferik
628
61k
Fireside Chat
paigeccino
34
3.1k
Designing for humans not robots
tammielis
250
25k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Transcript
画像処理サービスを作る際の 落とし穴を ImageFlux では いかにして越えてきたか pixiv Inc. usa 2019.8.30 ImageFlux
meetup #4
2 自己紹介 • ピクシブ株式会社 配信技術部エンジニア ◦ つまりImageFluxの中の人 • 外ではRubyという言語の処理系を作っている ◦
が、今日はRubyの話はしない usa Engineer Ruby Committer
3 • RailsDM 2019 (2019. 3. 23)というところで、「Webアプリケーションの開発運用で当たり 前に必要とされる画像変換の中身」という発表をした https://speakerdeck.com/unak/internal-of-the-image-processing-required-on-the-d eveloping-of-web-applications
• 自前で画像変換しようとしたら、落とし穴がいっぱいあるよ、という内容 • 結論は「ImageMagickは偉大」 • ……なんだけど、ImageFluxはImageMagickを使っていない 前置き
4 今回の内容 • 自前で画像変換しようとしたら、落とし穴がいっぱいある • というわけで、ImageFluxでは実際にいっぱい落とし穴を踏んできた • 具体的にどんな落とし穴を踏んだのか、をご紹介
5 落とし穴①:Exif問題 • Exif = Exchangeable image file format ◦
富士フイルムが考案、日本電子工業振興協会( JEIDA、現JEITA)で規格化 ◦ デジカメの機種ごとの差異を表現するためにメタ情報をいろいろ入れておく • GPS情報が入ってることがあって、撮影者の位置情報からプライバシーが漏れちゃうことが ある • サムネイル画像が入ってることがあって、本体の画像を加工してセンシティブ情報を消した のに、そっちにはそのまま残ってることがある
6 落とし穴①:Exif問題 • Exif情報をまるっと消しちゃえば、情報漏洩系の問題は全部解決 • ImageFluxでは、変換が行われたらExifは削除する • めでたしめでたし……?
7 落とし穴①:Exif問題 • 色空間情報(カラープロファイル) ◦ 消すと色が変わって見える!? ◦ 詳細は後述 • 回転情報(撮影時のカメラの向き)
◦ 消すと画像の向きが変わって見える!?
8 落とし穴①:Exif問題 • 色空間情報(カラープロファイル) ◦ 消すと色が変わって見える!? ◦ 詳細は後述 • 回転情報(撮影時のカメラの向き)
◦ 消すと画像の向きが変わって見える!? ◦ ImageFluxでは当初は r= 指定で各自で対処してください、というスタンス ◦ 解決策:r=auto オプションを新設して自動回転を可能に
9 落とし穴②:ICCプロファイル問題 • ICC = International Color Consotium • ICCプロファイル
= ICCが定義した形式の色空間情報 • 主要画像ファイル形式での対応状況 ◦ JPEG:Exifの中にメタデータとして入れられる ◦ PNG:専用のチャンクとして入れられる ◦ WebP:メタデータとして入れられる ※出典:https://en.wikipedia.org/wiki/Color_space
10 落とし穴②:ICCプロファイル問題 • 色空間情報なので、なくなったら色が変わって見える(ことがある) • 画像を表示するソフトウェア側の対応状況如何なので、プロファイルがあるせいでソフトウェ アによっては色が違って見えることがある ◦ 以前はブラウザごとに対応状況にばらつきがあってつらかった ◦
最近のモダンなブラウザはだいたい対応しているので、そういう前提にしてもよくなっ た感じはある
11 落とし穴②:ICCプロファイル問題 • JPEGの場合、Exifをまるっと消したら一緒に消える • GIF(ICCプロファイル非対応なフォーマット)に変換したらどうなる? ◦ GIFは256色しか使えないからそこまで問題にはならないとはいえ ……
12 落とし穴②:ICCプロファイル問題 • JPEGの場合、Exifをまるっと消したら一緒に消える • GIF(ICCプロファイル非対応なフォーマット)に変換したらどうなる? ◦ GIFは256色しか使えないからそこまで問題にはならないとはいえ …… •
解決策1:出力はsRGBと決めつけて、入力時に存在した ICCプロファイルからsRGBに色を 変換しちゃう • 解決策2:GIFについては解決策1、それ以外は ICCプロファイルを覚えておいて、変換後に 再埋め込みする
13 落とし穴②:ICCプロファイル問題 • オーバーレイ合成機能(複数の画像を重ね合わせ合成する機能) ◦ 入力画像ごとにICCプロファイルの中身が違ったらどうする?
14 落とし穴②:ICCプロファイル問題 • オーバーレイ合成機能(複数の画像を重ね合わせ合成する機能) ◦ 入力画像ごとにICCプロファイルの中身が違ったらどうする? ◦ 解決策:オーバーレイ画像側の色空間を、ベース画像側の色空間に変換する
15 落とし穴②:ICCプロファイル問題 • オーバーレイ合成機能(複数の画像を重ね合わせ合成する機能) ◦ 入力画像ごとにICCプロファイルの中身が違ったらどうする? ◦ 解決策:オーバーレイ画像側の色空間を、ベース画像側の色空間に変換する ▪ 「なんか、変換エラーになる画像があるんですけど!?」
16 落とし穴②:ICCプロファイル問題 • オーバーレイ合成機能(複数の画像を重ね合わせ合成する機能) ◦ 入力画像ごとにICCプロファイルの中身が違ったらどうする? ◦ 解決策:オーバーレイ画像側の色空間を、ベース画像側の色空間に変換する ▪ 「なんか、変換エラーになる画像があるんですけど!?」
▪ 稀に非互換なICCプロファイルの組み合わせが存在する ▪ 解決策:そういう場合は諦めて両方の画像を sRGBに変換する
17 落とし穴③:透過部背景色指定問題 • おさらい:「透過」とは? ◦ 文字通り色が透けること ◦ GIFだと「透過色」を指定できて、そのパレット番号が指定されたピクセルは透明なも のとして扱われる ◦
PNGやWebPにはアルファチャネルというものが存在し、ピクセルごとに「不透過度」 によってどの程度透けているか(というか透けていないか)を指定できる ◦ JPEGには……ない(一切透けない)
18 落とし穴③:透過部背景色指定問題 • PNG等からJPEGに変換するとき、透過をどう扱うか? ◦ ImageFluxでは背景色を指定できて、元ピクセルの透過度に応じて、ピクセルの色と 背景色を合成する ◦ ごくごく平凡な対応
19 落とし穴③:透過部背景色指定問題 • PNG等からJPEGに変換するとき、透過をどう扱うか? ◦ ImageFluxでは背景色を指定できて、元ピクセルの透過度に応じて、ピクセルの色と 背景色を合成する ◦ ごくごく平凡な対応 ◦
「なんか灰色の線が出るんですけど!?」
20 落とし穴③:透過部背景色指定問題 • ImageFluxではリサイズしてから背景色との合成をしていた • 完全透過ピクセルとそうでないピクセルとがリサイズで融合されると、それらのピクセルの 間の色・間の透過度のピクセルが生成される • 完全透過ピクセルは黒として扱っていたが、そうでない方のピクセルが黒以外(例えば白) だったら、灰色で少し透過しているピクセルが生成される
• そこに背景色(例えば白)を合成しても 少し灰色が残る
21 落とし穴③:透過部背景色指定問題 • ImageFluxではリサイズしてから背景色との合成をしていた • 完全透過ピクセルとそうでないピクセルとがリサイズで融合されると、それらのピクセルの 間の色・間の透過度のピクセルが生成される • 完全透過ピクセルは黒として扱っていたが、そうでない方のピクセルが黒以外(例えば白) だったら、灰色で少し透過しているピクセルが生成される
• そこに背景色(例えば白)を合成しても少し灰色が残る • 解決策:出力フォーマットがJPEGなら、リサイズ前に背景色と合成しておく
22 落とし穴④:クロップ時内部変換問題 • ImageFluxにおけるクロップとは? ◦ 入力画像を指定されたサイズを満たすように拡大縮小し、縦横いずれかがはみ出す 場合は、はみ出した部分を切り捨てる機能 ◦ 具体的には a=2
のこと
23 落とし穴④:クロップ時内部変換問題 • ImageFluxにおけるクロップとは? ◦ 入力画像を指定されたサイズを満たすように拡大縮小し、縦横いずれかがはみ出す 場合は、はみ出した部分を切り捨てる機能 ◦ 具体的には a=2
のこと • 「なんかメモリ食いつぶしちゃうんですけど!?」
24 落とし穴④:クロップ時内部変換問題 • 入力画像のサイズ: 10000px × 1px • 出力指定サイズ:300px ×
300px
25 落とし穴④:クロップ時内部変換問題 • 入力画像のサイズ: 10000px × 1px • 出力指定サイズ:300px ×
300px • 元画像を指定されたサイズを満たすように拡大縮小
26 落とし穴④:クロップ時内部変換問題 • 入力画像のサイズ: 10000px × 1px • 出力指定サイズ:300px ×
300px • 横は既に満たしているので後回し • 縦は入力画像の 1px で 300px を満たさないといけないので、300倍の拡大
27 落とし穴④:クロップ時内部変換問題 • 入力画像のサイズ: 10000px × 1px • 出力指定サイズ:300px ×
300px • 横は既に満たしているので後回し • 縦は入力画像の 1px で 300px を満たさないといけないので、300倍の拡大 • よって、横は 10000px の300倍になるので、3000000px • 3000000px × 300px の画像を内部的に生成してから、これを 300px × 300px に切り抜く ことになる
28 落とし穴④:クロップ時内部変換問題 • 解決策:切り抜いた結果の画像が、元の画像のどの部分に相当するかを事前に算出し、そ の部分だけを抜き出してから拡大縮小する ◦ 倍率によっては、必ずしも元画像のピクセル境界に一致するわけではないので、 ちょっと大きめに切り抜くとかの細かい工夫は必要
29 その他の落とし穴 • オーバーレイ合成機能時に、入力画像の内部形式が全然違う場合どうする? ◦ YCbCrとRGBとか、RGBとGrayscaleとか • パレット形式の画像の拡大縮小時にピクセル融合が発生した場合、元画像になかった色が 発生する ◦
パレット形式をやめる? ◦ 元画像に存在した色しか使わない? ◦ パレットを作り直して他の色を変えちゃう?
30 その他の落とし穴 • 他にも無限に落とし穴が存在する ◦ しかも、 必ずしも正解があるとは限らない ◦ 全ては要件次第 •
性能の問題も考慮する必要がある ◦ 速度 ◦ メモリ消費量 ◦ 出力画像品質
31 まとめ • ImageFluxではいろいろ頑張って画像変換をやっています! • 使っていて何か問題に気づいたらお気軽にお問い合わせください • まだ使ってない方は https://www.sakura.ad.jp/services/imageflux/
ご清聴ありがとうございました 32