clip_9

スパナタブで、「PNG」を押せばPNG画像が、「JPG」ボタンを押せばJPG画像が出力されます。
自分はPNGが好きなので迷わずPNGを選びますが、「PNG」と「JPG」の違いを知らない方もいるかもしれないので、説明します。
違いを知らないまま選ぶより、違いを分かった上で選ぶほうが絶対にいいと思います。

JPGは非可逆圧縮かつ増色が行われます

JPGは、スマホやデジカメで撮影した写真のファイル形式として馴染み深いという方も既に多いかと思いますが、JPGというのは保存のたびに画質に対して圧縮、劣化、汚れがかかる形式です。どんなに「圧縮率:低」「高画質」に設定していても、必ず保存の際に画面に圧縮をかけるので、保存をすればするほど絵が荒れていくという性質を持っています。これを非可逆圧縮といいます。(元通りにはならないからです)

JPGは、同じ画像の内容をBMPで保存する場合に比べてファイルサイズを小さくすることができる利点がありますが、このように絵は荒れますし、元には戻りません。ファイルサイズを抑えるために普及した形式です。

多くの色数を保存できるために写真向けとして普及した歴史がありますが、その逆で、たとえば色数の少ない画像をJPGで保存すると増色が行われ、元の画像になかった色が発生し、それがブロックノイズ・画質の荒れと混ざり、グチャグチャな色になって保存されるという悲劇が起きます。

ゆえに、
●元々扱う色数がめちゃめちゃ多い(写真)
●ファイルサイズ減少のために多少画質が見えない程度に荒れてもいい(オリジナルデータが別にあるからいい)
●Web掲示用だからいい

などの割り切りがあるならJPGを扱うのもいいと思うのですが、一生後生大事に抱えて取り回す画像、しかもこの画像を元に何度も加工したい、とかいう場合は不向きだと思います。

PNGはそのへん乗り越えたファイル形式なんです

歴史的経緯はいろいろあって面倒なので省きますが(すみません)、PNGは「画質を荒らす圧縮をかけなければ保存できない」というようなことはないファイル形式です。
色数が少ないものにも色数が多いものにも向くよう発展した形式です(ファイルサイズの減少においてはもちろん差が付きますが)。
そして「みんなの着せ替え!」のような、写実的でない、肌・服・背景などのベタ塗りが比較的多いイラストなのであれば、圧倒的にPNG保存が向いています。

みんなの着せ替えの保存ボタンの押し比べをしてみましたが、JPGとPNGでは、JPGでは軽度の画質圧縮がかかり、PNGでは画質圧縮はかかりませんでした。画質差はわずかなものですが、JPGは見たままを保存してくれないけどPNGは見たままを保存してくれるということになります。

また、PNGは透過機能を扱えるファイル形式です。PNGの利点はここにもあります(透過使わなくてもいいんですが)。

みんなの着せ替え JPG/PNG 保存比べ

とまあ、ここまで「JPGって劣化するんだよ」と煽っておいて何なのですが、みんなの着せ替えのJPG保存は結構高画質です。
ですがやっぱり高画質であってもJPGなので、当然無劣化ではないです。

以下の画像は、画像サイズ2で出力した画像を、ニアレストネイバーで300%に保存した比較画像です。

JPG PNG
jpg
png

JPG(左)が、PNGに比べてこの時点でメチャクチャ見て分かるノイズを吹いたりしてはいないので、綺麗なJPGだと思います。
(この時点で見て分かるノイズをかけるアプリやゲームも当然多くあるので)

しかしやっぱりJPGなので、増色処理とノイズは高画質設定であっても免れません。
たとえば「これに色を塗ろう」と思った時、以下のように差が現れます。

JPG PNG
jpgblue
pngblue

これは、photoshopのバケツツールでアンチエイリアス補正機能を0にしてシャツの白ベタ部に色を塗った結果」です。
アンチエイリアス補正機能0状態で塗っているので、どちらの画像も線付近に白吹いていますがそこは仕様です。(黒線の周りにわずかに黒と白の間の色が置かれていて線をなめらかにされているからです。これをアンチエイリアスといいます)

