ホームページ作成大学

  公開日:2021/10/1

最終更新日:2021/10/1

  • ホームページ作成大学運営

JPEG?GIF?PNG?画像ファイル形式の違いとホームページでの最適な使い方

ホームページの制作やコンテンツを作成する際、たくさんある画像ファイル形式からどれを使用することが適切なのか、迷われる方は多いのではないでしょうか。また、それぞれの画像ファイル形式の特徴が分からない方も多いかと思います。

そこで本記事では、上記のような疑問を感じている方に向けて、ホームページで使用される画像ファイル形式の特徴や最適な用途について解説します。
画像を使ったコンテンツをユーザーにより魅力的に見せるために、ぜひお役立てください。

ホームページ作成によく利用される画像ファイル形式


1.ホームページでよく使用される画像ファイル形式3選

まず、ホームページでよく使用される画像ファイル形式を、3つご紹介します。

JPEG
GIF
PNG

画像のファイル形式は、ファイル名の後に「.○○○」(ピリオド+英文字)と続く文字列で判断できます。
これは拡張子と呼ばれ、そのファイルがどんなファイル形式なのか、どのアプリケーションで扱えるファイルなのかを表す文字列です。

たとえば、「.doc」であればWordで開けるファイルであり、「.xlsx」であればExcelで開けるファイルになります。
これは画像でも同じです。ファイル名の後にある拡張子で、画像のファイル形式が判別できます。
それぞれ順番にご説明します。

1.JPEG


JPEGの特徴

写真や、色の数が多いイラスト、グラデーションを含む画像に適している
画像の保存を繰り返すと画質が劣化する、圧縮してしまうと元には戻らない

1つ目は、JPEGです。JPEGとは「Joint Photographic Experts Group」の略で、「ジェイペグ」と呼ばれています。
拡張子は「.jpg」「.jpeg」となります。
デジカメやスマートフォンで撮影した写真など、色の数が多い画像、色の境目がはっきりしないグラデーションが使われた画像に適した画像ファイル形式です。

JPEGは約1670万色以上の色を使用できるためフルカラー化が容易で、ホームページ上で写真を綺麗に見せられます。
またJPEGは古くから使われている画像の形式で、大体どのブラウザや画像加工アプリケーションでも対応しているため、そういった点でも気兼ねなく使用できます。

しかし一方で、画像の保存を繰り返すと画質が劣化する、一度画像を圧縮してしまうと元の品質に戻らない(非可逆圧縮方式)、などのデメリットもあるため、これらの点については注意が必要です。

例)

JPEG画像① JPEG画像②

2.GIF


GIFの特徴

色の数が少ないシンプルなイラストやロゴに適している
背景を透明にできる
アニメーションができる
色の数が多い写真には向いていない

2つ目は、GIFです。GIFとは「Graphics Interchange Format」 の略で、「ジフ」と呼ばれています。
拡張子は「.gif」となります。

GIFは背景を透明にすることができ、画像の容量も小さいので、色の数が少ないシンプルなイラストや、ロゴなどによく使われます。
また、画像の中に複数の画像を記録できるため、パラパラ漫画のようなアニメーション動画を作ることもできます。

GIF はJPEGとは違い、256色までしか画像に使えません。ですので、写真や使用されている色の数が多い複雑なイラストなどにGIFを使うと、色がうまく表現しきれなかったり、ファイルサイズが逆に大きくなってしまったりすることがありますので、注意が必要です。

GIFを使ったアニメーション動画は、色数やコマ数が多いと、ファイル容量が大きくなってしまいます。そのためアイコンに少しアニメーションを使って動かしたり、数秒の動画を作ったりするのに使われます。

例)

GIF画像① GIF画像②

3.PNG


PNGの特徴

JPEGと同じく約1670万色以上の色を使用できるため、写真などの色数が多い画像に利用できる
背景を透明にできる
画像の保存を繰り返しても、画質が劣化しない
JPEGやGIFよりもファイル容量が大きくなることがある
アニメーションにできない

3つ目は、PNGです。PNGとは「Portable Network Graphics」の略で、「ピング」と呼ばれています。
拡張子は「.png」となります。

JPEGやGIFに比べると、歴史の新しい画像ファイル形式です。GIFに代わる画像ファイル形式として開発されたため、JPEGと同じく約1670万色の色を扱え、GIFと同じく背景を透明にできるという、2つの画像ファイル形式の良いところを併せ持った形式となりました。また、PNG画像は何度保存し直しても品質が劣化しません(可逆圧縮方式)。

