投稿日：2026年2月15日
正直に書きます。
PageSpeed Insights を見た瞬間、
「あ、これ画像だな」と思いました。
表示が遅い。
数値が微妙。
でも原因はなんとなく察している。
👉 アイキャッチ画像がデカすぎる問題
■ 発端
何気なく画像サイズを確認したら…
✔ 2.49MB
いやいやいや。
ブログのアイキャッチでそのサイズは重い。
■ 今回やったこと
✔ 画像リサイズ
✔ 圧縮
✔ 形式変更
使ったツール👇
👉 Squoosh
https://squoosh.app/
■ 今回の設定メモ ✍️
忘れる未来しか見えなかったので残します。
🔧 Resize（リサイズ）
✔ Resize：ON
✔ Method：Lanczos3
✔ Width：1200
✔ Height：630
✔ Maintain aspect ratio：ON
👉 Cocoonアイキャッチ基準
🖼 Compress（圧縮）
✔ Format：WebP
✔ Quality：81
✔ Lossless：OFF
■ 結果 📦
✔ 元画像：2.49MB
✔ 変換後：約120KB
👉 約95％軽量化
軽くバグを疑いました。
■ なぜ1200×630？
✔ Cocoon推奨サイズ
✔ SNS表示が安定
✔ アイキャッチ崩れ防止
地味だけどここ効きます。
■ WebPって何？
今回初めてちゃんと理解しました。
画像と言えば👇
✔ JPEG
✔ PNG
✔ iPhoneの謎形式
くらいの認識だったんですが…
👉 WebP、めちゃ軽い
■ ワンポイント豆知識 💡
✔ WebPはJPEGより軽量化しやすい
✔ 表示速度改善に効く
✔ Cocoonと相性◎
✔ Amazonフォトでも表示OK
これ知らなかった…。
■ 差し替え時の注意 ⚠️
画像を軽量化しても
記事側の扱いを間違えると意味なし。
✔ 同じ画像なら「置換」推奨
✔ URL維持
✔ リンク変更不要
■ ちなみに今回の環境 🖥
✔ WordPress：6.9.1
✔ テーマ：Cocoon
✔ Cocoonバージョン：2.9.0.1
✔ 作者：わいひらさん
■ まとめ
今回の学び👇
✔ 画像サイズは正義
✔ 重い画像は確実に足を引っ張る
✔ WebPはもっと早く知りたかった
■ あとがき
こういうの、
調べたら一瞬なんですよね。
でも実際やると👇
✔ サイズどうする？
✔ 縦横比？
✔ WebP？
✔ 置換？
✔ 差し替え？
ってなる。
だから残しました。
■ 今回リサイズに使用したサイト 🌐
👉 Squoosh
https://squoosh.app/
無料・登録不要・ブラウザだけでOK。
サイズ削減の効果がその場で見えるのが最高でした。
😌 シリーズ化用締め👇
この手の「作業ログ」、
今後も確実に躓くのでシリーズ化します。
未来の自分と、
同じ場所で詰まる誰かのために。
コメント