creatersnest

どの形式で保存すればいいの?GIF,JPEG,PNGそれぞれの特徴


Photoshopで画像をWEB形式で書き出し保存するときに、どの形式で保存すればいいのでしょうか?形式によっては色数や画質などにも影響してきます。また、保存する際にはファイルサイズも気になるところです。

【GIF】【JPEG】【PNG】それぞれのファイルの特徴を活かして使い分けることで、作品を最適な状態で保存することができます。
しっかり認識していきましょう。

 

145613

GIF

GIF(Graphic Interchange Format)は最大256色までしか使えないので、写真やグラデーションなど階調のある画像には向いていません。GIFに最適なのはイラストなどのベタ塗り面が広いもの、ロゴなど色数の少ない画像によく利用されます。特定の色を透明にして画像の背景が透けるようにすることもできます。

GIF画像は必要最小限の色数に減色することによって、ファイルサイズを小さくすることができます。

「劣化」にチェックを入れると画像ファイルを圧縮する程度を設定できます。
数値が大きいとファイルサイズは小さくなりますが画像は劣化します。
「減色」にチェックを入れると色数を減らすことでファイルサイズを小さくすることが可能です。
「透明部分」にチェックを入れることで、元画像の透明部分が透けるようにできます。背景を削ることでファイズサイズを小さくしたり、デザインに幅を利かせることが可能になります。

GIFのもう一つの特徴に「GIFアニメーション」があります。
GIFアニメはプラグインを必要とせずにほとんどの環境で見ることができ、また、ファイルサイズも小さいので、サイトのワンポイントやバナーによく使われます。

 

スクリーンショット 2015-07-09 15.27.05

JPEG

JPEG(Joint Photographic Expert Group)は、約1,670万色までの色数を扱い滑らかな階調を表現できるファイル形式で、圧縮率を高くするとGIFよりもファイルサイズを小さくすることもできます。

しかし、その分過失は劣化しますのでバランスを見ながらサイズと画質をコントロールしていくと良いです。WEBページでは写真のように色数の多い画像に利用されます。

「最適化」にチェックを入れるとファイルサイズを極力小さく書き出すことができます。ただし、画質が悪くなる場合があります。

 

176657

PNG

PNG(Portable Network Graphics)形式は、GIF形式に代わる規格として開発されたファイルで、透明化やインターレースのようなGIF形式と同じ機能を備えています。

PNGは最大で256色を扱うことができるPNG-8形式と約1,670万色を扱うことができるPNG-24形式で書き出すことができます。

色数から見ても分かるとおり、PNG形式はGIFの特徴とJEPGの特徴を併せ持ったファル形式で透過処理も可能です。

なお、PNG-24形式で保存すると、他の形式のファイルと比較して圧縮率がよくなく、ファイルサイズが極端に大きくなりますので注意しましょう。

 

まとめ

いかがでしたでしょうか?
それぞれのファイル形式の特徴が理解できましたでしょうか?

GIF

・ベタ面の多いもの
・アニメーションを作る時
・背景を透過したい時
・極限までファイルサイズを圧縮できる

JPEG

・写真
・グラデーションを綺麗に表現したい時

PNG

・背景を透過したい時
・色数の多いイラスト
・写真はファイルサイズが大きくなってしまうため不向き

以上、このような特徴があります。

 

WEBページようの画像を制作するする上で、画像のファイルサイズを出来るだけ小さくしてWEBブラウザでの表示速度を早くする一方で、画質を損ねないようにすることが大切になってきます。

それぞれのファイル形式の特徴を理解し、最適な作品を制作することを心がけましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


ange

フリーランスでグラフィックデザイナーをしています。 ゲームキャラクターデザイナーを経てWEBデザイナーに転身。DTPデザインなど幅広く活躍しています。 http://studio-colorz.com/

Next ArticleWebデザインでもよく使う!境界線をPhotoshopで表現する方法