まさにいいとこ取りなPNG形式ですが、注意点もあります。フルカラーで使用する際には、JPEGよりもファイル容量が大きくなることがあるのです。
ファイル容量が大きくなると、ホームページを表示するためにダウンロードするデータの容量が大きくなるので、その分表示するのに時間がかかってしまいます。

ホームページを表示するのに時間がかかると、見ているユーザーにストレスを与えてしまい、ユーザーがホームページを離脱してしまうかもしれません。
ですので、PNGは色の数が少ないイラストや、写真を切り抜いて背景を透明にしたい時、画像を劣化させたくない時などに使うことが多いです。

また、GIFの代替として開発されたPNGですが、GIFとは違いアニメーションを作成することはできません。

例)

PNG画像① PNG画像②

2.その他のよく使われる画像ファイル形式4選

ここまで、ホームページでよく使用される画像ファイル形式をご紹介しました。次に、近年開発されこれから利用が進むかもしれない次世代画像ファイル形式や、画像を取り扱う際によく耳にする画像ファイル形式など、知っておきたい形式を4つご紹介します。

WebP
SVG
JPEG 2000
TIFF

1つずつ見ていきましょう。

1.WebP


WebPの特徴

Googleによって開発された次世代画像ファイル形式
同じ品質の画像でもJPEGやPNGよりもファイル容量を小さくできる
背景を透明にできる
アニメーションにできる
圧縮後も元の画質に戻せる
ブラウザやアプリケーションで取り扱いに対応していない場合がある

1つ目は、WebPです。「ウェッピー」と読みます。
拡張子は「.webp」です。

Googleが開発している次世代画像ファイル形式です。最近ではホームページに使われているのを目にする機会も多くなってきました。
ブラウザではGoogle Chromeのほか、Edge・FireFoxなど主要ブラウザで表示できます。

またスマートフォンでは、日本で利用している人の多いiPhone(iOS)で使用されているSafariでも表示対応が予定されています。今後、ホームページの画像はWebPの使用が進むものと思われます。

WebPは他の画像ファイル形式と比較してもファイル容量が小さいです。非可逆圧縮モードで同一、同等画質のJPEGと比較して25~34%、PNGと比較して28%も小さくなります。また、GIFのように透明画像を取り扱え、アニメーション作成ができることから、「JPEG」「PNG」「GIF」のメリットがすべて揃っている画像ファイルです。

デメリットとしては、新しい画像形式なのでInternet Explorer 11では対応しておらず表示ができません。また画像加工アプリケーション(Adobe Photoshop等)や、画像閲覧アプリケーション(Windowsフォト等)では対応しておらず、通常の状態では取り扱えないことが多いです(専用のプログラムをインストールするなどでWebPを取り扱える状態にできます)。

ですが、表示ブラウザの対応の多さ、画像ファイル容量の小ささから、今後ますます使用が進むと考えられる画像ファイル形式です。

2.SVG


SVGの特徴

ベクター形式の画像ファイルなので、拡大縮小しても画像が劣化しない
XMLという文字情報で記録されているので、文字・色・形などをテキストエディタで変更できる
リンクを埋め込めるなどの拡張性が高い
ロゴ、アイコン、地図などの色数が少なくシンプルな画像に向いている
写真など色の数が多い画像には向いていない

2つ目は、SVGです。SVGは「Scalable Vector Graphics」の略で、読み方はそのまま「エスブイジー」と読みます。
拡張子は「.svg」「. svgz」です。

表示できるブラウザが増えたことや、PCサイトからスマートフォンサイトまでひとつのホームページでカバーできるレスポンシブデザインという作成手法の一般化、近年のデザインの主流となるフラットデザイン、これらとSVGは相性が良いこともあり、ホームページで使われるようになってきました。

SVGの特徴は「ベクター形式」の画像ファイルであることです。
下の画像のように拡大するとわかりやすいですが、JPEG・GIF・PNG画像は「ラスター形式」と呼ばれる、点が集まって画像を描写しているファイル形式です。

ですので、拡大すると画像がぎざぎざになってきます。iPhoneのRetinaディスプレイなどの高解像度のディスプレイで表示した際でも画像をきれいに表示させるには、この点をたくさん使い密度を上げ、細かく描写していく必要があります。そうなると、どんどん画像の容量が大きくなってしまいます。

