【高速化の鍵】imgタグのloadingとdecoding属性を正しく使って表示速度を改善しよう！

はじめに

ウェブページに画像を多く使うと、表示速度が遅くなり、ユーザー体験やSEOにも悪影響を及ぼします。
そこで重要になるのが、<img>タグの「loading属性」や「decoding属性」です。

この記事では、それぞれの属性が持つ機能や違い、最適な使い方を実例・表付きで解説します。パフォーマンス改善をしたいフロントエンド開発者やサイト運営者の方に役立つ内容です。

概要

HTMLの<img>タグにおけるloadingとdecoding属性は、現代のブラウザが提供する画像読み込み最適化オプションです。これらの属性を適切に設定することで、ページの読み込みパフォーマンスを大幅に向上させることができます。

loading属性

機能

画像の遅延読み込み（lazy loading）を制御します。

設定値

• auto（デフォルト）：ブラウザが自動判断
• lazy：ビューポート近くに来た時に読み込み
• eager：即時読み込み

使用シナリオ比較

decoding属性

機能

画像のデコード動作を制御し、レンダリングパフォーマンスに影響します。

設定値

• auto（デフォルト）：ブラウザが自動判断
• sync：同期デコード（レンダリングをブロックする可能性）
• async：非同期デコード（画像が段階的に表示される可能性）

使用シナリオ比較

属性の組み合わせ効果

単独設定の場合

• loadingのみ設定：読み込みタイミングのみ制御、デコードはブラウザ任せ
• decodingのみ設定：デコード動作のみ制御、読み込みはブラウザ任せ

組み合わせ設定例

<!-- 遅延読み込み＋非同期デコード -->
<img src="image.jpg" loading="lazy" decoding="async">

<!-- 即時読み込み＋同期デコード -->
<img src="important.jpg" loading="eager" decoding="sync">

全く設定しない場合

ブラウザが完全に自動判断しますが、最適な動作とは限りません。

実際のパフォーマンス影響

WebPageTestとLighthouseによるテストデータ：

1. loading="lazy"の効果：
   • ファーストビュー表示時間 15-30%短縮
   • 全体のページ読み込み時間 20-40%短縮
2. decoding="async"の効果：
   • メインスレッドのブロック時間 10-20%減少
   • LCP（Largest Contentful Paint）5-15%改善

ブラウザ互換性

• loading：Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+
• decoding：Chrome 65+、Firefox 63+、Edge 79+、Safari 11.1+

ベストプラクティス

ファーストビュー重要画像：

<img src="hero.jpg" loading="eager" decoding="sync">

非ファーストビュー画像：

<img src="content.jpg" loading="lazy" decoding="async">

不明な場合は遅延読み込みを基本に：

<img src="general.jpg" loading="lazy">

小さいアイコンやSVGには特別な設定は不要です。

よくある質問（FAQ）

Q1. loading属性って必ず指定した方がいい？

A. はい、画像が多いページではloading="lazy"を使うことで表示速度が改善されます。

Q2. eagerとlazy、どっちが良いの？

A. ファーストビューにはeager、それ以外にはlazyが最適です。

Q3. decoding属性は指定しなくても大丈夫？

A. autoでも問題ありませんが、asyncを指定すれば描画負荷を減らせます。

Q4. loadingとdecodingは一緒に使ってもいい？

A. はい、組み合わせて使用することでパフォーマンス最適化が可能です。

Q5. 古いブラウザでも動作する？

A. 主要モダンブラウザはすべて対応済みです。Internet Explorerは非対応です。

Q6. SVGにも設定するべき？

A. 通常は不要です。ファイルが小さいため読み込み負荷が軽く、最適化の効果も限定的です。