Webサイト制作で違いを知っておくべき画像の拡張子JPEG、PNG、GIFの使い分け

Webデザインでとっても存在感のあるWeb画像。その中でも色の点が隙間なく大量に並ぶことで構成されているものをビットマップ画像といいます。ビットマップ画像のファイル形式には、JPEG、PNG、GIFの3種類があり、それぞれの表現の得意、不得意があるため、違いを確認しておきましょう。

画像ファイルの形式3種類「JPEG、PNG、GIF」の特徴を知っておこう

１． JPEG

JPEGは「ジェイペグ」と読みます。特徴としては以下の点があげられます。

• フルカラーで1670万色を表現できる
• 背景を透過させることができないため、四角い画像として配置する
• 用途としては写真やイラスト
• 同じ色の連続を省略することで画像を圧縮し、ファイルサイズが小さい
• 圧縮率を高くすると画像が粗くなる
• 一度JPEGファイルにするともとの画質には戻せない

２． PNG

PNGは「ピング」と読みます。特徴としては以下の点があげられます。

• フルカラーで背景を透明にすることもできるため、ロゴマークやアイコン、サイトの背景を活かして表現ができる
• JPEGと同じく1670万色を利用できる
• 256色のモードもあり、イラストや図などに向いている
• 圧縮することでファイルを小さくしているが、画質は圧縮前の状態に戻すことが可能
• JPEGに比べてファイルサイズが大きくなりやすい
• GIFに代わるアニメーションファイルとして活用されている

３． GIF

GIFは「ジフ」と読みます。特徴としては以下の点があげられます。

• 256色で構成されている
• アニメーションが可能
• アイコンやGIFアニメで使われる
• 扱える色の数が少ないため、写真などには不向き
• PNGのように背景を透明にしたり、動きのあるアニメーションファイルの作成が可能

Web画像は見た目だけでなくサイズも重要！

見た目を重視してビジュアルに追及することはよいのですが、サイト全体のことを考えると、ファイルサイズに気を付けなくてはいけません。

このような画像ファイルが多くなると、サイト表示に影響がでてしまいます。

そのため、Webサイトで画像を挿入する場合は、「きれい」「大きい」「ファイルサイズが小さい」画像を意識しましょう。圧縮や最適化のプラグインを利用するとよいかもしれません。

Web制作で画像を使う時に知っておきたいこと

画像の扱いには注意するべきポイントがいくつかあります。

1. フリー素材を利用する場合は、利用規約、ライセンス、商用利用がOKか、加工など、配布サイトの規約に気を付けましょう。
2. 自分で撮影した画像も他社が映り込んでいないか、背景にも気を付けましょう。
3. スマホカメラやデジカメで撮影した画像には日付や撮影場所まで記録されているものも多くあります。exif情報と言いますが、個人情報が画像からバレてしまうこともありますので、気を付けましょう。

画像は著作権の問題にも絡んできます。画質、画像ファイルの大きさだけでなく画像内容にも十分注意し、Web制作をしてください。

弊社ではホームページの制作・リニューアルはもちろん、画像差し替えのみの対応も承っております。下記リンク先より弊社のWEB制作についてご覧いただけます。是非ご覧ください。

効果的なホームページ制作で売上・集客アップを実現!ホームページ制作については株式会社観光丸にお任せください！