思う事

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

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

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

画像を1:1にしていたのは使っているテーマのタイトル横にあるアイコン(サムネイル)が真四角だから

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

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

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

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

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

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

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

1:1はアイキャッチ画像に適切なサイズではなかった

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

アイキャッチ画像の位置

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

アイキャッチ画像のサイズも横1200縦630
アイキャッチの画像のサイズも1200:630

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

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

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

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

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

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

説明文は文字だけだと把握しづらい

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

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

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

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

  • この記事を書いた人

巣ごもりママ

乳がんになりブログを始めた主婦(発達障害ASD・ADHD有り)です。 公立中学から灘高校へ進学した息子の幼い頃〜現在、そして大学受験の事が主な内容です。 遊んでいた知育玩具や問題集、夫の趣味(PC)などのせています。

-思う事
-, ,