2015.12.7

WEBサイトの画像を最適化(圧縮・軽量化)してサイトを高速にする方法

圧縮

WEBサイトの画像最適化をしてみます。

そもそも画像最適化って?

普段何気なく見ているWEBの画像には、Exifと呼ばれる日時・場所・機種・画素数などの情報が含まれています。
(直接には見えませんが、データ詳細を見ると分かります)

画像最適化というのは、これらの画像データに含まれる余計なものを消して、データサイズを削減することを言います。多少画像の画質が悪くなる場合もありますが、見比べてみなければ違いが分からない場合がほとんどです。

画像は転送量が大きいため、できれば圧縮したほうがいい

サイトのスピードアップをはかるためには、まずは画像の圧縮を検討したほうがいいでしょう。

画像は他のデータに比べてデータサイズが大きいため、サイトパフォーマンスに大きく影響してきます。そのためサイト高速化をする場合、まずは画像を最適化してみましょう。
画像データによっては、50%以上ファイルサイズを削減できる場合があり、サイトの高速化に繋がります。

もちろん画像が全く使われていないサイトには関係ありません…

画像最適化の方法について

ここではいくつか画像最適化サービスについて紹介していきます。

JPEG軽量化(Windows)

たくさんある中で一部紹介していきます。

JPEGmini

JPEGmini

WEB上でJPEGの画像軽量化ができるサービスです。
画像劣化を抑え、データサイズを削減することができます。

ExifEraser

JPEG画像をドラッグ&ドロップで軽量化することができます。

JPEG軽量化(Mac)

Macであれば以下のようなサービスがおすすめです。

ImageOptim

ImageOptim

ImageOptimはJPEGやPNGを圧縮できます。画像そのものを加工しないため、画質劣化が抑えられます。(その代わり他のサービスよりファイルサイズ削減量が少ないです。)

JPEGmini Lite

ImageOptimよりも大きなファイルサイズ削減が可能です。個人的にほとんど画質が変わらないのでこちらを利用したほうがいいのでは、と思っております。ただ、JPEGmini Liteでは1日最大20枚までの作業しかできません。

JPEGmini

こちらは有料となってしまうのですが、Liteのような制限はなくオススメです。

PNG軽量化

png軽量化でおすすめは以下のwebサービスになります。

TinyPNGドラッグ&ドロップでPNG画像を圧縮できます。元のファイルサイズから70%近くも削減できたりします。画質もほとんど変わりませんのでオススメです。

GIF・SVG軽量化

次はGIF・SVGの軽量化サービスです。

Compressor.io

こちらもWEB上で画像の軽量化が可能なサービスです。GIF・SVGに限らず、JPEG・PNGも可能です。
GIFやSVGが圧縮できるのでオススメです。

これらのサービスを利用することで画像転送量の大幅な削減につながりますね。

WEBに限って言えば、他にもCSSスプライトを使って画像をまとめたサイト高速化の方法もありますね。

こちらのサイトも、WEBフォントとかCSSで表現できない細かな画像についてはCSSスプライトでまとめて表示しています。

もし気になったサービスがあれば是非利用してみては如何でしょうか。