ブログ・HP

WEBで使用する画像「GIF・JPG・PNG」の特徴

[toc]

 

「GIF・JPG・PNG」について特徴などを分かりやすく解説

 

ブログやホームペジなどを作成する際には、文章と画像を取り入れ構築していきます。画像はサイトのイメージがよくなるだけではなく、文章では伝えにくい部分を補ってくれます。

 

ですが、やたらと画像を掲載するのも考えものでバランスが大切です。それでは、ブログやホームページをデザインする際の画像(GIF・JPG・PNG)の特徴をまとめてみました。

 

GIF(ギフ・ジフ)拡張子.gif 形式の特徴

 

GIFGIFは、ベタ塗りの「タイトルロゴ・アニメ」などに向いています。パレットが最大で256色と圧倒的に少ないですが、それを理解して使うことで軽くて綺麗な画像の作成が可能となります。

 

1色だけ透過情報を含めることができ、アニメーションが作れるということで、サイト作りには重宝する形式です。

 

メリットとして...

軽く、イラスト・テキストがJPGに比べ綺麗に表示される。アニメーション化が容易。

 

デメリットとして...

古いモニターだと正しく表現されない場合があり、写真など多くの色数を使用する画像には適していない。

 

JPG(ジェーペグ)拡張子.jpg・.jpeg 形式の特徴

 

JPGJPGは「グラデーション・写真全般」に向いています。  圧縮率が高く小容量で保存できますが、偽色を多く含むので幾度と加工する場合には向いていない。

 

デジタルカメラはこの形式が多いので、撮影の際に画質及び大きさを決めておくことにより、ホームページなどに無加工で掲載ができます。

 

メリットとして...

多くの色数が必要な写真などに適している。

 

デメリットとして...

テキスト及びイラストは、圧縮をかけるとノイズ混じりの画像になりやすい。

 

PNG(ピング)拡張子.png 形式の特徴

 

PNGPNGは、「画質をキープしたい画像」などに向き万能かつweb向けで「GIF・JPEG」 に代わる画像形式として新しく開発されました。

 

GIFの至らない部分を拡張し容量を抑えれるよう考慮されたものですが、古いブラウザでは表示できない場合もあります。

 

機能は豊富ながらすべてを理解しコントロールするのは難しく、軽量ファイルの作成にはテクニックが必要となります。

 

メリットとして...

「テキスト・写真」どちらも綺麗に表示され、web向けの画像形式でである。

 

デメリットとして...

PNGに対応していないブラウザがあるが、現在はほとんどが対応済みのようです。アニメーション化はできない。

 

「JPEG・GIF・PNG」画像形式比較表

 

「JPEG・GIF・PNG」 各拡張子の特徴を分かりやすく表にて掲載

 

【画像形式の違い】
画像形式 JPEG GIF PNG
画質の劣化 不可逆圧縮

(画質劣化あり)

可逆圧縮

(画質劣化なし)

可逆圧縮

(画質劣化なし)

最大色数 約1678万色(24bit) 256色(8bit) 約1678万色(24bit)

約280兆色(48bit)

透過処理 透過不可 透過可能

(1色)

透過可能

(1色・アルファチャンネル)

アニメーション アニメ不可 アニメ可 アニメ不可

 

【最適な画像形式】
画像形式 JPEG GIF PNG
フルカラー写真 ×
モノクロ写真
フルカラーCG ×
単色イラスト
ボタン画像
バナー
アイコン
アニメーション × ×
幾何学模様

 

使用用途に応じて最適な画像形式を選ぶことで、ブログやホームページが負担の少ないサイトに仕上がります。

 

また、サイトの表示速度にも大きく係わってきますので、多少面倒でも画像の拡張子により使い分けたいものです。

 

-ブログ・HP
-, , , ,

error: Content is protected !!

© 2024 アフィリネットWEB戦略