ブログ・サイトの画像を軽くして表示を速くする方法（WebP・リサイズ）
ページが遅い原因の大半は画像です。スマホで撮った 4MB の写真をそのまま貼ると、その1枚で読者の通信量を使い切り、検索順位にも響きます。1枚を 100〜200KB に収める手順です。
手順
- 画像リサイズで、記事の本文幅に合わせて長辺を 1200〜1600px にします。「縦横比を固定」にチェックが入っていれば幅を入れるだけです。ブログの本文は広くても 800px 程度なので、高解像度画面を考えてもこれで十分です。
- 続けて画像圧縮を開き（画像は引き継がれます）、形式を WebP、画質を 75〜80 にして保存します。JPEG より2〜3割小さくなり、主要ブラウザはすべて表示できます。
- 複数枚あるなら、画像圧縮にまとめて落とし、「すべてZIPで保存」で一括ダウンロードします。
結果欄に元のサイズと圧縮後のサイズが並ぶので、目安として 1枚 200KB 以下になっていれば合格です。
スクリーンショットや図は PNG のまま
文字が多いスクリーンショットや、色数の少ない図解は、JPEG・WebP にすると文字の周りがにじむことがあります。この種類の画像は画像圧縮で PNG を選び、スライダーで色数を減らすほうがきれいに小さくなります。透過も残ります。
アイキャッチと OGP 画像
記事のアイキャッチや SNS でリンクを貼ったときに出る画像は、OGP画像メーカーでタイトルを入れるだけで 1200×630px のものが作れます。写真を背景に敷くこともできます。作った画像も最後に画像圧縮を通しておきましょう。
写真を使う場合は、公開前にEXIF情報の削除で撮影場所を消しておくと、自宅の位置が推測される心配がありません。