Webサイトの表示速度を高めるために効果的な方法のひとつが画像の圧縮です。画像を適切な容量に圧縮し、Webコンテンツに利用することで、サイト表示速度を改善し、SEO評価も高めることができます。この記事では、オウンドメディアや自社サイトを運営している担当者の方に知ってもらいたい「画像圧縮の必要性」と「おすすめの画像圧縮ツール」についてご紹介します。

画像をそのまま使用すると何が起こる?

画像をそのまま使用すると何が起こる?

デジタルカメラで撮影した写真や写真素材サイトからダウンロードした素材などは、少なくとも数MBのデータ容量があります。これをそのままWebサイトにアップロードすると、コンテンツの読み込みに時間がかかり、サイトの表示速度(サイトスピード)を大幅に低下させてしまう原因になります。

サイトの表示速度が遅くなると、以下のような問題が生じやすくなります。

  • ユーザーに不快感やストレスを与え、ユーザービリティが低下する
  • 検索エンジンからの評価が下がり、ページの検索順位が落ちる

サイト表示速度の速さはユーザービリティと密接な関係があります。もし、質が同じ程度のコンテンツがあり、ひとつは表示速度が速く、もうひとつは表示速度が遅かったとしたら、あなたはどちらのコンテンツを選びますか?

おそらく前者でしょう。いくらコンテンツの中身が良くても、サイト表示速度が遅ければユーザーの離脱を招き、大きな機会損失になります。実際に検索エンジン大手・Googleの調査によると、表示速度が1秒から3秒になると、ユーザーの離脱が30%以上増加することがわかっています。

また、ユーザービリティはSEOにも影響を与えます。検索エンジンはユーザーに有益なサイトを高く評価するアルゴリズムを採用しているため、サイト表示速度も当然その要因のひとつに含まれています。

サイト表示速度が遅いサイトは、検索エンジンからの評価も下がり、検索順位を落とす可能性があります。近年、検索エンジンでの上位表示を狙うSEO対策として、サイト表示速度が重要視されているのもこのためです。

ちなみに、GoogleはWebサイト1ページあたりに使用するデータ容量の目安として1.6MB以内を推奨しています。これは、スマートフォンユーザーも快適にサイト閲覧できるひとつの基準とされています。

どのようなデバイスから閲覧しても、高いユーザービリティを実現し、検索エンジンからも評価されるサイトを構築するためには、画像の容量を圧縮し、ページの軽量化を図ることが必須です。

画像ファイルの種類

画像の容量は、画像ファイルの保存形式によっても異なります。よく使われる画像ファイルの保存形式には「GIF」「PNG」「JPEG/JPG」の3つがあります。ここでは、これらの保存形式の特徴や違いについてそれぞれご説明します。

GIF

GIFは、256色で表現される画像の保存形式です。可逆圧縮に対応しており、保存を繰り返しても劣化しないという特徴があります。背景を透明にする「透過処理」に対応しており、アニメーションの作成にもよく使われています。単純なロゴ画像やアニメーションの作成に適している保存形式です。

PNG

PNGは、PNG-8、PNG-24、PNG-32の3種類があり、それぞれ以下のような特徴があります。

 色数透過処理
PNG-8256色(2の8乗)○対応
PNG-24約1677万色(2の24乗)×非対応
PNG-32約1677万色(2の24乗)○対応

通常、フルカラーのPNGと言えば、PNG-32であることが多いです。透過処理にも対応でき、保存を繰り返しても劣化しない(可逆圧縮できる)のが特徴で、ロゴやアイコン、イラストなどによく使われます。

JPEG/JPG

JPEG/JPGは、RGB(赤・緑・青)という光の3原色の組み合わせで表現できる約1677万色からなる画像の保存形式です。豊かな色彩を表現でき、高精細な画像の保存に適しています。しかし、透過処理には非対応で、保存するたびに画像が劣化する(非可逆圧縮)という性質があります。通常の写真データによく用いられている保存形式です。

オンラインで画像圧縮ができるおすすめサイト

