画像読み込み速度を早くするHTMLとは？最適化のポイントを解説

サイトの読み込み速度が遅いと離脱率が上昇するってご存じでしょうか？
近頃のサイトでは画像を多く使用することはごく普通となっております。

そんな画像コンテンツもサイズを間違えたり、多用しすぎるとサイト容量は重くなり、せっかく訪問してくれたユーザーを離脱させてしまう要因にもなってしまいます。

サイト離脱率を下げ、UX（ユーザーエクスペリエンス）を向上するにはどうしたら良いのでしょうか。

画像コンテンツやサイトでのHTMLを上手に扱い、読み込み速度を早くするためのポイントを簡潔に解説していきます。

画像の読み込みが遅いと離脱率が上昇する

まずはこちらのデータを見てみましょう。
少し古いデータですが、Googleの記事より抜粋

• 1～3秒かかる場合、離脱率32％
• 1～5秒かかる場合、離脱率90％
• 1～6秒かかる場合、離脱率106％
• 1～10秒かかる場合、離脱率123％

Googleサイトより抜粋

SEOの観点からも重要な役割の一つとなり、画像読み込み速度が遅いことでサイト訪問者の離脱率が上昇してしまいます。

ページの読み込み時間が1秒から10秒に長くなると、訪問者の離脱確率が増加することがわかっております。

せっかくサイトへ訪問してくれたユーザーを逃してしまってはもったいない限りです。

読み込み速度の最適化に向けて、ポイントを絞って解説します。

画像容量の最適化（圧縮）

一番手軽で効果が出やすい方法となります。
適切なフォーマットの選択とリサイズを行うことで大きく画像データの圧縮が可能です。

最適なフォーマットを選ぶこと

代表的な画像データの拡張子を見て、最適なものを選択しましょう。

PNGファイル

通常、画質が高く、その分容量が大きくなる傾向。
PNGファイルは、画像から背景を取り除く事も容易に可能です。
切り抜きなどを行う場合はこの拡張子を使いましょう。

JPEGファイル

PNGよりも画質は落ちますが、画像サイズの容量は小さく、デジカメ画像など幅広く使用されている拡張子です。

画像のリサイズ

近頃画像を撮るためのデバイス（スマホやカメラ）は非常に画質が良く、ファイル容量も大きくなってしまうことが大半です。
知らずにほっておくと、その画像は必要以上に大きなサイズや容量となり、画像読み込み速度が低下する要因となってしまいます。
webサイトに合わせた画像サイズにリサイズすることで大きく容量削減を行うことができます。
画像内容は同じであっても、px（ピクセル）を調整するだけで画像のデータ容量を圧縮することが可能です。
結果、画像読み込み速度を早くすることが可能となります。

loading=”lazy”（レイジーロード）について

ところで皆さんは、レイジーロードって聞いたことありますでしょうか？

loading=”lazy”（遅延ロード処理）とは、サイトページを読み込む時に画像のロードを遅延（読み込まず）させることを指します。
全てのコンテンツを一度に読み込まないため、ページそのものの読み込み速度を早くさせる事を目的に使用します。

レイジーロードのメリット＆デメリット

ページの読み込み速度を改善させることで、サイト訪問者の離脱率を下げSEOの観点より、有利なサイト運営を目指しましょう。

HTMLで遅延読み込みをするために

レイジーロードを組み込む際は、通常Javascript等を使用することが一般的ですが、HTMLだけでレイジーロード（遅延ロード）処理をする方法があるため記載します。

画像のようにloding（属性）の後、値に「lazy」を指定してあげると、レイジーロードさせることが可能です。

デメリットでもあるように、画像を遅らせて読み込みを行うことで読み込んだ際にコンテンツ画像がズレることを防ぎます。

「width属性（横幅）」と「height属性（縦幅）」をつけておくことで、画像スペースを確保し、このズレを防ぐことが可能となります。

番外編！WebP（ウェッピー）について

なんだか流行り言葉みたいなワードに感じますが、いったい何者なのでしょうか？
画像の最適なフォーマットを選ぶために「PNG」や「JPEG」をご紹介しましたが、もっといい方法はないのでしょうか？
そんな疑問に答えていきます。

WebP（ウェッピー）とは？

新しい画像ファイル形式のことを指します。
Webサイト運営では切っても切り離せないGoogle様が開発したファイル形式で、上記で解説しました「PNG]や「JPEG」の拡張子（ファイル形式）と比べてとても高い圧縮率と品質を提供してくれています。
WebP（ウェッピー）に付くファイル拡張子は「.webp」とされ、画像ファイルの容量削減とサイトページ読み込み速度を早くし、SEOの観点からもサイト運営に役立ってくれます。
更に最近では広く、多くのウェブブラウザやサービス等でもサポートされており、とても使いやすいファイル形式であることがあげられます。

WebP（ウェッピー）の特徴

かなり有利な特徴をもっています。
「PNG」や「JPEG」ではできなかったことを可能にしており、いいとこどりを実現しております。
一度上記ファイル形式と比較をしてみましょう。

「え、もうこれWebP（ウェッピー）でいいんじゃない？」となるような結果になっています。

WebP（ウェッピー）のメリット＆デメリット

メリット＆デメリットを見ても、画像の読み込み速度を早くするにはWebP（ウェッピー）を使うことが推奨されますね！

まとめ

ここまでお付き合いいただき、ありがとうございました。

1. 画像コンテンツサイズの最適化
2. サイトHTMLの最適化

これらを行うことで読み込み速度を早くすることが可能です。

画像読み込み速度を早くすることで、訪問者の離脱率を軽減し、サイト運営を優位にしていきましょう。