今日はサイトに使う画像について
画像の種類を変えたら表示速度が爆上げしました。

ウェブサイトの表示速度がSEOに影響を及ぼすと言われています。

正確には表示速度が遅すぎると、検索順位を落とすらしいです。
スピードを落とす最大の要因は容量の大きな画像です。

画像の容量ですけども…
なかなか悩ましい問題です。

画像を圧縮すれば、必然的に荒くなります。
また画像に書かれた文字なども、読みづらくなってしまいます。

例として圧縮前と圧縮後のビフォーアフターを掲載します。
最初に圧縮前の画像です。


背景も女性の絵もきれいに映っています。
これを圧縮すると以下のようになります。



遠目に見ても画像が崩れているのが分かると思います。
薄く砂嵐が入ったような感じになっています。

この画像は圧縮前の4分の一まで容量が減少しています。
表示速度は速いですけども…

ここまで荒れるとサイトのクオリティがガタ落ちになってしまいますね。

画像が汚いとユーザビリティにも悪影響を及ぼすリスクがあります。

なのでサイトにアップする画像は一定以上のクオリティが必要です。

先日にWebP (ウェッピー)という拡張子の存在を知りました。

一般的なJPEGと比べると、25％から35％程度、容量が小さくて奇麗な画像になるとか。

実際にwebpで画像を出すと、サイズは同じでも容量が全然違います。
（大きいときで6割以上も小さくなります。）



欠点はWebPの書き出しが面倒なこと。
(WebP 変換　で検索すれば変換サイトが数件ヒットします。)

もう一つはiPhoneなどアップル系のブラウザだと表示されないリスクがあります。

リスクはあるけども…

表示速度の上昇は魅力的だと思い、現在作成中の建設業許可サイトでWebPを導入してみました。

取り合えずトップページの画像をWebPにしてみました。

私が使っているCMS（シリウス）はWebP対応では無いので、一部はJPEG画像のままです。

実際にトップページをWebP画像に変えてみた建設業許可のサイトはこちらになります。

https://kyoka-ok.com/

作成途上のサイトなので連絡先などは掲載していないです.

まずJPEG画像の時です。
モバイルの速度スコアは59と微妙です。



Wordpressよりは速いかなという程度です。
（私の所有するWordpressのスコアは40でした）

次に画像をWebPに変えたものがこちらになります。



スコアが86まで上昇しました。
自分のスマホで確認するとパパっと表示が切り替わる様に。

全然表示速度が違います。
スピードが速いと気持ちが良い物です。

今回の実験はトップページだけなので、順番に個別記事の画像もWebPに変えていこうと思います。

ちなみにアメブロでは画像が独特な拡張子になっているので、webpは使えませんでした。


今日はここまで。