参考になりましたら是非『いいね!』にご協力ください。




ITの活用情報を毎週お届けする無料メルマガに是非ご登録ください。


閉じる

【メルマガバックナンバー】速くて快適なWebサイトのためにアップロードする画像は小さくしよう

「最近WordPressが重たいんです。
 スマホとかだと開くのに何秒もかかるんですけど、
 何が原因なんでしょうか?」

Webサイトのレスポンスが遅いと、
それだけで人は別のサイトに流れていってしまいます。

例えば、

  • Amazonではサイトが0.1秒遅くなる度に売上が1%減少する
  • Googleでは0.4秒遅くなっただけで検索回数が0.44%減少する

などの統計があります。
 

これは物販サイトなどだと、致命的な問題になりかねません。

そこで本日は、原因として大きな要素である
画像をアップロードする際の注意点についてまとめました。

その注意点とは、、、

 

画像ファイルのサイズを小さくすること、です。
 

遅いかどうかを調べてみる

Webサイトが重たいかどうかというのは、
感覚値だけではなく、きちんと測定して数値で見るのが大事です。

測定のサービスはいくつかあるのですが、
Googleが提供している「PageSpeed Insights」であれば
修正すべき項目なども教えてくれるのでおすすめです。

PageSpeed Insights

 
このツールは、
あなたのWebサイトのURLを入力するだけで、
速度に関する数値(スコア)と解決策がわかります。

出てきた速度に関する数値が60以下の場合は
改善が必要と考えた方が良いでしょう。

この数値は、Googleのコンテンツ開発者Paul Lewis氏によると、
デスクトップで90以上、モバイルで85以上が望ましいとされています。

Paul Lewis氏の記事

 
しかし、実際にはこの数値を狙うのはかなり厳しいですし、
速度を重視しすぎるとメンテナンス性や機能性が落ちて
本末転倒になりかねません。

そこで、WordPressなどのCMSを利用しているのであれば、
65~80ぐらいを目指していくのが良いと思います。
 

その中でもとくに効果が大きいのが、
画像コンテンツの最適化 です。

重たいWebサイトの多くは
画像サイズとファイルサイズが必要以上に大きいです。

スマートフォンの写真をそのままアップロードするのは、
もう論外だと思ってください。
 

画質と画像ファイルのサイズにはトレードオフの関係がある

とはいえ、画像のファイルサイズを小さくするほど
画像の品質は下がります。

写真をきれいに見せる場合などには困りますね。
 

ここで必要な考え方は次の2つです。

  • 画質を落とさないように 「最適化(圧縮)」 する
  • 画像のサイズ(縦横のピクセル数)を 「縮小(リサイズ)」 する

 

最適化(圧縮)

「最適化」というのは、
Jpeg形式などのファイルの圧縮率や圧縮方法などを変更し、
見た目の画質を落とさずにファイルサイズを小さくすることです。

WordPressでは「EWWW Image Optimizer」などの
プラグインを利用すれば画像の最適化を行えます。

このプラグインを導入すると、次の3通りの最適化が行えます。

  • 画像のアップロード時に自働で最適化
  • 過去にアップロードした画像の最適化
  • WordPressのテーマ(テンプレート)内の画像を一括で最適化
     

縮小(リサイズ)

「縮小」というのは、
画像のサイズ(縦横のピクセル数)を減らして
ファイルサイズを小さくすることです。

スマートフォンで撮った写真は
印刷などでも使えるほどピクセル数が多いため、
Webサイトで表示するにはオーバースペックです。

WordPressでは「Imsanity」などの
プラグインを利用することで、
あらかじめ指定したサイズに画像を縮小できます。

導入すると、次のタイミングで
画像ファイルを自動的に縮小してくれます。

  • メディアライブラリーにアップロードするとき
  • ヘッダーや背景画像を指定するとき

 
ご紹介したように、最適化と縮小を組み合わせることで
Webサイトを重たくしがちな画像を小さくし、
軽量化することができるようになります。
 

まとめ

今回のポイントをまとめます。

  • WordPressのサイトが重たくなる要因には画像サイズが大きいことが挙げられる
  • サイズの縮小と画質の最適化は別の問題
  • プラグインで自動的にリサイズ・最適化することもできる

いかがでしたでしょうか。
 

画像の扱いに気を付けることを前提とし、
自動化するプラグインを上手く使うようにしましょう。

速いサーバーに乗り換えるのも方法ですが、
これなら無料でWebサイトの高速化にチャレンジできますね。
 

ドリームハイブの無料メルマガ

週1回のメルマガを発行しています。いつでも解除できるので是非ご登録ください。