PageSpeed Insightsで「適切なサイズの画像」と指摘される問題、実は無料ツールで簡単に解決可能です。特にプロフィール画像やアイキャッチ画像など正方形が推奨される場合、プラグインを増やさずにサイズを調整できます。この記事では、長方形画像を正方形に変更する具体的手順と注意点を、初心者でもわかりやすく解説します。
📌 画像サイズ変更は簡単！
<img src="profile.jpg" alt="プロフィール画像" width="200" height="200">- width属性：画像の横幅をピクセルで指定
- height属性：画像の縦幅をピクセルで指定
と指摘されているので縦200ピクセル横200ピクセルに変更しないといけません
今まで、メディアライブラリーで画像を編集してサイズ変更はできましたが、プロフィール画像など正方形の推奨サイズ（COCOONでは240×240px）には対応できませんでした。メディアライブラリーでは縦横比を自由に変更できないためです。
そこで見つけたのが iLoveIMG。登録やログイン不要で、画像をドラッグ＆ドロップするだけで簡単にサイズ変更できます。
プラグインも増やしたくないし、無料がいいという条件にあうところがこちらです！
✂️ iLoveIMGでの手順
１変更したい画像を iLoveIMGにドラッグ＆ドロップ（登録不要）
２図①：「縦横比を維持」 のチェックを外す
３図②：幅と高さを200×200pxで入力
４図③：「サイズ変更」をクリック
最初なぜか正方形ならいいのかな？と縦240ピクセル、横240ピクセルに変更
５ダウンロード → メディアライブラリーへアップロード
青いところ｜サイズ変更された画像をダウンロードを選択します
ダウンロードした画像は「ダウンロード」フォルダに保存されるので、その画像をメディアライブラリーにアップロードします。
この画像をプロフィールの画像に置き換えます
💡 PageSpeed Insightsでの確認
「PageSpeed Insights」で分析すると「適切なサイズの画像」が指摘されないと思ったら・・
サイズ変更後、PageSpeed Insightsで分析すると多くの場合「適切なサイズの画像」の警告が消えます。しかし、今回のケースでは HTML の表示にwidth="200" height="200"
と指定されており、200×200px に合わせないと警告が消えませんでした。
width と height の数値が指定サイズと違うと、「適切なサイズの画像」エラーになります
最初は「正方形なら問題ない」と思い、COCOONの推奨サイズである 240×240px に変更していました。しかし、プロフィール画像を「丸型」で表示していたこともあり、テーマ側で 200×200px の表示サイズ が使われていました。
そのため、実際の表示サイズに合わせて 200×200px にリサイズしたところ PageSpeed Insights で合格しました。
まとめ
「PageSpeed Insights」で指摘されてきた「適切なサイズの画像」の修正は、投稿内やアイキャッチ画像などの長方形の画像は、画像をメディアライブラリーでの画像を読み込む時に画像の編集で指定のサイズに変更できる
プロフィールの画像などの正方形の画像はI♥IMGで簡単にサイズ変更できたので指定のサイズに変更する。
（今回COCOONのプロフィールの画像は、240ｘ240pxが推奨サイズですと書いていたのですが200ｘ200pxでないと合格できませんでした。四角ではなく丸型を選択しているからかもしれません）
スポンサーリンク
Apple 2025 MacBook Air M4 チップ搭載 15 インチノートブック
コメント