どうしてJPEGでドット絵を保存しちゃいけないの?

※この記事はドット絵 Advent Calendar 2021の5日目の記事となります。

adventar.org

他の方の記事も毎日更新されているのでぜひ毎日楽しんでください! 裏ドット絵 Advent Calendar 2021というのもあるみたいなので、こちらもぜひ!

adventar.org


どうもー! おはようございます、こんにちは、こんばんは、かめです。 初めての方ははじめまして! よろしくおねがいします。

さて、今年もアドベントカレンダーの時期がやってまいりましたね。 恒例の、という言葉を枕詞としたいところだったんですが、なんと2019年と2020年はドット絵のアドベントカレンダーは開催されてないという。 自分はどちらも参加させていただきました。 あのとき見ていただいた方、ありがとうございます。


さてさて、それでは本題を。

早速ですが、こんなシチュエーションを考えてみましょう。

ある日、ドット絵を最近始めたばっかりのJくんが質問をしてきました。

「最近Twitterでドット絵を探していたらJPEGを嫌っているツイートがたくさん見つかったんだ。 それにJPEGで保存されたドット絵botっていうアカウントがあって、どうやら揶揄してるみたい。 どうしてJPEGでドット絵を保存しちゃいけないの?」

ずっとドット絵を嗜んでいたPくんは自信満々に答えます。

JPEGで保存すると、きれいに打っていたドット絵もガビガビになって汚くなってしまうんだ。 だから、保存するときはドット絵ツールのファイルやビットマップやPNGなどで保存して、使うときにPNGやGIFなどで出力するのがいいんだよ。」

すると、Jくんはこう質問を続けました。

「ふーん、なるほど。それじゃあ、どうしてJPEGで保存すると汚くなってしまうの?」

そんなことを考えたことがなかったPくん。 いったいどう答えれば良いでしょうか。


聡明な皆様なら、もちろん答えられますよね。

JPEGというのは、非可逆圧縮の画像フォーマットです。 平たい言葉に直すと、元の画像に戻すことができないかわりに画像のサイズを小さくすることができる画像のフォーマットになります。 その圧縮がドット絵と相性が良くないため、汚い画像となってしまうわけなのです。

(ちなみに、JPEGの代わりに推奨されるやすいPNG可逆圧縮の画像フォーマットです。)

でも、JPEGって写真などの普通の画像では使われることが多いですよね。 なぜ、ドット絵では、相性が悪いのでしょうか。

今回の記事ではもう少し詳しく見ていくことにしましょう。

それは、JPEGの圧縮手段である、RGB->YCrCb変換(および色差情報の間引き)と離散コサイン変換(DCT変換)・ 量子化ビット数の低減がドット絵のような色数が少なくはっきりとした画像を圧縮するのが苦手だからなのです。

それぞれ見ていきましょう。

RGB->YCrCb変換というのは名前の通り、RGBという三原色から輝度Yと色情報のCb/Crに変換するというものです。 もちろん、ただの変化では3要素から3要素への変換なので色情報がここで抜けるわけではありません。

しかし、JPEGでは、人間の目の特性である色の変化を認知する能力が低いことを利用し、色差情報を2x2の4ピクセルごとに平均を取り(=間引き)、情報量を4分の1にしています。*1

もちろん、通常の写真での4ピクセルはあまり大きな変化はありません。 しかし、ドット絵はどうでしょうか。 1ピクセルごとに大きな意味を持つドット絵では、この平均をとる操作はかなり厳しいものがあります。

これが、JPEG圧縮がドット絵に向かない理由の1つになります。

つづいて、離散コサイン変換です。 離散コサイン変換と聞いて、頭にはてなが浮かんでくる人も多いのではないでしょうか。

離散コサイン変換はその名の通り離散的な信号をいくつかの余弦関数の組み合わせに変換すること。 もう少し簡単に言うと、数字の列をいくつかの波の集まりに変換することです。

気になる方のためにWikpediaのリンクも貼っておきます。 ja.wikipedia.org

JPEGの圧縮では、画像を8x8の小さな画像に分け、それぞれの画像を64段階の余弦関数に分解します。 この64段階の余弦関数は、周波数が低いものから高いものまであります。

その後、人間の目の特性である細かい変化を認知する能力が低いことを利用し、細かい変化である周波数が高い余弦関数を間引く*2ことで情報量を圧縮しています。

ここまで読んでもらった方はもうお気づきかもしれませんが、ドット絵は1ドットという単位で絵を作ってる以上、細かい変化を間引くことはかなり厳しい圧縮となっています。 これも、JPEGの圧縮がドット絵に向かない理由の1つになります。


JPEGでは、他にハフマン符号によるデータの圧縮なども行っていますが、こちらは影響はありません。 しかしながら、先に述べた2つの圧縮がドット絵にとって厳しいということは理解していただけたかと思います。*3

さて、もとの話に戻りましょうか。 もう、Jくんへの回答は答えられますよね。

JPEG非可逆圧縮の画像フォーマットであり、その圧縮方法は人間の色の変化と細かい変化が弱いという特性を活かした色差情報の間引きと高周波情報の間引きを行うことによって成り立っているが、それらはドット絵では必要な情報となっているため、間引かれてしまうと情報が失われて汚い画像となってしまうからだよ。」

と答えればおおよそ合っていると思います。*4

今後、皆様のJくんが現れたら、頭の片隅にでもこの記事を思い出していただければと思います。

終わりに

実は今回は途中までは今年作ったこちらをもっとくだけた感じで紹介する予定でした。

(こちらも読んでもらえると嬉しいです。PNGについても書いています。)

qiita.com

ただ、せっかくのアドベントカレンダー。 新しく記事を書かないともったいないということで、新規で記事を書くに至った次第です。

それでは皆様ここまで読んでいただきありがとうございました。 明日の記事も楽しみにしましょう!

参考文献

こちらのサイトがJPEGファイルについてわかりやすかったのでぜひどうぞ。

CGファイル概説 第6章 第1節

もうすこしくだけた感じのサイトはこちらになります。

JPEG の仕組み : kei@sodan

このサイトもとても参考にしました。

Image compression(2)

*1:圧縮率によって変わります

*2:これを量子化ビットの数の低減です

*3:かなり端折って説明したので、実際はもう少し難しいことを行っています。

*4:間違っていたらご指摘ください!