こんにちは、Webクリエイターの伊澤です。

最近、業務で透過画像を扱うことが増えました。

透過画像といえば今はPNGとGIFですよね。

デザイナーではないので、Photoshopで切り出しするときにどっち画像形式にしようか？なんて悩んだ時期もありました。

「とりあえずPNG」の風潮を疑問に思ったコーダーが、PNGとGIFの違いをお話したいと思います。

まず一般的に透過画像に使われるPNGですが

特徴は以下の通りです。

・複数の透過色を指定できる★

・フルカラー保存するとJPGより重くなる

・8bitカラーに対応している

次にGIFですが、このような特徴があります。

・透明色の指定は一色のみ★
・アニメーションが可能
・色数が少ないときはファイルサイズを少なく出来る

試しにマリンロードサイトのロゴを一度透過で出力し、

黒背景で違いを見てみると以下の通りになります。

■PNG
キレイに透過出来ていますね。
4.0kb

■GIF
まわりに白いエッジが出ています。
2.6kb

と、顕著に違いが出ます。
どうしてGIFだと白いエッジが出来るのかそれは上記の★を見ると分かります。
GIFでアニメーションを作る時も注意しないと白いエッジが出ます。

対処法として、出力時に保存画像の最適化画面「マットなし」を選択。

必要に応じて背景色を設定するとGIFでもキレイに出力出来ます。

基本的に透過画像を作る時はPNGが綺麗に仕上がります。
GIFを透過で使うときはアニメーションする透過画像になるのでしょうか。

ちなみに、W3CもPNGをフォーマット画像で推奨しています。

知らずにGIFで透過を使うと思わぬ時間をとりますのご注意を。