Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
30
Help us understand the problem. What is going on with this article?
@jkr_2255

PNG画像の圧縮について

More than 5 years have passed since last update.

HTTP配信するWebサイトを作る上で、画像の最適化は手間に対してサイズの削減効果が大きいものです。ここでは、PNG画像について、ファイルフォーマットについて触れながら、いくつかある圧縮手法について解説していきます。

PNGフォーマット

チャンク

PNGファイルは、ファイル種別識別用の冒頭部のヘッダを除くと、いくつかのチャンク(データブロック)に分かれています。画像を構成する上で重要なチャンクは、以下のようなものがあります。

  • IHDR…画像の寸法、色数などが入ったヘッダー部分
  • PLTE…カラーパレット(インデックスカラーの場合のみ)
  • IDAT…画像データ(Deflate圧縮済み)
  • IEND…終端マーク
  • tRNS…透過色の設定

なお、チャンク名は4文字ですが、画像表示に必須なものは1文字目が大文字、なくても表示可能なものは1文字目が小文字となっています。これ以外にも各種のチャンクが定義されています。

カラータイプ

PNGのカラータイプとしては、いくつかのものが定義されています。

タイプ値 概要 詳細 tRNSチャンク
0 グレイスケール 最大256段階までの白黒の濃淡、パレットは不可 1色透過
2 RGB 24ビットカラー、パレットはなくてOK 1色透過
3 パレットカラー 24(32)ビット中256色 色ごとにアルファチャンネルを指定可
4 グレイスケール+アルファチャンネル 濃度8ビット+アルファチャンネル8ビット なし
6 RGB+アルファチャンネル RGB24ビット+アルファチャンネル8ビット なし

画像データについて

画像本体のIDATチャンクは、複数に分けて生成することもできますが、容量は大きくなります。また、圧縮前に「フィルター」という処理をかけることができて、横の行単位で記録する値を「上のピクセルとの差分」や「左のピクセルとの差分」のように選ぶことができます(なお、フィルターは圧縮率を高めるためのもので、データは省略しない可逆なものです)。

そうして記録したビットデータは、Deflateというアルゴリズム(gzipと基本的には同じもの)で可逆圧縮して、ファイルに書き出します。

各種の圧縮手法

このように、いろいろなものから構成されているPNGファイルですが、(Webで使うことを前提に)圧縮するにも、いろんな手段があります。

不要なチャンクの削除

上で省略したPNGのチャンクの中には、テキストデータを保存するものなど、画像にまったく影響を与えないものもいくつかあります。また、カラープロファイルやガンマ値補正など、ブラウザで表示するだけにしては高度すぎる機能もあるので、そういったものを削除することで容量を削減することができます。

  • 画質への影響…無〜低
  • 効果…ファイルによりけり

IDATの連結

PNGファイルを書きだす環境によっては、処理の都合か、IDATを分割して出力していることがあります。これらをつないで1つにすることで、余計なヘッダは削減できますし、一回に圧縮する区間が長くなって、圧縮率が向上することもあります。

  • 画質への影響…無
  • 効果…無〜低

Deflateの効率化

PNGファイルを書きだす環境によっては、速度を優先して圧縮率の低い状態でDeflate圧縮を行なっていることがあります。圧縮率を優先して再度圧縮を行うことで、サイズが小さくなることもあります。

  • 画質への影響…無(Deflateは可逆圧縮です)
  • 効果…無〜中

フィルターの最適化

ちょっとした画像でも、行ごとに最適なフィルターの組み合わせを完璧に求めるには組み合わせが多すぎます。とはいえ、いろいろ試行錯誤して最適に近いフィルターを選んでくれるツールもあります。

  • 画質への影響…無
  • 効果…無〜低

減色

24ビットカラーの不要な画像について、256色に落としてしまうことで、画像のデータ量そのものを削減する方法です。なお、PNGでは上にあるようにパレットカラーでも実質アルファチャンネル付きの32ビットカラーを使用可能ですので、透明・半透明画像でもその表現を保ったまま256色にできます。

色を落としたらどういう見え方をするかですが、もともと色の少ないイラストはもちろんのこと、画像単位で256色ということで、写真などでも意外と目立たないものです。とはいえ、人工的なグラデーションがある画像や、あまり関連しない画像を混ぜたようなスプライトでは、色化けが目立ってしまうこともあります。理想論を言えば、1つ1つ確認すべきでしょう。

なお、ツールによっては、本当に256色以下しかない画像について、自動でパレットカラーに変換する例があります。この場合は、画質に影響はありません。

  • 画質への影響…低〜高
  • 効果…中〜高

圧縮ツール

PNGGauntlet

PNGを圧縮するためのコマンドラインツールはいくつかありますが、それぞれ取る戦略が違います。PNGGauntletは、4つぐらいのPNG圧縮ツールで試行錯誤を行なって、さらにはGUIフロントエンドを付けた、Windows向けのツールです。画質に影響しない可逆圧縮しか行いませんが(色数の少ない画像がパレットカラーに変換されることはあります)、ものによってはこれだけでもかなり圧縮できることがあります。

なお、いくつかのツールを内部で併用するという性質上、同じファイルを2度3度圧縮にかけると、そのたびにサイズが縮小する、ということもときおり発生します。

TinyPNG

TinyPNGは、PNGファイルを256色に減色する圧縮ツールですが、特徴として透過・半透過を扱えるということがあります。パレットカラーのアルファチャンネルまで入れられるツールはそう多くないので、重宝しています。

参考URL

30
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
jkr_2255
qiitadon
Qiitadon(β)から生まれた Qiita ユーザー・コミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
30
Help us understand the problem. What is going on with this article?