画像が劣化する要因と画質改善への取り組み

一般論として画像の変換処理により画質が劣化する要因と、Wantedlyの事例で画質が低下していた原因を紹介します。

Transcript

1. 画像が劣化する要因と 画質改善への取り組み Wantedly Tech Night #2 Jun. 26 2024 - Masato Ikeda © 2024 Wantedly, Inc.
2. 池田 雅人 (Masato Ikeda) Backend Chapter Quality Control Squad 2024年4月 ウォンテッドリー株式会社入社 自己紹介 © 2024 Wantedly, Inc.
3. はじめに © 2024 Wantedly, Inc.
4. はじめに © 2024 Wantedly, Inc. SNSやWebサイトを利用していて こんなことを思ったことはありません か？
5. はじめに © 2024 Wantedly, Inc. before after
6. アップロードした画像の 画質が悪い！ はじめに © 2024 Wantedly, Inc.
7. Wantedlyでもアップロードした画質が 悪いというご意見を頂くことがありまし た。 はじめに © 2024 Wantedly, Inc.
8. はじめに © 2024 Wantedly, Inc. そこで調査した内容や画質が劣化して いた原因などを紹介します。
9. 話すこと © 2024 Wantedly, Inc. はじめに 1. 画像が劣化する一般的な要因 2. Wantedlyでの画質劣化の事例
10. 話さないこと • 元々画質が劣化した画像を改善する方法 ◦ 例：AI技術を使った画像のアップスケーリングなど • 画像変換のアルゴリズムの詳細 • ベクター画像（PDFやSVG）について 等 © 2024 Wantedly, Inc. はじめに
11. 画像が劣化する一般的な要因 © 2024 Wantedly, Inc.
12. そもそもなぜ画質が劣化するのか？🤔 画像が劣化する一般的な要因 © 2024 Wantedly, Inc.
13. 画質が低下する原因は 大きく分けて2つ 画像が劣化する一般的な要因 © 2024 Wantedly, Inc.
14. ①画像の圧縮 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. 2つの原因
15. 画像の圧縮を行うことで、人間の目では判別しにくい部分の情報を減らして、ファイル サイズを抑えている。 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. ①画像の圧縮 4.2MB 309KB
16. 画像の圧縮の目的 画像が劣化する一般的な要因 1. ストレージ容量の節約 2. 転送速度・表示速度向上 3. コスト削減 © 2024 Wantedly, Inc. ①画像の圧縮
17. 具体的に画質に影響する要素は何か？ 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. ①画像の圧縮
18. 1. 画像圧縮形式 2. 画像フォーマット 3. 圧縮率 等 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. ①画像の圧縮 画質に影響する要素
19. • 非可逆圧縮 (Lossy Compression) ◦ Jpegなどのフォーマットは画質を犠牲にしてファイルサイズを小さくする圧縮方式を使 用する。 • 可逆圧縮 (Lossless Compression) ◦ Pngなどのフォーマットは可逆圧縮を使用し、基本的には画質が劣化することはない。 ただし、リサイズや保存品質の設定により、画質が劣化する場合もある。 1. 画像圧縮形式 © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ①画像の圧縮
20. • Jpeg ◦ 非可逆圧縮の画像フォーマット。 ◦ 圧縮率が高いが画質は比較的劣化しやすい。 • Png ◦ 可逆圧縮の画像フォーマット。 ◦ 高画質だが、データ容量が大きい。 • WebP ◦ 2010年にGoogleが開発した画像フォーマット。非可逆圧縮・可逆圧縮の両方に対応。 ◦ JpegやPngに比べて圧縮率が高く、画質も劣化しにくい。 ◦ 2024年現在では主要ブラウザの対応はほとんど完了しているが、画像編集ソフトなどのソフトウェアでは対 応していないものもある。 他、GifやAVIF等 2. 画像フォーマット © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ①画像の圧縮
21. • データの圧縮前のサイズに対する圧縮後のサイズの比率を示す指標のこと。 • 圧縮率は、品質(Quality)という値を変更することにより間接的に設定できる。 3. 圧縮率 © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ①画像の圧縮
22. 画像が劣化する一般的な要因 © 2024 Wantedly, Inc. ①画像の圧縮 https://qiita.com/spc_ehara/items/7e3404b2e67359700c69 画像品質と圧縮率はトレードオフの関係にあるため、画像品質が高いほど圧縮率は低 くなり、画像品質が低いほど圧縮率は高くなる。
23. ②画像の操作 © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 2つの要因
24. © 2024 Wantedly, Inc. 1. リサイズ 2. 回転 3. カラープロファイルの変更 4. フィルタリングおよび補間アルゴリズム 等 画像の操作が画質に与える要因 画像が劣化する一般的な要因 ②画像の操作
25. • 画像を拡大または縮小すると、ピクセル情報が再計算されるため、画質が劣化する。特に、拡 大時にはピクセルが引き伸ばされるためぼやけることが多い。 1. リサイズ © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ②画像の操作
26. 2. 回転 © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ②画像の操作 • 画像を回転させる際、Jpegなどの非可逆圧縮形式の場合は再圧縮されてしまったり、ピクセ ル位置がずれることによる補間の影響等により画質が劣化する場合がある。
27. • 異なるカラープロファイル間で画像を変換すると、色が変わったり、詳細が失われたりすること がある。 3. カラープロファイルの変換 © 2024 Wantedly, Inc. （左）「sRGB IEC61966-2.1」埋め込みプロファイル （右）「Adobe RGB (1998)」埋め込みプロファイル https://www.o-design2011.com/blog/3017/ 画像が劣化する一般的な要因 ②画像の操作
28. • 画像のリサイズや回転時に使用されるフィルタや補間アルゴリズムの選択により、画質が影 響を受ける。 4. フィルタリングおよび補間アルゴリズム © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 ②画像の操作 Nearest-Neighbor法 Bi-Linear法
29. • 画像の拡大・縮小は各ピクセルの間隔を広げたり狭めたりすることにより行われる。 補間アルゴリズムとは © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 補間アルゴリズム https://qiita.com/yoya/items/f167b2598fec98679422
30. © 2024 Wantedly, Inc. • 画像の拡大時は、この白い隙間に色をどのように埋めるかによってリサイズの結果が変わる https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
31. © 2024 Wantedly, Inc. • 画像の縮小時は、周囲のピクセルをどのように混ぜてこの白い隙間を埋めるかによってリサ イズの結果が変わる https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
32. • 周りのピクセルから推測して、もともと無かったピクセルを挿入する処理を補間といい、どのよ うに補間するかの手法を補間アルゴリズムという。 © 2024 Wantedly, Inc. https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
33. • 補間アルゴリズムの例：Nearest-Neighbor法 © 2024 Wantedly, Inc. https://qiita.com/yoya/items/f167b2598fec98679422 画像が劣化する一般的な要因 補間アルゴリズム
34. 1. 画像の圧縮 a. 画像圧縮形式 b. 画像フォーマット c. 圧縮率 2. 画像の操作 a. リサイズ b. 回転 c. カラープロファイル d. フィルタリングおよび補間メソッド © 2024 Wantedly, Inc. 画像が劣化する一般的な要因 まとめ
35. Wantedlyでの画質劣化の事例 © 2024 Wantedly, Inc.
36. • 設定している値が適切か • 不要な画像の操作がないか 前章で説明した要因が原因かを、以下の観点で調査した。 Wantedlyでの画質劣化の事例 © 2024 Wantedly, Inc. 画質改善への取り組み
37. 1. 画像の圧縮 a. 画像圧縮形式 b. 画像フォーマット c. 圧縮率 2. 画像の操作 a. リサイズ b. 回転 c. カラープロファイル d. フィルタリングおよび補間メソッド © 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 画質改善への取り組み
38. 1. 画像の圧縮 a. 画像圧縮形式 b. 画像フォーマット c. 圧縮率 2. 画像の操作 a. リサイズ b. 回転 c. カラープロファイル d. フィルタリングおよび補間メソッド © 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 画質改善への取り組み →　非可逆圧縮方式 　→　WebP 　→　Quality: 75と低めの設定 　→　2回のリサイズを実行。1回のみが理想だが許容 　→　不要な自動回転処理あり 　→　変更なし →　Bicubic法（ライブラリのデフォルト）。変更してもほぼ画質は変化せず
39. © 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 Wantedlyの画像配信の流れ
40. © 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 Wantedlyの画像配信の流れ - アップロード
41. © 2024 Wantedly, Inc. Wantedlyでの画質劣化の事例 Wantedlyの画像配信の流れ - ダウンロード
42. • Quality値（圧縮率）をデフォルト値の低い値（ 75）のまま設定していた ◦ 数年前に画像の配信基盤を刷新した際には、パフォーマンスに問題を抱えていたため、 パフォーマンス＞画像品質の設計となっていた。 • 2回のリサイズに加えて、自動回転処理により画質が劣化していた ◦ 自動回転処理は、画像がメタデータとして持つ回転情報 (Exif Orientation)を補正する ために行われていた。 画質改善への取り組み 問題となっていた点 © 2024 Wantedly, Inc. 問題点
43. • Qualityの値を変更（75→90） • 必要がある場合のみ、自動回転処理を行うように修正 画質改善への取り組み 対応 © 2024 Wantedly, Inc. 画質の劣化防止に向けて行ったこと
44. 画質改善への取り組み 結果(before) © 2024 Wantedly, Inc. 対応結果
45. 画質改善への取り組み 結果(after) © 2024 Wantedly, Inc. 対応結果
46. 多少良くなったものの まだ改善の余地あり © 2024 Wantedly, Inc. 画質改善への取り組み 対応結果
47. これから © 2024 Wantedly, Inc.
48. 今後やっていきたいこと • SLI/SLOの設定・モニタリング • 更新されていないライブラリの変更 • AVIFへの対応 等 これから © 2024 Wantedly, Inc.
49. まとめ © 2024 Wantedly, Inc.
50. まとめ 画像が劣化する一般的な要因 Wantedlyでの画質劣化の事例 今後やっていきたいこと 1 2 3
51. ご清聴ありがとうございました 🎉🎉🎉 © 2024 Wantedly, Inc. まとめ
52. • Wantedlyサービスにおける画像体験の裏側 • 画像リサイズのうんちく (補間フィルタ) • Exif Orientation のうんちく • JPG？PNG？一体何が違う？最適な拡張子選びのコツ 参考資料 © 2024 Wantedly, Inc.