適切なサイズの画像って？PageSpeed Insightsに指摘されるので改善する

画素数を減らしても依然として消えない「画像を最適化する」というタイトル

ブログを始めて２年くらい経ちましたが、Page Speed insightsのスマホの表示速度の項目、「画像を最適化する」という文言がずっと消えませんでした。

最初は画素数小さくすればいいと思い、できるだけ小さく画像が荒くなってもいいわくらいの荒さで正方形に画像を設定していました。横対縦が1対1です。

私はフォトショップの簡易版を使ってるので、画像を保存するときに「webで保存」を選んで画素数を減らしてブログにアップしていました。

それでも「画像を最適化する」が消えません。

そして、テーマのアップデートやプラグインを新たに入れたりしてスマホスピードもアップしたので別にいいかなと画像の指摘のところはあきらめて放置していました。

でもやっぱり気になる画像の最適化という言葉です。

もう一度見直してみようと、プロブロガーさんのHpを見まくりましたがいまいちわかりません。

ある方の最適な画像の説明を読んで「1200対630」を見てやっとわかりました。

紫の線で囲っている部分がアイキャッチ画像なのですが、この部分が1:1の画像を使うのではなかったようです。

下の図で言うと従来のサイズ(1:1)が紫の四角の部分で、緑枠の四角の中全部が1200:630になります。

私はフォトショップを使っているのですが、画像枠の横：縦の対比を固定して1.904:1にしています。

この緑の枠内の白い余白も入れた画像サイズをアイキャッチ画像として設置保存すると、やっと画像を最適化するというタイトルが消えました。

あらかじめ設定されているアイキャッチの枠が正方形なので、切り取られる部分を考えて横長の1.904:1の画像を設置すれば良いみたいです。

真四角のスペースに白い両サイドも入れた横長サイズをあえて入れる感覚が個人的にどうも馴染めないのですが。

次から横長サイズで画像を切り取ることにしました。

でも、トップページ以外のアイキャッチ画像は以前の正方形サイズのままなのでpageSpeed Insightsはトップページだけの計測のような気がします。

私は発達障害があるので文字だけでぎっしり書かれていても理解しずらく、絵や画像だとわかりやすいのでここまで最適な画像サイズがわかるのに2年かかりました。

文字がずらっと並んでいると集中力が途切れて読めないんですよね。

自分の興味のある文章なら集中力は途切れないのですが、あまり興味のないものだと全文目を通せないんです。

そういう自分の特徴もあって今回はこのことがわかるまでに時間がかかりました。