画像拡張子を理解してサイトのパフォーマンスを向上させる

JPEG(Joint Photographic Experts Group)

読み方：ジェイペグ

よく使われる用途：写真

拡張子：jpg、jpeg

メリット

高画質でファイルサイズが小さく写真に利用されるシーンが多く、

Webサイトでの利用頻度は一番多いかもしれません。

デメリット

繰り返し保存することで画質が劣化します。

背景を透明化できない。

ロゴやイラストには不向き。

GIF(Graphics Interchange Format)

読み方：ジフ

拡張子：gif

よく使われる用途：ロゴ、イラスト

メリット

データ容量が少ないためロゴなどのシンプルな画像に最適です。

アニメーションが作成可能。

背景を透明化して画像に重ねることもできます。

デメリット

写真に不向き（CMYKのカラーモード使用不可）。

アニメーション以外ではPNGが適していることが多いです。

PNG(Portable NetWork Graphics)

読み方：ピング

拡張子：png

よく使われる用途：イラスト、ロゴ

メリット

256色からフルカラーの可逆式圧縮が使用可能。

GIFと同様、背景を透明化できます。

デメリット

フルカラーでは可逆式圧縮のため、JPEGより容量が大きくなります。

アニメーションの作成はできません。

SVG(Scalable Vector Graphics)

読み方：エスブイジー

拡張子：svg

よく使われる用途：ロゴ

メリット

画像を拡大・縮小しても画質が劣化せずに綺麗に表示が可能。

近年レスポンシブデザインが主流なのでWebサイトではよく使われます。

デメリット

ブラウザによっては表示できません（IE8以下およびAndroid 2.3以下で表示できない）。

その場合はPNG・GIFで代用しましょう。

BMP(Microsoft Windows Bitmap Image)

読み方：ビーエムピー

拡張子：bmp

よく使われる用途：Windowsの標準的な静止画像ファイル

メリット

無圧縮なので、画像の劣化がほぼないです。

Windowsの標準なのでよく使われることがあります。

デメリット

無圧縮なので容量が大きい。

背景を透明化できません。

無圧縮なのでファイルサイズがかなり大きく、Webでは扱えない形式です。

RAW(Raw Image Format)

読み方：ロウ

拡張子：raw

よく使われる用途：デジタルカメラの撮影写真

メリット

画像修正時の画質の劣化を避けられます。

デメリット

画像が見れるソフトが限られています。

無圧縮なのでファイルサイズがかなり大きく、Webでは扱えない形式です。

TIFF(Tagged Image File Format)

読み方：ティフ

拡張子：tif、tiff

よく使われる用途：印刷業界、デジタルカメラの撮影写真

メリット

無圧縮なのでJPEGよりキレイに印刷できます。

大きな画像が必要な場合などに用いられることが多いです。

デメリット

無圧縮なのでファイルサイズがかなり大きく、Webでは扱えない形式です。

どの拡張子を選んだらいいか悩んだら

写真場合の場合・・・JPEG

ロゴやイラストの場合・・・SVGが最適！なければGIFまたはPNGのどちらか

アニメーションの場合・・・GIF

高解像度で見たい、印刷したい場合・・・RAW、TIFF、BMP

以上です。

7つ紹介しましたが、Webでのよく使われるのはSVG、JPEG、GIF、PNGの4つです。

4つの拡張子の特徴は

GIF、JPEG、PNGなどは「ラスタ形式」といい、拡大しすぎると画像はボケてしまいます。

SVGは「ベクトル形式」 といい拡大縮小しても画像はきれいなままです。

この点についても抑えておきましょう。

とにかくWebで扱うには、軽く・小さく・きれいの三拍子が揃った画像がいいですね。

ECサイトや通販サイトでは大量の画像を取扱いますが、

画像サイズが大きく数が増えれば増えるほどインターネットでの表示速度が遅くなります。

サイト表示が2秒遅いだけで直帰率は2倍になってしまうこともあるので、

それだけ画像の容量を注意を払うことが必要です。

拡張子や画像サイズにこだわってパフォーマンスの高いサイト運営をしていきましょう。

新規Webサイト制作・リニューアルのサービス内容はこちらから

Written by koyama