Web制作において見た目の美しさや使いやすさも大切ですが、ユーザーのストレスを軽減することも重要です。
ユーザーがWebサイトを閲覧したときに、ストレスを強く感じるのは、Webサイトが表示されるまでの時間になります。
表示スピードが遅いだけで、Webサイトから離脱するユーザーは少なくありません。
Googleの検索アルゴリズムにも、表示スピードを評価の対象にしていることを公式発表しています。
つまり、表示スピードが遅いことで、ユーザーの離脱率も上がり、SEOの観点からもよくありません。
Webサイトの表示スピードを速くする手段として、有効なのが画像圧縮です。
画像処理には時間がかかるため、画像圧縮をすることで飛躍的に表示スピードを上げることができます。
今回は、プロの現場でも使用されている画像圧縮できるツールを紹介します。
圧縮について
圧縮とは容量（ファイルサイズ）を削減することです。
圧縮できるデータは画像だけでなく、テキストファイル、動画、音楽など様々なものを圧縮できます。
データを圧縮することで、データの送信、ダウンロードにかかる時間を短縮できるところがメリットです。
圧縮は、「可逆圧縮」と「非可逆圧縮」の2種類があり、それぞれのメリット・デメリットは以下のようになります。
可逆圧縮のメリット・デメリット
メリット
・圧縮と解凍（ファイルの容量を元に戻すこと）を繰り返すことができる
・解凍してもデータの質は変化しない
デメリット
・圧縮率が低い
・使用する前に解凍する必要があるので、手間がかかる
可逆圧縮は、何度も圧縮することができる上に、複数のデータを1つのファイルにまとめて圧縮できるので、非常に便利です。
非可逆圧縮のメリット・デメリット
メリット
・圧縮率が高い
・解凍する手間がかからない
デメリット
・一度圧縮すると元に戻せない
・データの質が低下する
圧縮方法には、この2つがあることを覚えておいてください。
画像を圧縮するメリット
画像を圧縮するメリットは、大きく分けて、「サーバー容量の節約」と「Webサイトの表示スピード向上」の2つです。
1つ目のメリットであるサーバー容量の節約は、画像を圧縮することでサーバーにかかる負荷や容量を削減することができます。
使用できる容量が決まっているレンタルサーバーを使っている場合は、画像を圧縮してからアップロードするのがオススメです。
2つ目のメリットであるWebサイトの表示スピードの向上は、画像圧縮することで、パソコンだけではなく、スマートフォンで閲覧する場合でもスピーディーに表示することができます。
特に最近ではスマートフォンで閲覧する機会が増えているため、スマートフォンに最適化した画像の準備をする必要があります。
画像圧縮は当たり前？
今では、ほとんどのWebサイトが画像を圧縮してから掲載するようにしています。
（例外として、画像をメインコンテンツとしている場合や美しさにこだわりがある場合は圧縮していないWebサイトもあります。）
企業のホームページだけでなく、個人で運営されているブログのほとんども画像圧縮するのが主流です。
画像圧縮すると画質が劣化しますが、肉眼では画質が劣化したことを確認するのはほぼ不可能なので、画質にこだわりがない方は圧縮することをオススメします。
形式の違い
画像の保存形式（拡張子）は、「.jpg」、「.jpeg」、「.png」、「.gif」、「.bmp」、「.tiff」など様々な種類があります。
保存する形式によって、それぞれの特徴や違いを説明します。
JPG・JPEG
画像の保存形式として、昔から存在しており、知名度が高いのは、JPGとJPEGの2つになります。
JPGとJPEGは表記は違いますが機能性では全く同じです。
一般的に写真などの保存形式は、JPGとJPEGのどちらかを選択するのが多いです。
一番のメリットはファイル容量が非常に小さいことになり、人間の目では確認できない細かなデータを削除するため、保存する情報量を必要最小限に保つことができます。
非可逆式圧縮方式で圧縮するため保存する度に画質が劣化され、元の画質に戻すこともできないので、使用する場合は注意が必要です。
非可逆式圧縮は画像の編集の有無に関わらず、画像を保存しただけで画質が劣化します。
JPG・JPEGのメリット
・ファイルサイズが小さい
・写真の保存形式に最適
JPG・JPEGのデメリット
・画質の劣化
・背景を透明にできない
「.jpg」と「.jpeg」は保存すると画質が劣化しますが、ファイルをコピーしただけでは劣化しません。
保存とコピーでは、違いがあることを覚えておきましょう。
PNG
1996年に登場したPNGは多用は機能を持ち合わせており、様々な場面で使用することができます。
PNGには、8bit（PNG-8）と24bit（PNG-24）の2種類があり、それぞれ使用用途によって使い分けれることができます。
8bit（PNG-8）は、256色で保存することができ、イラストなどを保存するのに最適です。
24bit（PNG-24）は、8bit（PNG-8）よりも表現できる色の数が多く、写真などを保存することに向いていますが、ファイルの容量が大きくなってしまうことが難点になります。
PNG-24とJPG・JPEGの違い
「PNG-24」と「JPG・JPEG」との違いは、圧縮形式とファイル容量になります。
PNG-24は可逆圧縮のため、何度保存しても劣化することはありませんが、ファイルの容量が大きくなります。
反対にJPG・JPEGは非可逆圧縮のため、保存する度に劣化しますが、ファイル容量が小さくなるのが特徴です。
PNGのメリット
・イラストやロゴの保存形式に最適
・背景を透明にできる
PNGのデメリット
・ファイルの容量が大きくなる
GIF
GIFはPNG-8と同じように、256色を扱うことができます。
単色や色数の少ないイラストやロゴを保存する形式として最適ですが、写真やスケッチのように多数の色を必要とする画像には不向きです。
GIGの最大の特徴は、アニメーションを作成できるところです。
動画ほど滑らかではありませんが、パラパラ漫画のように動きをだすことができます。
GIFのメリット
・アニメーションが作成できる
・イラストやロゴの保存形式に最適
・背景を透明にできる
GIFのデメリット
・写真やスケッチなどの保存には不向き
・アニメーション以外はPNG形式を使用されることが多い
BMP
BMPはWindowsの標準の画像フォーマットになり、Windowsに搭載されているペイントソフトを使用して、保存した場合、「.bmp」形式で保存されます。
昔は見かけることもありましが、上位互換された拡張子が登場したため、最近では、目にすることがほとんどなくなりました。
BMPのメリット
・Windows標準の拡張子
・圧縮されていないので、劣化する心配がない
BMPのデメリット
・ファイル容量が大きい
・背景を透明にできない
・最近では使用される機会が少ない
TIFF
TIFFの特徴は圧縮することなく保存することになり、圧縮によって画質が劣化することがないので、美しい状態のまま保存することができます。
そのため、画像はすごく綺麗ですが、ファイル容量がとても大きくなってしまいます。
Web上でそのまま使用することはできず、使用する場合はJPEGなどに変換する必要があります。
TIFFのメリット
・無圧縮なので画像を綺麗に保存できる
TIFFのデメリット
・ファイル容量が大きくなる
・Web上で使用することができない
どれがオススメ？
それぞれの形式の違いや特徴を理解していただけたと思いますが、実際に使用する場合はどの形式がオススメになるのでしょうか。
Webで使用する場合は、「JPG・JPEG」、「PNG」、「GIF」の3つをメインに使用します。
使い分けは以下のようになります。
JPG・JPEGの使用用途
Webサイトのトップ画像や記事コンテツ内に使用される場合が多い
PNGの使用用途
Webサイトのロゴやイラストなどに使用される場合が多い
GIFの使用用途
アニメーションを作成する場合に使用される
1つの形式だけを使用するだけではなく、使用用途に応じて使い分けることが大切です。
オススメの画像圧縮ツール
画像圧縮ツールはインストールして使用するソフトもあれば、Webサービスを利用することでWebだけで完結させることもできます。
使いやすい便利な画像圧縮サービスを紹介します。
比較をわかりやすくするため、同じ画像を圧縮します。
圧縮する前の画像がこちらになります。容量は239KB。
Optimizilla
圧縮率が非常に高く、JPEGとPNGの両方に対応しているのが大きな特徴なり、最大20枚同時に圧縮することができます。
スライダーで簡単に圧縮率を変えることもでき、操作が非常にシンプルなところが人気の理由です。
「すぐに使うことができて、操作が簡単なツールがいい」と思う方にはこのサイトをオススメします。
クオリティ90の場合、圧縮後の容量：65KB
TinyJPG
トップのパンダが印象的なこのサイトは、PNGとJPGの両方に対応しています。
一度に圧縮できる容量は、20枚までの5MBまでになっており、圧縮完了後はパンダが両手を挙げて喜んでくれます。
圧縮率を選ぶことができないところがデメリットです。
圧縮後の容量：64KB
Compressnow
JPEG、PNG、GIF形式に対応しており、9MBまでの場合、一度に複数のファイルを圧縮することができます。
スライダーを使って圧縮率を変化させることができ、1%単位での調整が可能です。
無料かつ高機能なので、愛用する方が多数います。
Compression Level40%の場合、圧縮後の容量：34KB
圧縮後の容量：34KB
JPEGmini
オンラインでも使用できますが、インストールして使用することもできます。
無料版では1日に20枚まで圧縮することができますが、PNGには対応しておらず、圧縮率を調整できないのが難点です。
149ドルで有償版を使用することもできます。
圧縮後の容量：43KB
mozjpeg encoder
使いやすいブラウザとして人気のある、Firefoxを開発したMozillaのプロジェクトチームがリリースしている画像圧縮ツールになります。
JPEG、BMPに対応しており、スライダーで圧縮率を調整できます。
特に素晴らしいのが、圧縮にかかる時間が短く、一瞬で圧縮が完了します。
広告もなく、スッキリとしたデザインなので直感的に操作することが嬉しいところです。
圧縮後の容量：65KB
Compress PNG Images Online
PNG、JPEG、PDFに対応しており、最大20枚までの同時圧縮が可能です。
圧縮後は個別ダウンロード、ZIP形式での一括ダウンロードすることもできます。
圧縮後の容量：64KB
Compressor.io
サイトを訪問すると大きなカメレオンが迎えてくれます。
JPEGとPNGの両方に対応しており、可逆圧縮と非可逆圧縮の両方を選択することができます。
圧縮に多少時間がかかってしまう点がデメリットです。
圧縮後の容量：68KB
J I C – a Javascript Image Compressor
シンプルなデザインと機能で、使いやすいのが「J I C – a Javascript Image Compressor」です。
圧縮率も簡単に変更することができるのでとても便利です。
難しい機能や、長い説明文などは一切なく、感覚的に使用できるように設計されています。
圧縮後の容量：34KB
JPEG Optimizer
圧縮とリサイズを同時におこなうことができるツールになります。
圧縮率を変更することはできませんが、リサイズも同時にできるため、加工の手間を省くこともできるのが魅力です。
圧縮後の容量：46KB
Image Optimizer
Web上で使用することもできますが、インストールしてオフラインでも使用することができます。
圧縮したい画像を選ぶだけで、自然と圧縮できるのでとても使いやすいのがメリットです。
圧縮率は数値やスクロールバーで設定するのではなく、「Minimum file size」、「Very small file size」、「Small file size」、「Normal」、「High quality」、「Best quality」の6つの中から選ぶ形式になっているので、初心者の方も迷うことなく、使用できます。
圧縮後の容量：58KB
Online GIF optimizer
このツールは、機能性が高いことで有名です。
圧縮ツールでは、珍しいGIFアニメの容量を軽減してくれるサービスもあり、GiFアニメだけでなく、PNGやJPEGなども圧縮することもできます。
圧縮後に画像のサイズ変更、テロップ挿入、GIF形式への変換もできます。
様々な機能が搭載されているので、初心者からプロの方まで幅広く使われています。
圧縮後の容量：51KB
RESIZE IMAGE ONLINE
このツールは、JPEG、BMP、GIF、PNGなど幅広い形式に対応しているのが特徴です。
使い勝手や機能性は他のツールとほぼ同じになります。
多様な形式の画像を扱う方にオススメのツールです。
圧縮後の容量：79KB
PunyPNG
Webサイトの名前には「PNG」とついていますが、圧縮できるファイル形式は、PNG、JPEG、GIFの3種類に対応しています。
同時に圧縮できるファイルの数は最大20個までになっており、最大500MBの画像を圧縮できます。
500MBまでの画像にも対応しており、GIF形式にも対応しているのがこのツールの魅力です。
無料版でも問題なく、使用することができますが、有料版に切り替えることで、圧縮率を高めることができます。
圧縮後の容量：79KB
GIMP２
JPEG、PNG、GIF、TIFF、PSDなど複数の形式に対応しており、無料で使用できます。
ダウンロード版の使用でき、簡単な加工や編集もできるので、非常に便利なツールになっています。
全て英語で表記されているため、英語が苦手な方には少し使いにくところがマイナスポイントです。
圧縮後の容量：56KB
縮小専用AIR
画像圧縮ツールは、英語表記のツールが多く、日本語対応していないものがほとんどですが、縮小専用AIRは日本語表記になっており、誰でも簡単に使用できます。
「画像サイズ」、「保存先オプション」、「画像効果」の3つを設定することで画像を圧縮できます。
ブラウザで使用することはできず、使用するためにはダウンロードが必要になります。
圧縮後の容量：63KB
紹介したツールを比較すると以下のようになります。
| サービス名 | ファイル容量 |
|---|---|
| Optimizilla | 65KB |
| TinyJPG | 64KB |
| Compressnow | 34KB |
| JPEGmini | 43KB |
| mozjpeg encoder | 65KB |
| Compress PNG Images Online | 64KB |
| Compressor.io | 68KB |
| J I C – a Javascript Image Compressor | 34KB |
| JPEG Optimizer | 46KB |
| RESIZE IMAGE ONLINE | 79KB |
| PunyPNG | 79KB |
| GIMP２ | 56KB |
| 縮小専用AIR | 63KB |
ページ軽量化のコツ
画像圧縮以外のWebページを軽量化する方法を紹介します。
画像サイズ
画像を圧縮するのはページを軽量化する有効な手段ですが、画像サイズを変更することで、より軽量化することができます。
スマートフォンやデジカメで撮影した写真やスクリーンショットなどをそのままのサイズで使用すると、ファイルの容量が大きなり、Webサイトの表示スピードが遅くなってしまいます。
基本的に横幅1000px以上の画像がスマートフォンでの閲覧に適応していないため、画像サイズを小さくした方が、ページを軽量化できる上に見やすいレイアウトにもなるので一石二鳥になります。
画像サイズを小さくするだけでも、ファイル容量を削減することができるので、圧縮だけでなく、画像サイズにも気をつけましょう。
ソースを最適化する
少しの工夫だけでページを軽量化することができます。
例えば、CSSやjavascriptの読み込む順番を変えるだけでも時間を短縮できます。
他にも以下のような方法があります。
・ページ要素をできる限り減らす
・CSSで代替できる場合は、画像を使用せずCSSを適用する
・スタイルシートを1つにまとめる
無駄をできる限り減らすことを常に心がけましょう。
プラグインの数を減らす
CSSやjQueryなど様々なプラグインが提供されていますが、多用するとサイトの表示スピードが遅くなります。
プラグインは表示スピードを遅くするだけではなく、セキュリティの面でも危険です。
Webサイトをハッキングする手口として、プラグインのセキュリティホールを狙うケースが増えています。
ページ軽量化やセキュリティ強化のためにも、プラグインは必要最低限にしておきましょう。
SNSボタン
ツイッターの拡散ボタンやフェイスブックのいいねボタンの読み込みにはかなり時間がかかります。
しかし、今やソーシャルで拡散することは必要不可欠なので、シェアボタンを削除することはできません。
対策方法としては、ページの最後の方にSNSボタンを設置することで、コンテンツを先に読み込ませることができます。
このようにすることで、コンテンツが先に表示され、ユーザーはストレスを感じることなく、閲覧できます。
アニメーションや動的なデザインはCSSを使用する
アコーディオンやドロップダウンメニューなどはjavascriptやjQueryを使って実装することもできますが、読み込みが遅くなってしまう難点があります。
javascriptやjQueryの代わりにCSSを使うことで、デザインや機能性を変更せずに、ページを軽量化することができます。
javascriptやjQueryの使用はできるだけ避け、CSSを使うことがオススメです。
処理の早いプログラムを書く
javascriptには、処理に時間のかかるプログラムや高速で処理されるプログラムなど様々なものがあります。
処理に時間のかからないプログラムを書くことで、ページの読み込み速度が大きく変わります。
プログラム動作や表示速度を上げるために、処理速度の早いコードを書くようにしましょう。
エラーがないかチェックする
エラー部分があることで、Webサイトの読み込みが遅くなる上に、コンテンツが正しく表示されない可能性もあります。
文法にエラーがないか、必ず確認するようにしましょう。
エラーの例として、以下のようなものが挙げられます。
・404 Not Found
404 Not Foundはサーバーとの通信、応答までの待ち時間などWebサイトの表示を遅らせる大きな原因になります。
必要以上のソースを消費するので、注意が必要です。
・javascriptエラー
javascriptエラーは404 Not Foundと同じように、多くの無駄を発生します。
javascriptの文法エラーは気付きにくいので、改めてエラーがないかチェックしてみてはいかがでしょうか。
・imgタグを空にしない
imgタグを空の状態にすることで読み込むスピードも遅くなり、ブラウザによってはWebサイトのレイアウトが崩れたりなど様々な障害がおきます。
imgタグを空の状態のまま放置せず、不必要な場合は削除するようにしましょう。
表示速度を確認する
コンテンツの軽量化を確認するために、必ず表示速度を確認するようにしましょう。
表示速度を確認するツールを紹介します。
PageSpeed Insights
Googleの公式ツールとして人気を集めているのが、「PageSpeed Insights」になり、無料で使用できます。
WebサイトのURLを入力するだけで、ページの表示速度や改善案を提示してくれます。
Googleの公式ツールという信頼性と使いやすさが人気の秘密です。
GTmetrix
こちらも無料で使えるツールになり、表示速度や合計のページサイズなどを表示します。
ページ別で表示されるまでの時間が計測されるので、より細かいデータを集計できることが優れている点です。
まとめ
Webサイトのレイアウトやデザインにこだわる方は多いですが、表示速度を気にしている方は比較的少ないように思います。
ユーザーが快適に使用するためには、Webサイトの軽量化は必須です。
あまり知識のない初心者の方は、画像を圧縮してから使用するだけでWebサイトをかなり軽量化できるので、ぜひ試してください。
画像圧縮に必要となる時間はわずかなので、忙しい方でも簡単にできます。
画像圧縮だけでなく、コードを少し変えるだけでも軽量化することも可能です。
ページを軽量化するために様々なツールが開発されているので、ぜひ使ってみてください。