マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

その他

【初心者用】何が違う?画像の保存形式について

投稿日:2014年10月10日 更新日:

こんにちは、新人Aです。
Web制作には欠かせない、画像のことですが・・・
私もざっくりとしか使い分けたことがなかったので、ここでご紹介するついでに私も知識を備えそうかと思います。
ぜひお付き合いくださいませ。

 

 

【gif】/ジフ
私のgifの印象は、アニメーションでよく使われているなぁ、という感じです。
普段はあまりgifの形式で保存することが少ないので、私の中ではあまり馴染みがない印象でした。

☆くっきりした画像に適している!
色素の数が少ない(256色)のですが、ロゴやアイコン、アニメ調のイラストなど、ベタの塗りの画像に向いていると言われています。
その逆で、グラデーションなどには弱いので写真には不向きであることがわかります。

☆背景を透明にすることが可能
画像の背面を透過処理することができます。(ただし、半透明にはできません。)

 

 

【jpeg】/ジェイペグ
写真などでよく使われる形式ですね!
pngに比べるとデータがだいぶ軽く、gifとは逆でロゴやアイコンなどのくっきりした線に弱いイメージです。

☆フルカラーに対応
扱える色素の数が多く(およそ1670万色)、グラデーションも綺麗に表現することが出来ます。
ただし、くっきりした線は色が変わったりぼやけたり、ノイズが出る可能性があります。

☆透過ができない
gif、pngと違って背景の透過ができません。

 

 

【png】/ピング
パソコンで絵を描いたりする私にとっては一番使う形式です。
画質の劣化も少ないのがいい点ですが、データが重くなってしまうのが悩みどころですね。

☆なんといっても画質
色素の数はjpegと同じくらい。データが重くなるといえど、画質重視の時はpngがいいでしょう。
キャプチャをとったりする際は、jpegではなくてまず最初はpngにすることをオススメします!

☆透過が可能
gifでも背景を透過することが出来ますが、pngでは半透明にすることもできます。

 

 

【アイコンで比較してみる】

01
くっきりしたアイコンの場合
こうして見るとどの形式も変化が無いように見えるのですが、拡大すると・・・

02 03
pngとjpegではjpegのノイズが見えますよね。
pngとgifでは、目立った変化はありません。

 

 

【写真で比較してみる】
hikaku2
こちらの写真で比較してみましょう。

04 05
pngとjpegではさほど大きな変化はないのですが、
pngとgifでは、gifの写真の青い空のグラデーションがガタガタして見えるのがわかるでしょうか?

写真ならjpeg、アイコンならgif、画質重視のデータならpngというように、
それぞれの形式にメリットとデメリットがあるので、場面によって使い分けてみてはいかがでしょうか!

-その他

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【写真加工チュートリアル】 ライバルと差をつけよう!心霊写真の作り方

【写真加工チュートリアル】 ライバルと差をつけよう!心霊写真の作り方

夏もそろそろ終わりに近づいてまいりました。 みなさん、バカンスはいかがでしたでしょうか。 たくさん撮ったであろう夏の思い出写真にちょっとしたアレンジを加えるだけで、友人をあっと言わせるテクニックをご紹 …

【リスティング担当者必見】クリック率をあげるには?“都会の路地裏作戦”がオススメ!

【リスティング担当者必見】クリック率をあげるには?“都会の路地裏作戦”がオススメ!

ビッグワードはコストがかかるし競争率が激しい…。 インプレッション(表示回数)は増えたけれど、クリック率があがらない…。     WEB制作の会社ならば、もはや必須の知識ともいえる …

マーカーネットのNY研修のアルバム第一弾!

マーカーネットのNY研修のアルバム第一弾! 成田空港⇒NY 写真家 土井 浩一郎さんスタジオ見学をはじめ、NYで活躍するWEB制作会社とディスカッション。ブロードウェイ・ミュージカル「レ・ミゼラブル」 …

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

リスティング広告を始める際に知っておかなければならないことその1【マッチタイプを理解する】

リスティング広告を始める際に知っておかなければならないことその1【マッチタイプを理解する】

リスティング広告を始める際に知っておかなければならない機能の中に、マッチタイプというものがあります。マッチタイプをしっかりと理解し有効的に活用することで、広告表示のきっかけとなる検索語句・誘導したいユ …