Webページの読み込みスピードを高速化すると、ユーザビリティの改善や検索エンジン対策につながります。
それを実現する1つの手段として、サイトに表示させる画像を圧縮するという方法があげられます。
そこで今回はそんな画像を圧縮する際に便利なツールを5つほどご紹介します。
また後半では、番外編として画像を圧縮する時の、GIF、JPEG、PNGの定義などを解説しています。
ぜひ最後までご覧になってください。
画像を圧縮する5つの方法
Compressor.io
Compressor.ioは、JPG・PNG・GIF・SVGの4形式の画像を無料で圧縮できるツールです。
さらにアカウント登録が不要で、画像をブラウザでアップロードするだけで瞬時にファイルサイズを圧縮できます。形式を考えずに処理したいときに使えます。
圧縮する際には、圧縮率を重視する非可逆圧縮(Lossy)か元の画質をキープする可逆圧縮(Lossless)のどちらかを選択することが可能です。（可逆圧縮はJPGとPNGのみ対応）
Tinypng
Tinypngは、PNGの画像ファイルを圧縮できるツールです。こちらも無料。
ブラウザに表示された「Drop your .png files here!」という部分に画像をドラッグ＆ドロップするだけで、画質をほとんど劣化させずにファイルサイズを下げることができます。
1度で20枚まで同時に処理ができ、1枚あたり3MBまでアップロードが可能です。複数同時に処理できるので重宝しています。
→ Tinypng
JPEGmini
Jpegminiとは、JPEGの画像ファイルをほとんど劣化させずにファイルサイズを圧縮してくれるツールです。（JPEGminiのWeb版）
独自の画質検出機能により画像を分析し、異物等が生じない許容範囲内で最大限の圧縮をかけます。JPEGの規格の範囲内で可能な最大限の圧縮をかけることができます。
無料版で処理できるのは１日20ファイルまでと制限があります。（有料版は$19.99）
→ JPEGmini
Optimizilla
Optimizillaは、画質がどの程度落ちているのかを確認しながら画像のファイルサイズを圧縮できるツールです。
JPEGminiやTinyPNGで複数画像をアップロードしようとすると、時間がかかったり失敗することがあります。そういうときにOptimizillaは威力を発揮します。
最大20枚選択することが可能で、最大の特徴はやはり、アップロードした画像をズームしながら圧縮前、圧縮後で比較できるところです。
いかがでしたか？
他にも便利なツールはありますが、この4つの画像圧縮ツールを知っていれば、だいたいの状況はカバーできるのではないでしょうか。
4形式の画像圧縮をおさらい
GIF（Graphics Interchange Format）
GIFとは、Graphics Interchange Formatの頭文字をとって付けられた名称で、画像ファイルフォーマットの種類の一つです。
パラパラ漫画のようなアニメーション化することができることが最大の特徴です。
GIF画像には「GIFアニメーション」という機能があり、複数の画像を一つにまとめることで、パラパラマンガに近いアニメーションを作ることが出来ます。形式上は画像なのに、動画のように見える理由はこれです。
使える色が256色と少なく、使用する色数が増えると容量が大きくなってしまうデメリットがあるので、風景写真など多彩な色の変化がある画像には不向きであるといえます。
JPEG（Joint Photographic Experts Group）
JPEG形式はフルカラーの1,677万色を表現することができ、風景写真など色合いにグラデーションがある画像に適しているファイル形式です。
写真などの色の変化が激しく、細かく分散している画像の圧縮に適しています。
しかし、平坦な色の背景に単線の線画があるような単純画像のロゴ画像やイラストでは、見栄えが悪くなる場合があります。また、画像を不可逆圧縮するため一度圧縮させると元の高画質な画像に戻すことはできません。
PNG（Portable Network Graphics）
「ピン」や「ピング」と呼ばれるフォーマットで、GIFが特許問題で使用制限がかかったために開発された画像フォーマットです。
JPEGと違い画像を可逆圧縮するので、画像圧縮させても画像劣化がないのが特徴です。
使える画像も48bit（約280兆色）の色数に対応していますがRGBのみのサポートのため、印刷の用途に利用すると正しく出力されない可能性があります。
デメリットとしては、GIFよりも画像圧縮性能があるもののアニメーションが標準で実装されていない。JPEGよりも色数が多いが、画像圧縮の効率が落ちてしまうことが懸念点です。
SVG（Scalable Vector Graphics)
SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。
SVGを利用することで、拡大縮小に強く画質が劣化しないため、 どのような画面上であっても鮮明かつ明瞭な画像を表示できるというメリットがあります。
また、SVGファイルはXMLに準拠しているという特徴も持っているため、テキストエディタで開きファイルを編集することが可能です 。
しかし、複雑な計算式で画像を描写しているため、腹圧で繊細な配色や輪郭の画像描画には適していません。
まとめ
以上が無料で簡単に画像ファイルを圧縮できる5つのサービスと各画像圧縮のおさらいでした。
自分にぴったりの画像圧縮サービスを利用してみてください。
この記事が少しでも参考になれば幸いです。