これと比較すると「ベクター形式」はデータが文字情報・数値情報として記録されており、ブラウザがそれをその場で解析して画像描写してくれるため、拡大縮小しても画像がぎざぎざにならないという特徴を持っています。

ラスター画像 ベクター画像
ラスター画像イメージ ベクター画像イメージ

デメリットとしては、色の数が多かったり、複雑な形をしていたりすると当然記録する情報が多くなるためファイルサイズが大きくなります。写真やたくさんの色を使用したイラストなどには向いていません。

SVGはロゴや地図などの色数が少なくシンプルなイラスト画像に使われることが多いです。特に地図では、建物の名前などが変更された際にSVG画像をテキストエディタで開き、文字情報を変更するだけでよいので、とても便利に扱えます。

3.JPEG 2000


JPEG 2000の特徴

JPEGを発展させた形式で、従来のJPEGにあったノイズが出ず、より高い圧縮率できれいに表示できる
圧縮後も元の画質に戻せる
表示できるブラウザが限られている

3つ目は、JPEG 2000です。「ジェイペグニセン」と読みます。
拡張子は複数存在し、「.jpf」「.jpx」「.kjp2」「.j2c」「.j2k」「.jpc」となります。

JPEGを発展させた新しいJPEGの画像ファイル形式です。従来のJPEGでは画像の圧縮率を高くすると、画像ファイルの容量を小さくできる反面、ブロックノイズやモスキートノイズと言われるような画像の乱れが発生しました。JPEG 2000ではそのような画像の乱れが発生しません。

また、従来のJPEGとは違い、一度ファイルを圧縮しても圧縮前の元のデータに戻すことができます(可逆圧縮方式)。

しかしホームページに使うとなると、Google Chrome・Edge・FireFoxなどの主要ブラウザが表示対応していないので、使うことは難しい状況です。現時点ではJPEG2000が指定されているときにのみ使用をおすすめします。

4.TIFF


TIFFの特徴

画像の圧縮方法を選択できるため、画質を劣化させず保存ができる
互換性が高く、様々なアプリケーションで使用可能
印刷現場でよく使用される形式
高解像度できれいな画像で保存できるが、ファイル容量が大きい

4つ目は、TIFFです。「ティフ」と読みます。
拡張子は「.tif」「.tiff」です。
古くから使われている画像ファイル形式です。互換性が高く、様々なアプリケーションで取り扱うことができます。

紙媒体をスキャンして画像化した時や、デジタルカメラで写真撮影をした時などに目にしているかもしれません。画像の圧縮方法が選択でき、画像を劣化させず高解像度できれいな画像で保存ができますが、その分ファイル容量は大きくなります。

その互換性の高さ、画像の劣化が発生しない保存が可能であることから、よく印刷現場で使われる画像ファイル形式です。

ホームページで使うには、高解像度の写真が必要な場合でもJPEG形式で事足りてしまうため、ファイル容量の大きいTIFFはあまり使われません。JPEGの方がファイル容量も小さくできるため、ホームページで使うにはJPEGで十分です。


3.まとめ

以上、ホームページ作成によく使われる画像ファイル形式についてご説明してまいりました。

特にホームページ作成の場合、画像の品質はもちろんですが、表示されるまで時間がかかりすぎないようファイル容量の小ささが求められます。

ホームページで画像を使用する際には、フルカラー写真でもイラスト画像でも、用途に合った、ファイル容量がより小さい画像ファイル形式を選んで使用することをおすすめします。



― Let's Share! ―

早い!安い!かんたん!中小企業にぴったりのBESTホームページ


専門知識不要!たった3分で充実したホームページを作成できます

初期費用0円、月額6,490円(税込)からご利用いただける中小企業におすすめのホームページ作成サービス。

安価でありながら、効果的な運用を支援する機能が満載!
30,000件の制作実績とノウハウにもとづき、113業種に渡って最適なコンテンツ(文章・画像など)をご用意。

質問に答えていくだけで、業種や目的に合ったホームページがあっという間に完成します。
今なら15日間無料体験実施中!ホームページの作成が初めての方も、ホームページのプロが導入をサポートいたしますので、安心してご利用ください。


本記事へのコメントはこちらから

 [必須]


いずれかを選択してください