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
画像が劣化する要因と画質改善への取り組み
Search
Masato Ikeda
June 26, 2024
Programming
0
320
画像が劣化する要因と画質改善への取り組み
一般論として画像の変換処理により画質が劣化する要因と、Wantedlyの事例で画質が低下していた原因を紹介します。
Masato Ikeda
June 26, 2024
Tweet
Share
More Decks by Masato Ikeda
See All by Masato Ikeda
1→10の事業フェーズのプロダクト開発で意識するようになったこと
ikedams
0
93
Wantedlyのマイクロサービスに感じたメリット・デメリット
ikedams
0
130
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
540
Deep Dive into ~/.claude/projects
hiragram
9
1.6k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
470
GoのGenericsによるslice操作との付き合い方
syumai
3
690
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
540
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
390
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
500
Select API from Kotlin Coroutine
jmatsu
1
190
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
A better future with KSS
kneath
239
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Music & Morning Musume
bryan
46
6.6k
Rails Girls Zürich Keynote
gr2m
94
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A designer walks into a library…
pauljervisheath
207
24k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Docker and Python
trallard
44
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
画像が劣化する要因と 画質改善への取り組み Wantedly Tech Night #2 Jun. 26 2024 -
Masato Ikeda © 2024 Wantedly, Inc.
池田 雅人 (Masato Ikeda) Backend Chapter Quality Control Squad 2024年4月
ウォンテッドリー株式会社入社 自己紹介 © 2024 Wantedly, Inc.
はじめに © 2024 Wantedly, Inc.
はじめに © 2024 Wantedly, Inc. SNSやWebサイトを利用していて こんなことを思ったことはありません か?
はじめに © 2024 Wantedly, Inc. before after
アップロードした画像の 画質が悪い! はじめに © 2024 Wantedly, Inc.
Wantedlyでもアップロードした画質が 悪いというご意見を頂くことがありまし た。 はじめに © 2024 Wantedly, Inc.
はじめに © 2024 Wantedly, Inc. そこで調査した内容や画質が劣化して いた原因などを紹介します。
話すこと © 2024 Wantedly, Inc. はじめに 1. 画像が劣化する一般的な要因 2. Wantedlyでの画質劣化の事例
話さないこと • 元々画質が劣化した画像を改善する方法 ◦ 例:AI技術を使った画像のアップスケーリングなど • 画像変換のアルゴリズムの詳細 • ベクター画像(PDFやSVG)について 等
© 2024 Wantedly, Inc. はじめに
画像が劣化する一般的な要因 © 2024 Wantedly, Inc.
そもそもなぜ画質が劣化するのか?🤔 画像が劣化する一般的な要因 © 2024 Wantedly, Inc.
画質が低下する原因は 大きく分けて2つ 画像が劣化する一般的な要因 © 2024 Wantedly, Inc.
①画像の圧縮 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. 2つの原因
画像の圧縮を行うことで、人間の目では判別しにくい部分の情報を減らして、ファイル サイズを抑えている。 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. ①画像の圧縮 4.2MB 309KB
画像の圧縮の目的 画像が劣化する一般的な要因 1. ストレージ容量の節約 2. 転送速度・表示速度向上 3. コスト削減 © 2024
Wantedly, Inc. ①画像の圧縮
具体的に画質に影響する要素は何か? 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. ①画像の圧縮
1. 画像圧縮形式 2. 画像フォーマット 3. 圧縮率 等 画像が劣化する一般的な要因 © 2024
Wantedly, Inc. ①画像の圧縮 画質に影響する要素
• 非可逆圧縮 (Lossy Compression) ◦ Jpegなどのフォーマットは画質を犠牲にしてファイルサイズを小さくする圧縮方式を使 用する。 • 可逆圧縮 (Lossless
Compression) ◦ Pngなどのフォーマットは可逆圧縮を使用し、基本的には画質が劣化することはない。 ただし、リサイズや保存品質の設定により、画質が劣化する場合もある。 1. 画像圧縮形式 © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ①画像の圧縮
• Jpeg ◦ 非可逆圧縮の画像フォーマット。 ◦ 圧縮率が高いが画質は比較的劣化しやすい。 • Png ◦ 可逆圧縮の画像フォーマット。
◦ 高画質だが、データ容量が大きい。 • WebP ◦ 2010年にGoogleが開発した画像フォーマット。非可逆圧縮・可逆圧縮の両方に対応。 ◦ JpegやPngに比べて圧縮率が高く、画質も劣化しにくい。 ◦ 2024年現在では主要ブラウザの対応はほとんど完了しているが、画像編集ソフトなどのソフトウェアでは対 応していないものもある。 他、GifやAVIF等 2. 画像フォーマット © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ①画像の圧縮
• データの圧縮前のサイズに対する圧縮後のサイズの比率を示す指標のこと。 • 圧縮率は、品質(Quality)という値を変更することにより間接的に設定できる。 3. 圧縮率 © 2024 Wantedly, Inc.
画像が劣化する一般的な要因 ①画像の圧縮
画像が劣化する一般的な要因 © 2024 Wantedly, Inc. ①画像の圧縮 https://qiita.com/spc_ehara/items/7e3404b2e67359700c69 画像品質と圧縮率はトレードオフの関係にあるため、画像品質が高いほど圧縮率は低 くなり、画像品質が低いほど圧縮率は高くなる。
②画像の操作 © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 2つの要因
© 2024 Wantedly, Inc. 1. リサイズ 2. 回転 3. カラープロファイルの変更
4. フィルタリングおよび補間アルゴリズム 等 画像の操作が画質に与える要因 画像が劣化する一般的な要因 ②画像の操作
• 画像を拡大または縮小すると、ピクセル情報が再計算されるため、画質が劣化する。特に、拡 大時にはピクセルが引き伸ばされるためぼやけることが多い。 1. リサイズ © 2024 Wantedly, Inc. 画像が劣化する一般的な要因
②画像の操作
2. 回転 © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ②画像の操作 • 画像を回転させる際、Jpegなどの非可逆圧縮形式の場合は再圧縮されてしまったり、ピクセ
ル位置がずれることによる補間の影響等により画質が劣化する場合がある。
• 異なるカラープロファイル間で画像を変換すると、色が変わったり、詳細が失われたりすること がある。 3. カラープロファイルの変換 © 2024 Wantedly, Inc. (左)「sRGB
IEC61966-2.1」埋め込みプロファイル (右)「Adobe RGB (1998)」埋め込みプロファイル https://www.o-design2011.com/blog/3017/ 画像が劣化する一般的な要因 ②画像の操作
• 画像のリサイズや回転時に使用されるフィルタや補間アルゴリズムの選択により、画質が影 響を受ける。 4. フィルタリングおよび補間アルゴリズム © 2024 Wantedly, Inc. 画像が劣化する一般的な要因
②画像の操作 Nearest-Neighbor法 Bi-Linear法
• 画像の拡大・縮小は各ピクセルの間隔を広げたり狭めたりすることにより行われる。 補間アルゴリズムとは © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 補間アルゴリズム https://qiita.com/yoya/items/f167b2598fec98679422
© 2024 Wantedly, Inc. • 画像の拡大時は、この白い隙間に色をどのように埋めるかによってリサイズの結果が変わる https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
© 2024 Wantedly, Inc. • 画像の縮小時は、周囲のピクセルをどのように混ぜてこの白い隙間を埋めるかによってリサ イズの結果が変わる https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
• 周りのピクセルから推測して、もともと無かったピクセルを挿入する処理を補間といい、どのよ うに補間するかの手法を補間アルゴリズムという。 © 2024 Wantedly, Inc. https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
• 補間アルゴリズムの例:Nearest-Neighbor法 © 2024 Wantedly, Inc. https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
1. 画像の圧縮 a. 画像圧縮形式 b. 画像フォーマット c. 圧縮率 2. 画像の操作
a. リサイズ b. 回転 c. カラープロファイル d. フィルタリングおよび補間メソッド © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 まとめ
Wantedlyでの画質劣化の事例 © 2024 Wantedly, Inc.
• 設定している値が適切か • 不要な画像の操作がないか 前章で説明した要因が原因かを、以下の観点で調査した。 Wantedlyでの画質劣化の事例 © 2024 Wantedly, Inc.
画質改善への取り組み
1. 画像の圧縮 a. 画像圧縮形式 b. 画像フォーマット c. 圧縮率 2. 画像の操作
a. リサイズ b. 回転 c. カラープロファイル d. フィルタリングおよび補間メソッド © 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 画質改善への取り組み
1. 画像の圧縮 a. 画像圧縮形式 b. 画像フォーマット c. 圧縮率 2. 画像の操作
a. リサイズ b. 回転 c. カラープロファイル d. フィルタリングおよび補間メソッド © 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 画質改善への取り組み → 非可逆圧縮方式 → WebP → Quality: 75と低めの設定 → 2回のリサイズを実行。1回のみが理想だが許容 → 不要な自動回転処理あり → 変更なし → Bicubic法(ライブラリのデフォルト)。変更してもほぼ画質は変化せず
© 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 Wantedlyの画像配信の流れ
© 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 Wantedlyの画像配信の流れ - アップロード
© 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 Wantedlyの画像配信の流れ - ダウンロード
• Quality値(圧縮率)をデフォルト値の低い値( 75)のまま設定していた ◦ 数年前に画像の配信基盤を刷新した際には、パフォーマンスに問題を抱えていたため、 パフォーマンス>画像品質の設計となっていた。 • 2回のリサイズに加えて、自動回転処理により画質が劣化していた ◦ 自動回転処理は、画像がメタデータとして持つ回転情報
(Exif Orientation)を補正する ために行われていた。 画質改善への取り組み 問題となっていた点 © 2024 Wantedly, Inc. 問題点
• Qualityの値を変更(75→90) • 必要がある場合のみ、自動回転処理を行うように修正 画質改善への取り組み 対応 © 2024 Wantedly, Inc.
画質の劣化防止に向けて行ったこと
画質改善への取り組み 結果(before) © 2024 Wantedly, Inc. 対応結果
画質改善への取り組み 結果(after) © 2024 Wantedly, Inc. 対応結果
多少良くなったものの まだ改善の余地あり © 2024 Wantedly, Inc. 画質改善への取り組み 対応結果
これから © 2024 Wantedly, Inc.
今後やっていきたいこと • SLI/SLOの設定・モニタリング • 更新されていないライブラリの変更 • AVIFへの対応 等 これから ©
2024 Wantedly, Inc.
まとめ © 2024 Wantedly, Inc.
まとめ 画像が劣化する一般的な要因 Wantedlyでの画質劣化の事例 今後やっていきたいこと 1 2 3
ご清聴ありがとうございました 🎉🎉🎉 © 2024 Wantedly, Inc. まとめ
• Wantedlyサービスにおける画像体験の裏側 • 画像リサイズのうんちく (補間フィルタ) • Exif Orientation のうんちく •
JPG?PNG?一体何が違う?最適な拡張子選びのコツ 参考資料 © 2024 Wantedly, Inc.