ホームページに利用する画像の種類の特徴を解説【JPG,GIF,PNG,SVG】

by 田村健太

2019年9月28日

ホーム » デザイン » ホームページに利用する画像の種類の特徴を解説【JPG,GIF,PNG,SVG】

ホームページには、様々な画像が利用されます。それぞれ特色がありますので解説します。

JPG

まずは、もっとも一般的に利用される「jpg（じぇいぺぐ）」です。

JPGの特徴は、色合いが豊か（16,770,000色）で軽いデータ量というものが特徴です。

その為、写真などを掲載するのに適しています。

JPGは背景透過させることができないので、PhotoshopやIllustratorで作成した背景透過画像をJPGで書き出すと、透明部分が白色で表現されます。

GIF

続いては、「GIF（じふ）」です。

GIFの特徴は、使用される色数が限定的（256色以下）なのでJPGより圧縮率が高く、データが軽くなります。

ただし、閲覧端末が高精度の発色をする端末が多くなっている為、粗い印象を与えてしまうGIFで写真等を掲載することはありません。

また、背景透過をさせることも可能ですが、背景透過だけの為であれば、後ほど解説する「PNG」の方が優秀な為、そちらを利用することが多いです。

GIF最大の特徴は、「アニメーション」を作成することが可能だという点です。

動画をPhotoshopで読み込むと簡単にGIFアニメ化することが可能です。

PNG

続いては、「PNG（ぴんぐ）」です。

PNGの特徴は、背景透過ができて色合いが豊か（280,000,000,000,000色）というものです。

これだけ聞くと、JPGの出番が無いように思えるでしょう。

しかし、写真データをPNGで表現する必要がなく、PNGで書き出した場合、非常にデータが重くなってしまうという欠点があります。

データが重いとページの表示に時間がかかってしまい、ユーザーが離脱してしまう可能性があります。

その為、背景透過が必要でない写真に関しては、基本的にJPGを使って、背景透過が必要な場合にPNGを使用するのが最適です。

SVG

続いては、「SVG（えすゔいじー）」です。

SVGの特徴は、上の3種とは全く違い「ベクターデータ」というものです。

Illustratorで作成されたベクターデータがWEB上で表示されます。

ベクターデータの特徴は、どんなに拡大しても画像が荒くならないという点です。

その為、最近のWEBサイトはレスポンシブ対応のものが多いと思いますが、どのような端末でも綺麗に画像を表示することが可能です。

また、データが非常に軽いのも特徴です。

もちろんイラストデータなので、基本的に背景透過されます。

CSSでアニメーションを加えることも可能です。

まとめ

画像にはそれぞれ特徴があります。適した画像を配置することで洗練されたイメージのサイトが出来上がります。イメージ通りの画像を利用して最適なホームページを作成しましょう。

NiGLANはもちろんデザインに利用する画像も完全にお任せいただけます。

ホームページ制作の際には、ぜひNiGLANをご利用ください。

田村健太

NiGLAN代表の田村健太です。ブログ歴8年のSEO知識と経験の元、SEOに強いホームページを制作いたします。私のブログも50万アクセスと個人ブログの中でも上位のアクセス数を勝ち取っているので、安心してお任せください。Illustrator,Photoshopの歴は8年、HTML,CSSの歴は4年となっています。