- サイトがめっちゃ重い。
- PageSpeed Insightsでサイトスピードを見たらスコアがめっちゃ悪い！
- 『適切なサイズの画像』、『効率的な画像フォーマット』って何？？？
こういった悩みをお持ちではありませんか？
実はサイトの立ち上がりが3秒以上かかるとそれだけでユーザーが逃げてしまいます。これってもったいないですよね？
結論、サイトスピードを高速化・改善したのなら画像を最適化することが一番はやいです。
実はGoogleも画像最適化について言及しています。
要約するとこうです。
- 画像の見た目の品質に大幅な影響を与えずに、ファイルサイズを小さくする
- 画像の最適な種類（保存形式）、画質、解像度を選ぶ
- 必要とする効果がCSSで得られる場合はCSSにする
- 端末の種類に合わせて適切に拡大縮小される方法で構築する
- すべてのピクセルが不透明な場合、GIF、PNGのアルファチャンネルを削除する
引用：Google PageSpeed Insights Developers
もし、サイトスピードをまだ計測していない人は計測してみてください。これでスコアが低いならいますぐ画像からでも対策すべきです。
この記事では、サイトスピードを高速化・改善する方法として画像の最適化について説明します。
- なぜ画像の最適化が必要なのか？
- 画像最適化サイズ変更と圧縮の方法
この記事は、現役ブロガーで元々PageSpeed Insightsでモバイルスコア50前後だった私が画像最適化で下の図のようにサイトスピードが改善した経験をもとに書いています。
あなたもいますぐ画像最適化対策を始めてみませんか？
ちなみに画像最適化だけをやってもSEO対策は不十分です。下の記事に41項目のSEOチェックリストを書いているのでまだ見ていない人は急いで確認してみて下さい。
-
-
【最新版】SEO対策チェックリスト41選【内部・外部対策でブログを上位表示】
続きを見る
なぜ画像サイズ変更や圧縮が必要なのか？
なぜなら、画像がサイトスピードに大きな影響を与えているからです。
下のまずGoogleが提供するPageSpeed Insightsでサイトスピードを計測してみましょう。
計測すると画像のとおり、以下のどれかが表示されませんか？
※私なら画像関係で『適切なサイズの画像』『次世代フォーマットでの画像の配信』が表示されています。
- 1. 適切なサイズの画像
適切なサイズの画像を配信して、モバイルデータ量と読み込み時間を抑えてください。 - 2. オフスクリーン画像の遅延読み込み
オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。 - 3. 効率的な画像フォーマット
画像を最適化すると、読み込み時間を速くして、モバイルデータ量を抑えることができます。 - 4. 次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
上の4つはいずれも「画像を最適化してね」ってことが書いてあります。
画像を最適化すると、読み込み時間を速くして、モバイルデータ量を抑えることができるとGoogleも訴えているとおりです。
画像の最適化とはかんたんにいうと下のとおり。
- 画像サイズを1200pixelに設定する
- 画像を圧縮する
この2点。
実際Googleも下のように言及しています。
Discover で大きな画像を表示できるようにする
・高画質でサイズの大きい画像（幅が 1,200 ピクセル以上）を使用します。
つまり、最低でも1200pixel以上にしないとGoogleの言っていること反してしまいます。
これだけでも不利。
そして、画像の最適化でもう一つ重要なのが画像の圧縮です。
と思う人もいますよね。
昔のアナログ写真なら紙媒体なので情報をそれだけでした。
しかし現在のデジタル写真だと情報は多岐に渡って保存されています。
例えば
- 画像の種類は？→JPG、PNG
- 画像をとった時間は？
- 画像をとった場所は？
- 画像をとった機器は？
これらの情報がまとめてデータという形で保存されています。
ただ、これらの情報があることで画像のデータ量が多くなる＝ブログが重くなるということ。
だからいらないデータを消す＝圧縮すると言う話にいきつくわけです。
【実践編】ILOVEIMGで画像サイズ変更と圧縮してサイトスピード改善＆高速化する方法
ここからは画像サイズ変更と圧縮の方法をまとめて解説していきます。
画像サイズ変更も圧縮もいろんな方法がありますが、私が今現在使っている方法をお教えします。
結論、ILOVEIMGというWebブラウザ上のツールを使っています。
\無料で使える/
/15枚まとめてリサイズ・圧縮可能\
基本的に下の流れです。
- ILOVEIMGへ移動
- 画像サイズを1200ピクセル変更
- サイズ変更した画像を圧縮
- ブログ記事にアップ
順番に解説します。
まずは画像サイズ変更から。
ILOVEIMGでの画像サイズ変更の方法【画像最適化①】
ILOVEIMGでの画像サイズ変更の方法を解説します。
画像サイズ変更は下のとおり。
- ILOVEIMGへ移動
- 画像サイズ変更をクリック
- 画像を選択→任意の画像を選ぶ
- 『ピクセルで』→幅1200pixel→『画像サイズ変更』をクリック
- ダウンロードして完了
無料で使える/
/15枚まとめてリサイズ・圧縮可能\
横幅を入力したら縦幅はそれに合わせて勝手に変更されるから気にしなくてOKです。
ILOVEIMGでの画像圧縮の方法【画像最適化②】
ILOVEIMGでの画像圧縮の方法を解説します。
画像圧縮は下のとおり。
- ILOVEIMGへ移動
- 画像の圧縮をクリック
- 画像を選択→任意の画像を選ぶ
- 『画像の圧縮』をクリック
- ダウンロードして完了
画像サイズ変更→画像圧縮が完了したら、あとはブログにアップするだけです。
【まとめ】画像最適化することでサイトスピードが改善する
画像最適化するだけでサイトスピードが爆発的に早くなるので早急に対応するべきです。
私は先程もいったとおりで、画像を最適化するだけでサイトスピードが大幅に改善されました。
その後よりアクセスも徐々に増えてきた印象もあります。
SEO的にも大きな影響があるのにかんたんに対策できちゃうのでおすすめですよ。
もっと詳しいSEO対策を知りたいという方はまず下のSEO対策チェックリストであなたに足りないところをチェックするところからはじめませんか？
-
-
【最新版】SEO対策チェックリスト41選【内部・外部対策でブログを上位表示】
続きを見る
