0611-1

PNG-8?PNG-24?知ってるようで知らなかった 透過効果のPNG形式ファイルの違いについて

こんにちは。Yoshyです。
今まで、約10数年間、フォトショップやイラストレータを使って画像を作って、散々インターネットにもアップロードしていたりしたのですが、今まで色々細かい事は気に留めずに仕事をしてきてしまっていました。
っというのも、ウェブなら、「表示されればいいや」紙面媒体なら、「キレイに出てればいいや」くらいの環境が多かったのもあって、何となく、ウェブページで写真系の画像を作る時は、JPEGで文字とかの少ない色数の画像ならGIFで、透過させたいならPNG、紙媒体なら、印刷所に出すならEPS、自社内だけならJPEG画像ぐらいのノリでした。
(だめですね・・)

今日何故か不意にふっときになったので、ちゃんと調べてみました。
詳細な事は、ググってください。

画像の保存形式別の特徴
(PNG-8、PNG-24、GIF、JPEG)

PNG-8
透過レイヤーをそのまま透過して表示してくれる。絵柄などの色がついているデータは、256色の色で表現されます。淡色系であればこの設定で十分。
グラデーションとかの画像には適していない。データ量は軽い。

PNG-24
透過レイヤーをそのまま透過して表示してくれる。使える色は1670万色でJPEG並みにキレイです。
でも、データが重くなります・・・。

GIF
透過も使えるが、扱える色数が少ない、アニメーションに対応している。
データ量は軽め。

JPEG
1670万色の色が扱え、鮮明な画像が表現できる。写真とかアップロードするなら、コレが最適。
一般的に多い。

という感じで、まあ、何となく何気なくやっていた設定でよかったぽかったですが、PNGの8と24の差があいまいだったのでこの機会にわかってよかったです。。。

PNG形式で保存する画像(透過する必要がある画像)は、殆ど、ウェブページの場合、ボタンとか、大体色数がすくないとおもうので、ほぼPNG-8で事足りるなと思いましたが、文字の画像を作る場合は、以下のポイントに注意したほうがいいとおもいます。

0611-1

滑らかに、にしておかないと、透過したときに、ギザギザ感が気になると思います。

ホームページ作成も、データ量を気にして作ってみると、アクセスしてみたときに画像の表示がサクサクだったり、容量を抑えられたことに喜びを感じられる?と思います♪
今はインターネット回線が強くなって画像の表示も速くなりましたが、細かい事から気をつけて、データ量も節約していきたいと思います。

是非、誰かの参考になるとうれしいです。

それではまた!