アイキャッチ画像のサイズ調整とWebP圧縮を試してみた
前回から、こちらの解説サイトにお世話になっています。画像サイズの目安が分かったところで、今回は、実際にアイキャッチ画像の埋め込みを試してみました。
iPhoneで撮影した写真を圧縮
用意したのは、生花をiPhoneXで撮影した2MBのJPEGファイル。これを Squoosh（スクワッシュ） にドラッグ＆ドロップし、
- Resize（サイズ変更） → 横幅1200px（アイキャッチ推奨サイズ）
- Compress（圧縮） → WebP形式に変換
この2ステップで、ファイルサイズはなんと 71KB まで縮小！ 推奨される200KB以下を余裕でクリアしました。
実際にWordPressへアップロード
出来上がったWebP画像をWordPressにアップロードして、アイキャッチに設定。記事一覧に写真が並ぶと、やはり見栄えがぐっと良くなります。視覚的な印象が加わるだけで、記事の一覧性や訴求力が一気に高まりますね。
気になる画質の低下
ただし、超圧縮の副作用も。花びらの輪郭や細部はぼやけてしまい、拡大して見ると「この花は何だろう？」という情報は伝わりにくくなりました。閲覧者にとっては十分かもしれませんが、細部を見せたい写真には向いていない印象です。
今後の課題
今回のテストで、アイキャッチ写真のサイズと圧縮のバランス感覚が少し掴めました。次のステップでは、
- 画質をどこまで落とすか
- ファイル形式や解像度の工夫
- 写真の種類に応じた最適化
なども意識していきたいと思います。
画像ひとつで記事の印象が大きく変わるのは実感できました。次回はさらにブラッシュアップして「見せる画像」に挑戦してみたいですね。
