メディア機能の画質改善をしました
2022年1月6日 にリリースされたVer. 3.0.2でメディア機能でアップロードした画像の画質改善を行いました。 今回はこの画質改善について詳しく紹介します。
画質劣化する原因
まずメディア機能は以下のような手順でアップロード・表示をおこなっています。
- 編集画面で画像を選択
- 大きい画像でもアップロードできるように、ブラウザでリサイズ処理（canvas使用）
- アップロード処理
- PHPで画像生成（Imagick or GD）
- テンプレート解決時、resizeImg校正オプションがある場合、再度画像生成（Imagick or GD）
- 表示
ここで画質劣化に影響を与えているのは、2番目のブラウザのリサイズ処理です。
メディア機能では、一眼レフカメラで撮ったままの画像のようなサイズの大きい画像をそのままアップロードしてしまうと、 サーバーの制限に引っかかるため、ブラウザ側でリサイズしてからアップロードしています。
このブラウザでのリサイズ機能が、うまくダウンサイズできず、ノイズやジャギーが目立ってしまい画質が劣化していました。 ただし全ての画像で起きるわけではなく、以下のような条件だと発生しやすいです。
画質劣化しやすい画像
元画像のサイズが大きく、ブラウザでのリサイズサイズと差が大きい場合、劣化しやすくなる
ブラウザでリサイズするサイズは、コンフィグ > 編集設定 の「拡大表示時の最大サイズ」で指定します。 「拡大表示時の最大サイズ」と、元画像のサイズの差が小さければ、あまり画像劣化は発生しません。
改善前と改善後の検証
Ver. 3.0.2 で ブラウザでのダウンサイズの方法を修正しました。
ここでは実際に修正前と修正後でアップロードされた画像を数枚比較してみてみます。
今回の画像は、十分大きな画像（横5000px 以上）から、ブラウザで1400pxにリサイズし、サーバー側（PHP）で、1200px にリサイズした画像となります。
1枚目（全体）左:修正後 右:修正前
いかがでしょうか。この写真の場合、全体表示ではパッとわからないかもしれません。
髪の毛の部分がわかりやすいので、次は同じ画像をズームしたもので検証してみます。
1枚目（髪の毛部分をズーム）左:修正後 右:修正前
髪の毛の部分のノイズや、ジャギーが目立たなくなっていると思います。
2枚目（全体）左:修正後 右:修正前
こちらも全体だと少しわかりにくいので、わかりやすい街灯部分をズームしてみます。
2枚目（街灯部分をズーム）左:修正後 右:修正前
どうでしょうか。街灯周りや空のノイズが、修正前は多く出ていたのが、修正後は抑えられていると思います。
3枚目（全体）左:修正後 右:修正前
こちらも全体だと少しわかりにくいので、顔部分をズームしてみます。
2枚目（顔部分をズーム）左:修正後 右:修正前
髪の毛やメガネのフレーム、服のパターン部分がわかりやすいと思います。やはり修正前は、ノイズやジャギーが目立っていますが、修正後は抑えられています。
ブラウザでリサイズを行わないオプション
画像比較どうでしたでしょうか。修正後は、ノイズやジャギーが抑えられて画質が向上していると思います。 ただ気づかれた人もいるかもしれませんが、ブラウザのリサイズを行うと改善後の画像でも、若干シャープネスが甘くなり画質劣化が起こります。
どうしてもブラウザでリサイズを行うと多少の画質劣化が起きてしまうため、今回ブラウザでのリサイズ機能を使用しないオプションを用意しました。
設定方法
private/config.system.yaml に以下記述をします。
media_client_resize: off
注意事項
このオプションを設定すると、大きなサイズの画像がアップロードできなくなります。なので手作業で画像をリサイズしてからアップロードしなければならず、 多少の手間と知識が必要となります。
以上になります。いかがでしたでしょうか。
高い画質クオリティが求められる場合も多いと思います。
一度いろいろ試してみていただけると幸いです。
引き続き皆様のお役に立てるよう、改善を進めてまいります。 今後ともどうぞよろしくお願いいたします。