本文へ移動

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

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

そもそも拡張子とは?

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

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

あわせて読みたい記事


カテゴリー一覧

 業務に役立つ資料集



ABOUT US
DSマガジンは、中小企業17,000社以上のホームページ開設・運用をサポートする株式会社ディーエスブランドが運営するオウンドメディアです。
ホームページの開設はもちろん、アクセス解析やSEO提案などさまざまな視点から「運用」の支援をおこないます。
050-3802-4848
受付時間/9時~18時
(土・日・祝日を除く)
お問い合わせフォーム
TOPへ戻る