あけましておめでとうございます、ゲスト参加の中山です（写真はお正月の雰囲気を出してみました）。
少数派ですが、世の中にはイラストや UI のスクリーンショットが JPEG 形式で共有されると残念な気持ちになってしまう人々が存在します。
目視困難なノイズを心で感じたり、ささやかな省サイズ化の余地を惜しんでしまうのがその理由です。多数派にとっては瑣末な話ですが ……
そんなわけで今回は上述「残念な気持ち」の可視化を試みたいと思います。
なお、記事内で利用する画像は自前で用意したものです。
写真の場合
最初に、冒頭の写真のエンコード品質とファイルサイズの関係をみてみます。
グラフの赤線は JPEG エンコード、オレンジ線は WebP エンコードです。
また、横軸が JPEG / WebP のエンコード品質（99 ～ 1）、縦の主軸 + 実線がファイルサイズ、縦の第二軸 + 点線が元画像からの劣化の度合い（元の画像に対する輝度の平均二乗誤差）です。
では実際にグラフ上の (1) ～ (6) の画像を目視で確認してみます。
（WebP はサポートブラウザの関係で PNG32 に変換しています）
前者が品質 99 の JPEG（70.6 KB, 誤差 0.2）で後者が WebP（45.4 KB, 誤差 0.7）です。
目視ではほとんど差はありません。
前者が品質 90 の JPEG（29.8 KB, 誤差 5）で後者が WebP（24.9 KB, 誤差 3.7）です。
目視ではほとんど差はありません。
前者が品質 70 の JPEG（16.5 KB, 誤差 16.2）で後者が WebP（12 KB, 誤差 17.3）です。
JPEG は注視すればノイズに気付きます。
前者が品質 50 の JPEG（12.4 KB, 誤差 25.7）で後者が WebP（9.5 KB, 誤差 25.4）です。
JPEG のノイズが増えてきました。
前者が品質 30 の JPEG（9.2 KB, 誤差 40）で後者が WebP（7 KB, 誤差 41.6）です。
JPEG のノイズが増えてきましたが WebP もぼやけた領域が目立ちます。
前者が品質 1 の JPEG（2.5 KB, 誤差 357.9）で後者が WebP（2.3 KB, 誤差 136.3）です。
差は歴然です（どちらも酷いですが）。
写真の場合は 2～4 あたりでトレードオフを考慮してエンコード品質を決めるのが良さそうですね。
ちなみに JPEG は ファイルサイズが同程度の「高品質 × 画素数の少ない JPEG 画像」と「低品質 × 画素数の多い JPEG 画像」で比較すると、後者の方が高いユーザー評価 を得られます。
WebP はサポートブラウザが増えれば是非活用したいエンコードですね。
イラストの場合
次にイラストのエンコード品質とファイルサイズの関係性をみてみましょう。
ちなみに、冒頭で述べましたが、私もイラストや UI のスクリーンショットが JPEG 形式で共有されると残念な気持ちになってしまう一人です。
写真と比較すると、数値上では WebP に対して JPEG の劣化の度合いが大きく出ています。
では実際にグラフ上の (1) ～ (6) の画像を目視で確認してみます。
前者が品質 99 の JPEG（60.2 KB, 誤差 1.2）で後者が WebP（28.5 KB, 誤差 2.1）です。
目視ではほとんど差はありません。
前者が品質 90 の JPEG（29.4 KB, 誤差 6.6）で後者が WebP（19.5 KB, 誤差 4.1）です。
イラストだとこの時点で JPEG のノイズが気になります。
前者が品質 70 の JPEG（17 KB, 誤差 28.8）で後者が WebP（12.1 KB, 誤差 13.5）です。
JPEG は残念な感じですが WebP は許容範囲です（主観）。
前者が品質 50 の JPEG（13.1 KB, 誤差 49.4）で後者が WebP（10.2 KB, 誤差 20.3）です。
WebP でもノイズが目立ってきました。
前者が品質 30 の JPEG（10.1 KB, 誤差 79.5）で後者が WebP（7.7 KB, 誤差 38.4）です。
差は歴然です（どちらも酷いですが）。
前者が品質 1 の JPEG（3.4 KB, 誤差 484.7）で後者が WebP（3.5 KB, 誤差 151.1）です。
差はさらに歴然です（どちらも酷いですが）。
実験結果はともかく イラストや UI のスクリーンショットは PNG8 でエンコード（256 色ならば GIF より PNG8 がサイズで有利）しましょう。
また、写真に平坦色調のイラストや文字を入れ、かつロスレスで保存したい場合には PNG32 でエンコードしましょう。
イラストの復旧
ここからが本題です。
今後もイラストや UI のスクリーンショットが JPEG 形式で共有されることはなくならないでしょう。
とはいえ、他人にお作法を強要することはできません。
そこで以下の方法で JPEG イラストの復旧を試みてみます。
- 256 色に減色（グラフの緑のマーカー）
- JPEG ノイズ除去後に 256 色に減色（グラフの青のマーカー）
※ JPEG ノイズ除去には waifu2x を利用させて頂きました
結果はこのようになりました。
復旧したイラストを目視で確認してみます。
何れの画像も、前者が「減色のみ」後者が「ノイズ除去 + 減色」の結果です。
品質 99 の JPEG から復旧。
品質 90 の JPEG から復旧。減色のみでは復旧とは言い難い。
品質 70 の JPEG から復旧。減色のみでは復旧とは言い難い。
品質 50 の JPEG から復旧。減色のみでは復旧とは言い難い。
品質 30 の JPEG から復旧。減色のみでは復旧とは言い難い。JPEG ノイズ除去版はここでも綺麗で素晴らしいですね。
品質 1 の JPEG から復旧。減色のみでは復旧とは言い難い。ここまでブロックノイズが激しいと JPEG ノイズ除去も効かず。
ウィキペディアに JPEG 画像を減色し PNG 画像として保存する方法 という記事がありますが、一筋縄ではいかない JPEG ノイズ除去を waifu2x ではいい感じに仕上げてくれています。DCNN は凄いですね。
実は、当初 JPEG ノイズ除去を自前で実装しようとあれこれ頑張ってみたのですが、この性能をみて断念しました（笑）。
そんなわけで「JPEG ノイズ除去後に 256 色に減色」で残念な気持ちを払拭できました！
今年も張り切っていきましょう！
