OS搭載のツールで画像を変換すると、どのくらい画像に変化があるのか比較してみた

記事の概要

こんにちは！デザイナーのワタナベです。

世の中にはさまざまな画像圧縮ツールがありますよね。
ツールの違いで実際どのくらい見た目や容量が変わるのか疑問に思いまして、今回ブログにしてみました。

この記事の対象者

WEBで画像を扱う人向けの記事です。

WEB主流の画像フォーマットについて

画像フォーマットには何種類ものフォーマットがありますが、ここではWEBで一般的に使用されている3つのフォーマットについてご紹介します。

JPEG、JPG

JPEGは「Joint Photographic Experts Group」の略で、拡張子は「.jpeg」「.jpg」が使われます。

最大24bit フルカラー(約1677万色)に対応され、背景の透過には対応していません。

主に写真やグラデーションなどに向いているフォーマットです。一般的なデジタルカメラで撮影時の保存形式としても広く利用されています。

JPEGは非可逆圧縮方式で画像を圧縮しているので、画像データを非常に小さい容量に圧縮できますが、圧縮後は元の画質に戻すことはできません。

圧縮率の指定は可能ですが、小さくしすぎるとノイズが発生するので注意が必要です。

GIF

GIFは「Graphics Interchange Format」の略で、拡張子は「.gif」が使われます。

最大8ビット(256色)に対応され、背景の透過に対応しています。

最大256色までの色しか表現できませんが高い圧縮率を持っているので、ロゴやアイコンなどの単純な画像を表現するのに向いているフォーマットです。

複数の静止画像を1つにまとめることができるので、アニメーションとして表示する場合にも使われます。

圧縮は可逆圧縮方式ですが最大256色に減色してから圧縮されます。そのため256色以上の画像をGIFに変換した時は色数は減ってしまうので注意が必要です。

PNG

PNGは「Portable Network Graphics」の略で、拡張子は「.png」が使われます。

最大48bit フルカラー(約280兆)に対応され、背景の透過に対応しています。

可逆圧縮方式のため、圧縮後でも元の画質に戻すことができます。

その反面、元の画質が保持されるので、JPEGやGIFと比べると容量が大きくなってしまいます。

PNGは色数が多いですが高品質な画像を保存するフォーマットというよりは、イラストやチャート・図などの色数が少ない画像を綺麗に見せるために使われるフォーマット、または透過が必要な画像に使用されるフォーマットです。

OS搭載ツールで書き出した画像の変化を比較してみる

さて今回、Windows、MacそれぞれOS標準搭載ツールで画像を圧縮し、どのくらい画像に変化が出るのか比較してみようと思います。

手順

今回は、PNG画像をペイントとプレビューを使ってJPEG画像に変換・圧縮を行い、Photoshopで変換・圧縮した画像と比べてどのくらい違いが出るのか検証してみました。

使用するツール

• ペイント (Windows)
• プレビュー (Mac)

比較観点

• ファイルサイズの変化
• 画質の変化

基準となる画像

PNG画像をPhotoshopで最高画質(100%)、Google推奨値(85)、中画質(30)、低画質(10)で書き出して基準画像としました。

色数の多い画像をサンプル01、色数の少ない画像をサンプル02としました。

サンプル01 [1600×1066px]　(Photoshopで書き出し)

一番わかりやすい変化としては空のグラデーション部分です。画質が低くなってくるに連れてノイズも大きくなっているのが分かります。

サンプル02 [1600×858px]　(Photoshopで書き出し)

色数が少なくシンプルな画像のためか、高画質(100)~中画質(30)は肉眼ではよく見ないとわからないレベルです。低画質(10)になるとノイズがはっきりと見ることができます。

ペイント (Windows)

ペイントで書き出す際、画質の指定はできないため1枚のみ比較となります。

サンプル01 [1600×1066px]　(ペイントで書き出し)

サンプル02 [1600×858px]　(ペイントで書き出し)

考察

ペイントで書き出す時、画質の指定はできません。そのためファイルサイズから推測すると高~中画質ぐらいで書き出されているのではないかと予想されます。

画質の面では、ノイズがわかりやすいサンプル01のグラデーション部分を詳しく見てみると、画像を肉眼で確認してもGoogle推奨画質(85)よりはノイズが入り、中画質(30)よりはノイズが無いように見えます。

そのためファイルサイズから推測した通り、ペイントでは高~中画質ぐらいで圧縮されているのではないでしょうか。

プレビュー (Mac)

プレビューから「ファイル 」>「書き出す」を選択し、フォーマットにJPEGを選択して画質を設定しています。
なお、細かい画質の指定はできないので、あくまでも目安で書き出しています。

サンプル01 [1600×1066px]　(プレビューで書き出し)

サンプル02 [1600×858px]　(プレビューで書き出し)

考察

プレビューで書き出す時には細かい画質の指定はできませんが、基準の画像と比べてファイルサイズは大きく差がでませんでした。

プレビューで書き出した画像はノイズが少し荒く感じますが、厳密に比較しない限りあまり目立たないほどのレベルではないかと思います。(強いて言えば低画質(10)あたりがノイズの差が大きいです)

勿論、高品質な画像を求めるのであればPhotoshopでの書き出しが一番良いですが、一般的に使用するのであれば問題ないレベルではないかと感じます。

感想

今回はOS搭載ツールで書き出した画像の変化を比較してみました。

どちらのツールも厳密に見れば差はあるけども、そこまで気にしなくてもよさそうな圧縮具合だったと思います。

特にペイントでは画質の指定がない為、どのレベルまで圧縮されるのか疑問に思っていたので良い機会となりました。

簡易的な検証でしたが、どなたかの参考になれば幸いです。