2025/07/20

imgタグのloading=”lazy”とdecoding=”async”を徹底解説！Webサイトを高速化するための属性【初心者向け】

「自分のWebサイト、なんだか表示が遅いな…」と感じたことはありませんか？その原因、もしかしたら画像の読み込みにあるかもしれません。高画質な画像は魅力的ですが、多すぎるとページの表示速度を著しく低下させ、ユーザーを待たせてしまいます。

しかし、ご安心ください！HTMLのimgタグにたった2つの属性を追加するだけで、この問題を劇的に改善できる可能性があります。
それが、loading="lazy"とdecoding="async"です。

この記事では、画像の読み込みを最適化してWebサイトのパフォーマンスを向上させるこれらの属性について、初心者の方にも分かるように、その意味と正しい使い方を徹底解説します。

具体的には、下記の内容について紹介していきます。

loading="lazy"による画像の「遅延読み込み」とは何か
decoding="async"による画像の「非同期デコード」とは何か
それぞれのメリットと、使うべきでない場合の注意点
2つの属性を効果的に組み合わせるベストプラクティス

loading=”lazy”とは？スクロールされるまで画像の読み込みを待つ「遅延読み込み」

通常、ブラウザはページを開いた瞬間に、そのページにある全ての画像をダウンロードしようとします。
ページが長くて画像がたくさんある場合、画面にまだ見えていないページの下の方にある画像まで読み込もうとするため、初期表示が非常に遅くなってしまいます。

ここで登場するのがloading="lazy"です。これをimgタグに追加することで、ブラウザの挙動が変わります。

loading="lazy"を指定すると、その画像が画面に表示される領域（ビューポート）に近づくまで、画像のダウンロードを待ってくれます。

これを「画像の遅延読み込み（Lazy Loading）」と呼びます。

メリット

初期表示の高速化： 最初に表示される領域に必要なデータだけを読み込むため、ページの表示が格段に速くなります。これはGoogleが提唱するCore Web Vitalsの改善にも繋がります。
データ通信量の節約： ユーザーがページの下までスクロールしなかった場合、見られなかった画像のデータ通信は発生しません。これは特にモバイルユーザーにとって大きなメリットです。

使い方と注意点

使い方は非常に簡単。imgタグに属性を追加するだけです。

HTML
<!-- ファーストビューより下にある画像に指定する -->
<img src="images/article-image-01.jpg" loading="lazy" alt="記事の画像" width="800" height="450">

【重要】ファーストビューの画像には使わない！

loading="lazy"は万能ではありません。ページを開いて最初に表示される画面（ファーストビュー）にあるメイン画像（ヒーローイメージなど）に指定するのは避けましょう。

なぜなら、ファーストビューにある最も重要な画像の読み込みをわざわざ遅らせてしまい、かえって体感速度を落とす原因になるからです（LCPの悪化）。遅延読み込みは、スクロールしないと見えない画像にのみ設定するのが鉄則です。

decoding=”async”とは？ページの表示を止めない「非同期デコード」

次に紹介するのは、decoding="async"です。これを理解するために、まず「デコード」という処理を知る必要があります。

ダウンロード： サーバーから画像ファイル（JPEG, PNGなど）を受け取ること。
デコード： ダウンロードした画像ファイルを、画面に表示できるピクセルの集まりに変換する処理。

実は、この「デコード」処理はCPUに負荷がかかる作業です。通常、ブラウザはこのデコード処理をページの表示処理と同じ流れ（メインスレッド）で行うため、大きな画像のデコード中に一瞬ページの表示が固まる（カクつく）ことがあります。

decoding="async"を指定すると、このデコード処理をメインの表示処理とは別の流れ（非同期）で行うようブラウザに指示できます。

料理に例えるなら、メインのシェフ（表示処理）が忙しいときに、別の調理アシスタント（デコード処理）に下ごしらえを任せるようなイメージです。これにより、メインシェフは他の作業をスムーズに進められます。

メリット

レンダリングの高速化： デコード処理でページの表示がブロックされなくなるため、特にたくさんの画像があるページでのスクロールやアニメーションが滑らかになります。
ユーザー体験の向上： ページの「カクつき」が減り、よりスムーズな操作感を提供できます。

使い方

こちらもimgタグに追加するだけです。

HTML
<!-- どの画像に指定しても基本的にメリットがある -->
<img src="images/any-image.jpg" decoding="async" alt="何かの画像" width="800" height="450">

decoding="async"は、loading="lazy"のような明確なデメリットがほとんどないため、多くの画像に安心して指定できます。

【実践】loading=”lazy”とdecoding=”async”のベストな組み合わせ

さて、2つの属性の役割が分かったところで、どう使い分ければ良いのでしょうか。ポイントは「画像の場所」です。

画像の場所	loading属性	decoding属性	解説
ファーストビューの画像（ヒーローイメージなど）	指定しない or `loading="eager"`	`decoding="async"`	すぐにダウンロードを開始し、ページの表示を妨げずにデコードさせたい。これが最も重要な画像を最速で表示する組み合わせです。
ファーストビューより下の画像	`loading="lazy"`	`decoding="async"`	ダウンロードは必要になるまで遅延させ、デコードも非同期で行う。パフォーマンスへの影響を最小限に抑える最強の組み合わせです。

具体的なコード例

HTML
<!-- ▼ ファーストビューのメイン画像 ▼ -->
<!-- すぐに読み込んでほしいので loading="lazy" は付けない -->
<img src="hero-image.jpg" decoding="async" alt="サイトのメインビジュアル" width="1200" height="600">

<!-- ▼ ここから下のコンテンツ（スクロールしないと見えない） ▼ -->
<p>記事の本文が続きます...</p>

<!-- 遅延読み込みさせたい画像 -->
<img src="article-image-1.jpg" loading="lazy" decoding="async" alt="記事の画像1" width="800" height="450">

<img src="article-image-2.jpg" loading="lazy" decoding="async" alt="記事の画像2" width="800" height="450">

まとめ

今回は、画像のダウンロードとデコードを最適化してWebサイトを高速化するloading="lazy"とdecoding="async"について解説しました。

loading="lazy"はダウンロードのタイミングを制御する。スクロールして表示されるまで画像のダウンロードを遅らせる。ファーストビューには使わないのが鉄則。
decoding="async"はデコードのタイミングを制御する。画像のデコード処理でページの表示が止まらないようにする。ほとんどの画像で指定してOK。
この2つを適切に組み合わせることで、ユーザー体験を損なうことなく、サイトのパフォーマンスを大幅に向上させることができる。

画像の最適化はWebサイト高速化の要です。今日からでもタグにこの2つの属性を追加して、あなたのサイトをより速く、より快適にしてみてはいかがでしょうか。

[参考ページ]
HTMLImageElement: loading プロパティ – Web API | MDN
HTMLImageElement: decoding プロパティ – Web API | MDN