サイト運営

なぜ?画像を圧縮すべき理由【JPEGとPNGの使い分けも解説】

記事内に商品プロモーションを含む場合があります

たにーです。

この記事では、ブログやサイトにアップロードする画像を圧縮すべき理由についてお伝えします。

画像データでよく使う「JPEG」と「PNG」の使い分けについても解説しますので、あなたのメディア運営にぜひお役立てください。

なぜ?画像を圧縮すべき理由【JPEGとPNGの使い分けも解説】

なぜ、ブログやサイトにアップロードする画像を圧縮する必要があるのか?

その主な理由は、以下の3つです。

  • サーバーデータ量の節約
  • 表示速度の遅延防止
  • ユーザーの離脱防止

では、順番に説明していきます。

サーバーデータ量の節約

ブログやサイトを運営するために必要なレンタルサーバーには、データをアップロードできる容量に制限があります。

例えば、僕がおすすめしているエックスサーバーでは、プランごとにデータをアップロードできる容量が違います。

エックスサーバー

僕が使っているのは「X10」というプランですが、このプランだと「200G」のデータがアップロード可能です。

例えば、僕の使っているiphoneだと画像1枚あたり2MBくらいのデータ量があります。

1024MB=1Gなので、2MBの画像なら約10万枚を保存できるという計算です。

もしかすると、「10万枚も保存できる容量なら十分なんじゃ?」と思われるかもしれません。

でも、当然ながらサーバーに画像だけを保存するわけではありませんし、ブログやサイトを長期間運営していけばそれだけデータ量も増えていくわけです。

さらに、パソコンと同じでデータ量が増えすぎると動作が重くなったりエラーが起こりやすくなったりします。

なので、できるだけデータ量を節約しながら運営するのが望ましいです。

表示速度の遅延防止

サイトの表示速度が遅いのにはいろいろな原因があるのですが、その大きな原因の一つが画像データです。

画像データが大きくなればなるほど読み込みに時間がかかり、結果として表示速度も遅くなってしまいます。

表示速度が遅くなることによる主なデメリットは、以下の2つです。

  • Googleの検索順位に影響
  • ユーザーの離脱率が高まる

Googleの検索順位に影響

あなたは、自分のサイトの表示速度がどのくらいか把握していますか?

もし「知らない」「計ったこともない」という場合は、以下で表示速度を図ってみてください。

Googleが提供しているサイトの表示速度を無料で計測できるサービスです。

≫ PageSpeed Insights

Googleは、サイトの表示速度をかなり重視しています。

サイトの内容が同じくらいなら、表示速度の速いほうが検索結果で上位を取れる。

それくらい重要な要素です。

ユーザーの離脱率が高まる

次の項目とも重複する部分がありますが、サイトの表示速度が遅いとユーザーの離脱率が高まります。

これはデータでも証明されていることで、表示に時間がかかればかかるほど離脱率もアップしていくのです。

あなたも、クリックしたサイトがいつまで経っても表示されず閉じてしまったという経験が一度や二度はあると思います。

特に、LANやWifiを使わないモバイル通信環境では、この影響は顕著です。

ユーザーの離脱防止

データ量の大きな画像をアップロードしてしまうと、ロードに時間がかかり表示速度が遅くなります。

繰り返しになりますが、表示速度が遅くなるとユーザーの離脱率もそれに応じて高まってしまうのです。

参考までに、Googleが公表しているデータの一部を紹介すると、

  • 完全に表示されるまで3秒以上かかると53%のユーザーが離脱
  • 表示速度が1秒から10秒になるだけで直帰率が123%上昇

というような感じです。

「完全に表示されるまで」とは「読み込み中の表示が消えるまで」と解釈できますが、要するに表示速度が遅くなればなるほどユーザーの直帰率・離脱率も高まるということ。

逆に言えば、サイトの表示速度を上げることで、ユーザーの離脱を防ぐだけでなく読んでもらえる確率も上がる、ということになります。

そして、サイトの表示速度を上げるために最も効果的な対策のひとつが、この画像圧縮なのです。

効率的な「JPEG・PNG」使い分けのコツ

ブログやサイトでは、「JPEG」と「PNG」という画像データ形式がよく使われます。

これらの効率的な使い分けのポイントは、

  • JPEG=写真
  • PNG=イラスト

それぞれ説明していきます。

JPEG

JPEGは、主に色数やグラデーションの多い写真や画像に向いています。

写真や色数の多い画像は、JPEG形式で圧縮すると効率的にデータ量を減らすことができます。

ただ、圧縮率を上げていくと輪郭付近がザラザラするようなノイズが目立つ場合がありますが、これは圧縮の過程でどうしても避けられないものです。

画質とデータ量のさじ加減を調整しながら圧縮する必要があります。

また、JPEGは保存するたびに画質が劣化していくという特徴があるので、同じ画像を使いまわして繰り返し保存する、というような場合は注意してください。

PNG

PNGは、イラストやロゴなど、色数やグラデーションが少なく輪郭がはっきりしている画像に向いています。

JPEGのように、圧縮してもノイズが発生することはなく、繰り返し保存しても画質の劣化はありません。

色数が少なく塗りつぶしの多いイラスト系の画像は、特に効率よく圧縮することが可能です。

ただ、写真をPNG形式で保存した場合、データ量がかなり大きくなるので気を付けてください。

まとめ

この記事では、ブログやサイトにアップロードする画像を圧縮すべき理由と、JPEG・PNGの使い分けについてお伝えしてきましたが、いかがだったでしょうか。

今後、通信が「5G」に移行して通信速度が大幅に上がれば、大容量サイズの画像をアップしても問題なくなるかもしれません。

ただ、5Gが一般的に普及するにはまだ時間がかかりそうですし(提供エリアが限られている)、より少ないデータ量の方が表示速度が速いのはまぎれもない事実です。

それに、大容量画像をアップしまくっていたら、すぐにサーバーの容量もいっぱいになってしまいますからね。

なので、いずれにしても画像を圧縮して、より少ないデータ量でアップロードしておくのが間違いないと思います。

具体的な画像の圧縮方法については、以下の記事をご覧ください。

参考になれば幸いです。

ABOUT ME
たにー
コピーライターやってます。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です