本文へ移動

ホームページ担当者なら必見!
画像の拡張子の違いをカンタン解説

担当者さま必見! 画像の拡張子の違いをカンタン解説
今回は、知っておきたい画像の拡張子についてご紹介いたします!

そもそも拡張子とは?

画像や文章データなど、ファイルの種類を識別するためのものです。
末尾に「.(ピリオド)+英数字」で表されます。

JPG(またはJPEG)

日頃から耳にする機会が多い、最もポピュラーな拡張子ではないでしょうか。
デジタルカメラやスマートフォンでの写真など、幅広く使われている形式です。

特徴

■データサイズが小さい。
写真色数の多いイラストにオススメ(ベタ塗りが主体のイラストは不向き)。
■保存し直すたびに画質が劣化する。
写真
写真
データサイズが小さくてキレイ。圧縮するほど劣化します。
色数の多いイラスト
色数の多いイラスト
グラデーションなどもキレイに表現可能。
色数の少ないイラスト
色数の少ないイラスト
ベタ塗り部分にノイズが入ることがあるので、あまりオススメできません。

ホームページでは……

■写真
■色数の多いイラスト
にオススメです!

GIF

インターネットで見かける動くアイコンやイラストは、この形式が使用されています。
アニメーションの設定が可能ですが、もちろん静止画でも使用可能です。

特徴

■256色のみの対応。
色数の少ないイラストやロゴマークなど、境界線がくっきりしている画像にオススメ。
■写真には不向き。
透過処理が可能。
■アニメーションの設定が可能。
写真
写真
対応している色数が少ないため、なめらかな表現ができません。
色数の多いイラスト
色数の多いイラスト
同じイラストでも、グラデーション等の表現は苦手です。
色数の少ないイラスト
色数の少ないイラスト
くっきりとキレイに表現でき、透過設定もできます。

ホームページでは……

■シンプルなイラスト
■ロゴマーク
にオススメです!

PNG

どんな画像でも劣化することなくキレイに見せてくれる反面、画像の内容によってはデータサイズが非常に大きくなるため、注意が必要です。

特徴

■画質が劣化しない。
色数の少ないイラストやロゴマークなど、境界線がくっきりしている画像にオススメ。
■写真や色数の多いイラストでは、JPGよりもデータが重くなる
透過、半透明の処理が可能。
写真
写真
キレイですが、上記JPG版の約5倍のサイズになりました。
色数の多いイラスト
色数の多いイラスト
こちらはJPG版の約3倍のサイズになりました。
色数の少ないイラスト
色数の少ないイラスト
劣化せず、データサイズも小さく、透過や半透明の設定もできます。

ホームページでは……

■シンプルなイラスト
■ロゴマーク
にオススメです!

BMP

最近は見かけることが減ってきましたが、Windowsをお使いの方なら目にしたことがあるかもしれません。
Webサイト上では使えない形式ですので注意が必要です。

特徴

■Windowsの標準的な形式。
■画質が劣化しない。
■データサイズがJPGよりも大きい。
■RGBのみのサポートで、CMYKは非対応。

まとめ

拡張子名
色数
長所
短所
用途
JPG
1677万色
(24bit)
・データサイズが小さい
・色数が多い
・保存し直す度に画質が劣化
・写真
・色数が多いイラスト
GIF
256色
(8bit)
・透過処理が可能
・アニメーション設定が可能
・色数が少ない
・写真には不向き
・色数が少ないイラスト
・動きが必要な画像
PNG
1677万色
(24bit)
・画質の劣化がない
・透過や半透明の処理が可能
・データサイズが大きい
 (JPEGと比較して)
・色数が少ないイラスト
・透明色を使った画像
BMP
1677万色
(24bit)
・Windowsの標準形式
・画質の劣化がない
・データサイズが大きい
・CMYKは非対応
・高解像度の写真
いかがでしたでしょうか。

今回ご紹介した画像の拡張子についての知識は必須ではありませんが、何かと役立つこともあるかと思います!

Webサイト更新のご担当者のみなさま、画像素材を撮ったり作ったりする際に、目的に合わせて保存形式を使い分けてみてはいかがでしょうか口を広げてにっこりした顔

こちらの関連ページもご覧ください

ホームページ用の写真を撮影するときの、効果的な被写体との距離とカメラ位置を解説!
光の向きと反射を利用して、魅力的な写真を撮影する方法を解説!
ホームページに適した写真の撮り方 (Vol.1)~自社オリジナル写真の重要性~
 失敗しないためのホームページ制作会社(業者)の選び方・比較のポイントとは?
 企業・団体のホームページの開設方法・手順を初心者向けに解説!
CMSとは? その意味と企業ホームページへの導入のメリットを初心者にもわかりやすく解説!
会社のホームページをリニューアルするなら、おりこうブログDSで!
成果の出るホームページ作成講座
日本全国でホームページ無料訪問相談を実施中! ホームページの作成やパンフレットの編集を実際にお試しいただけるおりこうブログDSの無料体験版にもお気軽にお申込みください。
    
TOPへ戻る