Webサイトで扱える画像のファイル形式の特徴をわかりやすく解説!

Webサイトで扱える画像のファイル形式の特徴 Web

Webサイトとで扱える主なファイル形式の特徴を解説していきます。

この記事を参考に、PNG,JPG,SVG,GIFなどそれぞれの特徴や機能を理解して使い分けてみてください。

スポンサーリンク

ファイル形式の種類

ウェブサイトで扱える画像ファイルの形式は、JPG,PNG,SVG,GIFなどがあります。

昔はGIF,JPGが主流でしたが、各ファイルにブラウザが対応しはじめて、今ではPNG,JPGが主に扱われています。

GIFファイルはPNGに取って代わられた印象ですが、アニメーション機能があるため、今でも一部で扱われています。

APNGという、アニメーションするPNGもありますが、こちらはまだ対応しているブラウザが少ないため、現時点では扱う機会が少ない。

ファイルの特徴

GIF/.gif/256色/可逆圧縮/透過機能あり/軽い、アニメーション可/ロゴなど色の少ない画像
JPG,JPEG/.jpg(.jpeg)/約1678万色/非可逆圧縮/透過なし/圧縮率を調整できる/写真など
PNG-8/.png/256色/可逆圧縮/透過機能あり/軽い/ロゴなど色の少ない画像
PNG-24/.png/約1678万色/可逆圧縮/透過機能あり/写真以外だとJPGより軽いことが多い/ピットマップ画像など
SVG/.svg/約1678万色/可逆圧縮/透過機能あり/ベクターデータであり、未対応環境があり/ロゴやアイコン

PNG-8とPNG-24の違い

PNGというファイル形式にはPNG-8、PNG-24があります。

PNG-8はGIFと似ています。色は256色で可逆圧縮、透過機能ありという特徴があります。

一方、PNG-24はJPGと似ています。色は1678万色で可逆圧縮、透過機能あり(アルファチャンネルを持つとPNG-32と呼ばれる)という特徴を持っています。

単色や明らかに色数の少ない画像はPNG-8、色数が多いものや半透明での透過画像はPNG-24が向いています。

JPGとPNG-24の違い

特徴が似ているJPGとPNG-24の違いは大きく分けて3つあります。

一つ目はファイルの容量です。

写真のような色数が多いものだと、同程度の見栄えならJPGの方が大分軽くなります。

Webサイトのスクリーンショットであれば、PNGの方が軽くなります。

二つ目がJPGのみの特徴で、画質を細かく設定できる機能がある点です。

少しでもファイルを軽くしたい場合や、容量制限がある場合に有効です。

三つ目がPNGは可逆圧縮であるという点です。

JPGは保存すればするほど画質が劣化していくのに対して、可逆圧縮であるPNGは何度保存し直しても劣化しません。

扱う画像の色数や今後の運用を踏まえ、JPGかPNGのどちらが良いかを選びましょう。

SVGについて

SVGとは、ベクター形式の画像フォーマットのことで、xml形式のファイルでもあります。

ベクターデータ・ピットマップデータ

ベクターデータとは

ベクターデータとは、数値で形や色を表現しており、拡大縮小しても綺麗な状態を保つことができる形式です。

反対にピットマップデータとは色のドットが集合した形式で100%の状態がベストで、拡大していくとモザイク状のような表示になります。

このような特徴があるため、Retinaディスプレイなどの高解像度画面でも綺麗に表示できるメリットがあります。

またCSSやJavaScriptを用いてアニメーションを加えることができるのも特徴です。

サイトロゴアイコンインフォグラフィックのパーツなどでよく使われています。

SVGのデメリットとしては、対応するブラウザが限られていた時代がありました。ただ、今ではInternet Explorerは9以降、Androidは4以降、GoogleChromeなどのモダンブラウザは初期から対応していますので、大きな弊害は無いかもしれません。

また、SVGの内容や閲覧する環境により、JPGやPNGより表示が遅い場合があります。

SVGファイルの扱い方

PNGなどと異なりSVGは画像でありつつ、xmlでもあり、使用方法がいくつか存在します。

<img>を使う

他の画像と同じように<img>タグで指定する方法。

<img src=”logomark.svg” width=”100″ height”100″>
<object>を使う
<object type=”image/svg+xml” data=”logomark.svg” width=”100″ height=”100″></object>
<svg>を使う
下記は正方形を描画しています。
<svg width=”100″ height=”100″>
<rect x=”10″ y=”10″ width=”50″ height=”50″></svg>
CSSを使う
CSSのbackground-imageプロパティで背景画像として指定できます。
background-image:url(logomark.svg);
注意点
一つは未対応ブラウザの問題です。
上記指定のままでは未対応ブラウザでは表示されないので、代替画像が表示されるように設定する必要があります。
二つ目がリンクの問題です。
ブラウザにより、マウスオーバーしてもカーソルがポインターにならない、SVGの描画領域のみしかリンクとして反応しないといった状況が発生します。
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Web
スポンサーリンク
シェアする
CreaveGraffitiをフォローする
Creavegraffiti | Webマーケティング情報

コメント

タイトルとURLをコピーしました