オンラインで画像圧縮ができるおすすめサイト

画像のデータ容量を圧縮する方法には画像編集ソフトを使ったり、オンラインツールを使ったりする方法がありますが、ここでは無料で誰でも簡単にできる便利なオンラインツールについてご紹介します。ツールにはそれぞれ特徴があり、対応できる画像形式も異なるので、利用目的に応じて選ぶと良いでしょう。

TinyPNG(英語)

TinyPNGは、PNGとJPEG/JPGの画像圧縮ができる海外のオンラインツールです。フルカラー(約1677万色)を256色に減色することにより、画質をほとんど落とさずに圧縮することができます。一度に20ファイル(1ファイルあたり5MBまで)圧縮でき、画像容量を60~80%程度軽くすることができます(※圧縮率は画像によって異なります)。

また、WordPressサイトの場合は「Compress JPEG & PNG images」という専用のプラグインも提供されています。画像ファイルをWordPressにアップロードするだけで自動的に画像を圧縮でき、月間500枚まで無料で使えるのでとても便利です。使用するためには、無料アカウントの登録が必要です。

Optimizilla

Optimizillaは、PNGとJPEG/JPGの画像圧縮ができる海外のオンラインツールで日本語にも対応しています。画像をアップロードした後、サムネイルをクリックすることで、実際に画質を確認しながら圧縮できるのが特徴です。画像を圧縮したいが、画質にもこだわりたい方には便利です。

一度に20ファイルまで圧縮でき、画像容量を60~80%程度軽くできます(※圧縮率は画像によって異なります)。

Squoosh(英語)

Squooshは、GoogleChromeLabsが提供している画像圧縮ツールです。PNGとJPEG/JPGの画像を圧縮でき、従来の画像形式を高画質のまま圧縮できる新しいフォーマット(MozJPEG、OxiPNGなど)に対応しています。画像の圧縮だけでなく、リサイズも同時にできる点がとても優れています。

また、画像圧縮をWebサーバー上ではなく、ローカル環境(パソコン内)で行えるため、セキュリティ面でも安心して利用できます。ただし、複数画像を一度に圧縮はできないため、少ない画像を高画質で圧縮したい方向けのツールです。

iloveIMG

iloveIMGは、GIF、PNG、JPEG/JPGの画像圧縮ができる海外のオンラインツールで日本語にも対応しています。画像をアップロードするだけで自動的に画質を最適化してくれ、複数ファイルを一度に圧縮できます。

GIFで作成したアニメーションも圧縮できるのが他のツールとの大きな違いで、さまざまな保存形式の画像を使ったり、GIFアニメーションを多用したりするサイトではとても重宝します。シンプルな操作でサクサク動くため、初めて画像圧縮ツールを使う方にもおすすめです。

画像圧縮

画像圧縮は、ラッコツールズを手がけるラッコ株式会社が提供している国内のオンライン画像圧縮ツールです。画質を「低」「中」「高」の3種類から選択でき、「中」でもかなりの容量を圧縮できます。画質を落とさずに容量のみ圧縮したい場合は、「中」の設定がおすすめです。

複数ファイルの一括圧縮も対応可能であるため、大量の画像を使いたい場合にも便利です。PNGとJPEG/JPGの画像に対応していますが、PNGの場合はあまり圧縮率が高くないため、主にJPEG/JPGを使っている方向けのツールと言えます。

画像圧縮でユーザービリティやSEO評価を高めサイトの成果を最大化しよう

オウンドメディアや自社サイトの運営において、画像の圧縮によるページの軽量化はとても重要です。ページの軽量化はサイト表示速度を高め、ユーザービリティの向上や検索エンジンからの評価獲得にもつながります。サイト運営を通じて、快適なユーザー体験を提供することが、ブランディングや顧客獲得などの成果を最大化する秘訣です。

この記事を参考に、あなたのWebサイトにあった画像圧縮ツールを使い、ユーザーにも検索エンジンにも好まれるサイト構築にぜひ役立ててください。