decoding="async" について詳しく調べてみる

この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを

[snaka72]

https://html.spec.whatwg.org/multipage/images.html#decoding-images

[yasu-log]

素晴らしい検証記事。こちらもあわせて読みたい→ https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/

[Lhankor_Mhy]

Chromeでの話なので、その他のブラウザが同じくふるまうかどうかは要確認。

[tmatsuu]

わいわい。メモ

[hapilaki]

“これまではわりと脳死で decoding="async" をつけてきましたが、今回の調査結果を受けて、今後は基本的に decoding 属性なし (decoding="auto") の方針で行きます。キャッシュがあるときに auto でも基本的にチラツキは発生しません

[dorapon2000]

“これまではわりと脳死で decoding="async" をつけてきましたが、今回の調査結果を受けて、今後は基本的に decoding 属性なし (decoding="auto") の方針で行きます。”

[ginpei]

<img>に付けるloading="lazy"とdecoding="async"に関する説明。Chromeの挙動。decodingは指定なしで良さそう。

[yarumato]

“画像表示の速度改善に「decoding="async" をつけろ」をよく見かけるが、多くの人は実際の挙動を理解していない。loading="lazy" をつけていない画像は、ダウンロードされるが、実はビューポート近く以外はデコードされない”

[Pasta-K]

decodeが問題になるケースはほぼ無いはずなので、基本的には設定する必要ないという認識だったけど、その通りだった。しっかりまとめてあって便利。

[diveintounlimit]

HTML Standardを読む限りは余計な設定しないほうが良さそう。

[w_bonbon]

何気なく入れてるパラメータを実際に測定してみるのは素晴らしい事です。

[spark7]

余計なことしないのが吉ってことか。/　ある時点でのあるブラウザの実装がこうなってるってだけの話でもあるが。「現実として Chrome はこのように実装されています」

[saikyo_tongaricorn]

decodingナンモワカラン…

[advancive61]

ありがたい

[so-apps]

一周回って decoding を知らない人と同じになったように見えるが、そうではないのだと思う。

[ledsun]

ダウンロードするときは、ダウンロードしながら取得できたデータから順次デコードしてたりするのかな？