こんにちは！Webブラウザの奥深い仕組みの世界へようこそ。フロントエンドの現場を長年歩んできた私ですが、今でもブラウザという巨大なエンジンが裏側でどれほど必死に働いてくれているかを知ると、愛おしさすら覚えます。

さて、今回はWebサイトを作るときに避けて通れない「画像」のお話です。
「写真を載せたら、なんだかページがカクカクする…」「スクロールすると急に動きが重くなる…」
そんな経験はありませんか？

実はそれ、ブラウザが「見えないところで大量の荷物を一人で抱え込んでパンクしかけている」サインなんです。
今回は、そのお悩みをスッキリ解決してくれる魔法の属性、`decoding=”async”`（非同期デコード）について、一緒に優しく紐解いていきましょう。大丈夫、難しい技術の話も身近な例えですぐに腑に落ちるように解説しますね！

—

1. なぜブラウザは画像表示で「息切れ」してしまうのか？

想像してみてください。あなたは今、人気ハンバーガーショップの「たった一人のレジ打ち店員」です。次々にお客さん（Webページのデータ）がやってきて、注文を受けて、会計をして、商品を渡して…と大忙し。

そんな中、目の前にお客さんがこう注文しました。
「この巨大な段ボール箱いっぱいの『ジグソーパズル』を、今すぐここで全部組み立てて見せて！」

…いやいや、ちょっと待って！と言いたくなりますよね。パズルを組み立てている間は、他のレジ待ちのお客さんは全員ストップ。お店全体の流れが完全に止まってしまいます。

Webブラウザの世界でも、これと全く同じことが起きています。
ブラウザの「メインスレッド」と呼ばれる中心的な働き者は、HTMLを読んで画面の形を作り、JavaScriptを動かし、ユーザーのクリックに反応するという、お店の「オールラウンダー店員」です。

そこに大きなJPEGやPNGの画像ファイルがドカンと届くと、ブラウザはこう処理します。
1. ネットワークから画像をダウンロードする
2. 「デコード（解凍）」する：圧縮された画像データを、画面に表示できる「ピクセルの塊（ビットマップ）」に変換する作業です。これが実はめちゃくちゃ重労働！
3. 画面に描画する

この「2番目のデコード作業」が厄介で、何も指定しないと、ブラウザはこの重労働をメインスレッド（一人きりの店員さん）の目の前で、他の作業を全部止めてやらせてしまうんです。結果として、画面がカクついたり、スクロールが引っかかったりする「フレームドロップ」が起きてしまいます。

—

2. そこで登場するのが、救世主 `decoding` 属性！

「いや、店員さん、パズルの組み立てはバックヤードでこっそりやってよ！」
それをブラウザにお願いできるのが、HTMLの `` タグに指定できる `decoding` 属性 です。

特に今回スポットを当てる `decoding=”async”` は、まさに「バックヤードでの裏方作業」を指示する魔法の呪文です。

`decoding` 属性が選べる3つのモード

1. `decoding=”sync”` （同期）

• デフォルト（何もしないとこれ）。メインスレッドの目の前でパズルを組み立てます。画面の表示がカクつく原因になりがちです。

2. `decoding=”async”` （非同期）

• 今回の主役！ パズルの組み立て（デコード）を別の裏方スタッフ（バックグラウンドスレッド）にお願いします。メインスレッドの仕事が軽くなるため、ページのスクロールやアニメーションが滑らかになります。

3. `decoding=”auto”` （おまかせ）

• ブラウザ自身に「今の状況を見て、いい感じに判断してね」と任せるモードです。

—

3. 実際のコードで見てみましょう

使い方は驚くほどシンプルです。いつもの `` タグに `decoding=”async”` を書き足すだけ。これだけで、ブラウザの働き方がガラリと変わります。

私たちの綺麗なギャラリー

スクロールしてもカクつかない、滑らかな体験を届けます。

たったこれだけの一行ですが、ブラウザのアーキテクチャの視点から見ると、メインスレッドの負荷を劇的に軽減してくれる非常に価値の高いテクニックです。

—

4. でも、ちょっと待って！「全部の画像」につければいいの？

ここで、現場でよくある疑問とつまずきポイントをそっとフォローしておきますね。

「じゃあ、すべての画像に `decoding=”async”` をつければ最強なんですね？」
実は、そうとも限らないのが奥深いところです。

画面のいちばん最初に見える画像（LCP要素）には注意！

スマホを開いて一番最初にパッと目に飛び込んでくる、一番大切なメインビジュアル（ヒーローイメージなど）。これを裏方作業（非同期）に回してしまうとどうなるでしょうか？

裏方「よし、こっそり裏でデコードしとくね！」
ブラウザ「あれ、肝心のメイン画像がまだ届かないな…よし、とりあえず文字だけ出しとこ」
結果として、文字が表示されたあとに、ワンテンポ遅れて画像が「ポコッ」と表示される現象（レイアウトのガタつきや表示遅延）が起きてしまいます。

現場のプロが教える使い分けのコツ

• ファーストビュー（最初に画面に入る部分）のメイン画像：

あえて `decoding=”async”` はつけず、ブラウザに「最優先で今すぐ組み立てて！」と伝えます（あるいはデフォルトのままでOK）。

• スクロールしないと見えない下の方の画像や、ギャラリーの写真：

積極的に `decoding=”async”` をつけて、メインスレッドを自由にしてあげましょう！

—

まとめ

Webブラウザは、私たちが何気なくスクロールしたりクリックしたりする裏側で、一瞬一瞬にものすごい計算と努力をしています。

`decoding=”async”` は、そんなブラウザの「見えない重荷」をそっと肩代わりし、ユーザーには滑らかで気持ちの良いブラウジング体験をプレゼントしてくれる、優しさに満ちたWebの技術です。

明日からのコーディングで、ぜひ「この画像は裏方にお願いしようかな？」と、ブラウザの気持ちに寄り添いながら使ってみてくださいね。あなたの作るWebサイトが、もっと軽やかで心地よいものになりますように！