こんにちは。Webブラウザという「巨大な迷宮」を冒険する皆さんに、今日はちょっとした魔法の道具を紹介しにきました。
Webサイトを作っていると、画像が表示される瞬間に「カクッ」と画面が一瞬固まるような違和感を感じたことはありませんか？ まるで、料理を運んできたウェイターさんが、重いお盆を置く瞬間に一瞬だけ体がのけぞるような、あの不自然な間（ま）。
実はそれ、ブラウザが一生懸命「画像の準備」に追われているサインなんです。今日は、そんなブラウザの負担を減らして、Webサイトを滑らかに動かすための小さな切り札、`decoding`属性についてお話ししますね。
—
ブラウザの中の「職人さん」の話
まず、想像してみてください。Webブラウザの中には、ページを組み立てる「大工さん（メインスレッド）」が一人だけ住んでいます。この大工さんは非常に優秀ですが、一度に一つのことしかできません。
HTMLを読み込み、CSSで色を塗り、JavaScriptを動かし……。そこへ突然、大きな画像が送られてきたとしましょう。大工さんはそこで作業をストップして、画像データを「表示できる形（ビットマップデータ）」に変換するデコード作業を始めます。
この作業、実は結構な重労働なんです。大工さんがデコードに集中している間、画面の更新は完全にストップしてしまいます。これが、スクロールしたときに「カクッ」となる原因です。
`decoding=”async”` は「下請けさん」への外注
そこで登場するのが `decoding` 属性です。この属性を使うと、大工さんにこう指示が出せます。
「その画像、今すぐここで解凍しなくていいよ。裏で別のスタッフにやらせておいて！」
`decoding=”async”` と書くだけで、ブラウザは画像処理をメインスレッド（大工さん）から切り離し、バックグラウンドの別のスタッフ（別スレッド）に任せることができます。
実際に書いてみよう
書き方は驚くほどシンプルです。普段の `img` タグにひとつ付け加えるだけ。
これだけで、大工さんは「あ、これは外注していいやつだな」と判断して、他の重要なレイアウト作業を優先できるようになります。その結果、ユーザーがスクロールしたときの感触が、驚くほど軽やかになるんです。
—
どのタイミングで使うのが正解？
「じゃあ、全部の画像に付ければいいの？」と思うかもしれませんが、ちょっと待ってください。ここが現場の面白いところです。
- `decoding=”async”`（おすすめ）: 基本的にはこれでOKです。特に、画面のメインビジュアルや、スクロールしないと見えない画像には最適です。
- `decoding=”sync”`: 「いや、この画像は表示が少しでも遅れると困る！」という場合に使います。例えば、Webアプリのロゴなど、真っ先に表示させたいものですね。
- `decoding=”auto”`: ブラウザにお任せする設定です。実は何も書かないときのデフォルトもこれ。ブラウザは賢いので、基本的にはこれで問題ありません。
もし迷ったら、「ページを開いた瞬間にどうしても一番最初に見せたいロゴ」以外には、`async` を付けてみるという戦略から始めてみてください。
—
大丈夫、一歩ずつ進めばOKです
最初からブラウザの内部構造をすべて理解するのは、誰だって難しいものです。「HTMLを書いたら画像が出る」という当たり前の裏側に、こんな大工さんの奮闘があるんだな、とイメージするだけで、あなたのコードは少しだけ「優しさ」を帯びてきます。
Webサイトを訪れるユーザーは、細かな技術のことは知りません。でも、「なんとなくこのサイト、触り心地がいいな」という感覚は、こうした小さな気遣いの積み重ねで生まれるんです。
今日からあなたのコードに、少しだけ「大工さんへの思いやり」を加えてみませんか？ きっと、あなたの作ったサイトが、誰かのスマホでスッと軽やかに動くはずです。
また何か迷ったら、いつでも聞きに来てくださいね。一緒に一歩ずつ、Webの世界を楽しんでいきましょう！
コメント