2024年7月11日 Webサイト

Webサイトの画像が重い場合の改善方法まとめ

みなさんこんにちは！
今回は、、

Webサイトの画像が重いせいでページスピードが遅い！画像の重さを改善する方法はないの？

といった疑問にお答えします。

■読んでほしい人
ページスピード改善を考えている方
「PageSpeed Insights」で画像の重さを指摘されている方

ではさっそくまとめていきます。

画像が重い場合の改善方法

画像が重い場合の改善方法を４つご紹介します。

まず１つ目は、
シンプルに「画像サイズを小さくする」です。

使用している画像のサイズを確認してみてください。
小さくしても画質などが問題ない場合はサイズを小さくすることで改善が見込めます。

２つ目は、
「画像の形式を変更する」です。

画像形式には色々な形式が存在します。
・png
・jpeg
・svg
などなど…

これらの形式にはそれぞれ特徴があり、それぞれデータ容量や用途が違ったりします。
そのため使用箇所によって形式を調整する必要がありますが、特にこだわる必要がない場合はデータ容量の小さい形式を選びます。

よくあるのがpngやjpegからwebpに変更して画像の重さを下げる方法です。

下記リンクで画像形式の種類一覧が確認できるので一度覗いてみてください！
https://rs.sakura.ad.jp/column/rs/image-format/

３つ目は、
「lozad対応を行う」です。

このlozadというものがどういうものか簡単に説明すると、
ページ読み込み時にlozad設定した画像を読み込まず、その画像位置までスクロールされて初めて画像を読み込む、というものです。
このlozad対応でページスピードはかなり改善できます。

lozadの設定は意外と簡単なのでおすすめです！

詳しい設定方法は下記記事をご確認ください。

最後４つ目は、
「キャッシュを利用する」です。

こちらは再訪問者しかに対してしか意味がないのですが、
キャッシュを利用することで一度そのページに訪問した人はキャッシュでデータ情報が保持され、再度訪問した際には再度データを読み込まなくて済むので２回目以降は画像の重さを気にせずページを閲覧することが可能になります。

キャッシュの設定方法は、そのサイトがどんな言語でどんなCMSを利用しているかで異なるので、一度ご自身のサイトの開発環境でどのように設定できるか調べてみてください！

以上で、
画像が重い場合の改善方法をご紹介しました。

改善のメリットととして、
・サイト表示が速くなる
・ユーザーが訪問しやすくなる
・サイト評価も上がる
などなどいいことづくしです。

比較的簡単な方法だったかと思いますが、画像の重さ改善はサイトにとってプラスにしかならないのでぜひ実践してみてください！