この「シャツのベタ塗り部分に補正機能0で色を塗ったら差が出た」というのは、前述のとおり「JPGでは増色して劣化をかける性質が働いているから」です。
シャツの白い部分をバケツツールで水色に塗ったはずなのに白いノイズが残ってしまったということは、その「残ったノイズの白色部分」は「元のシャツの全体の白と見た目は似た白だけど、わずかに違う数値の白に変化させられていたため」です。見た目似てるけど違う数値の色を増やしまくる、それがJPGの性質です。だから塗り残しとして残ってしまいました。

もっとも、対処は不可能なわけではありません。photoshopのアンチエイリアス補正機能の数値を上げれば、こうしたJPGノイズに対しても、線画の脇のアンチエイリアスに対しても、自動でそこそこ問題なく塗りつぶしてくれます。なので対処が絶対不可能になるというわけではないです。
でももしJPGにJPGを重ねていくような保存の仕方をしていくと、こういう対処は難しくなっていきます。

そして「PNGであればしなくていい処理」が一段階増えるということでもあります。

ゆえに自分は、こういう「ベタ部」の多い画像や、色数の少ない画像は、PNGで取り扱うほうが好きです。(ただこういうのは自分の使う目的や好みの問題もありますので、決してどちらが正解でどちらが不正解といのではないです)

みんなの着せ替え JPG/PNG ファイルサイズ比べ

あと、みんなの着せ替えにおいて、画像のファイルサイズは自分の作った画像ではいずれもPNGのほうが圧倒的にファイルサイズ小さかったです。
ただ、自分は
●画像サイズ2(だからそもそも画面サイズが大きくない)
●グラデ多用してないし色数少なめ
●みんなの着せ替え上でMOD(画像取り込み使用)をしていない

という条件でみんなの着せ替えをプレイしているので、
「どんな人でも必ずPNGのほうがファイルサイズ小さくなる」というものでもないと思います。

以上、参考になりましたら幸いです。

(参考資料)アンチエイリアスとかJPGとかPNGとかについてもっと知りたい

ドット絵の本とか読むといいです。
ドット絵の歴史は既に長く、かつ、その絵の総量の小ささやアニメーション情報の保有のために、保存における画質の変化は大敵であり、たとえば減色は「ユーザーが意図して」行うべきものであるというふうに、画像の変質においては厳しく管理されてきているはずです。
昔のほうが色数やファイルサイズの扱いにはシビアに取り扱わなければいけなかった時代背景があるので、昔のドット絵の本を読むほうがそこらへんぬかりなく説明を書いてくれているかもしれません。

自分が読んだ本は楽天になかったので以下にてきとうなドット絵の本のリンク貼りますが、何でもいいのでドット絵の本ひとつ読んでみると、ドット絵を描ける描けないに関わらず、画像エディット、画像ファイルに関する知識が得られるのでおすすめです。

【中古】 ドット絵プロフェッショナルテクニック ドット打ちからアニメーションまで /高野隼人(著者) 【中古】afb 【中古】単行本(実用) ≪コンピュータ≫ ドット絵職人 すべてのパソコンに入っている「ペイント」ツールでつくる / Suguru.T(NARIKIRI)【中古】afb 【中古】 Game Graphics Designドット絵キャラの描き方 /瑞穂わか,中村竜彦【著】 【中古】afb




コメントする

名前
 
  絵文字
 
 

Kisekae Tips 1001
ぽち公先生作のFlashゲーム「みんなの着せ替え!」のいちファンです。

ここは「みんなの着せ替え」をプレイして分かったことを、いちファンが書き連ねる攻略blogです。

→このblogについて 詳細
Author: 1001

twitter (@kisekae1001)
booth
pixiv
partslist1001
sumabi1001
記事検索
カテゴリー
最新コメント
taka先輩のblogを宣伝

チラシの裏な着せ替え・創作スクラップ置き場 (taka先輩のblog)


「ロボものっぽいスーツ」を公開してくださっているtaka先輩がblogを開始!
(自分が使ってるサイバー風スーツはtaka先輩のスーツを元にアレンジしています)

taka先輩のblogでは新作スーツのコードも発表されています!ぜひ
booth
booth

着せ替えで作った画像をpixiv factoryにアップして、自キャラのアクリルキーホルダーを作る方法の製作方法や手順を公開しています。

boothを経由して完成品をお届けすることもできます。