img要素のdecoding属性とloading属性は併用できるのか

Question

Chrome75にてimg要素へのLazyLoad（loading属性）が実装されるとのことですが、img要素にはすでに decoding="async" 属性を設定し非同期復号により高速化する仕様があります。

下記のようにloading属性とdecoding属性は併用する意味があるのか、また考えられるデメリットはあるでしょうか。

<img src="hoge.jpg"
     alt="サンプル画像"
     decoding="async"
     loading="lazy">

Answer 1

正確な挙動はわかりませんが、仕様を読む限り decording 属性はデコードのみ、つまりダウンロード後の解析のタイミングを指定するだけです。
viewport に出現するまでダウンロード自体をしない loading 属性とは違うのではないでしょうか。

命名について言及しています。
https://addyosmani.com/blog/lazy-loading/

Comments

[hibikikudo]

ご回答ありがとうございます。
loadingプロセスの発火を遅延させるのが `loading="lazy"` で
paintingプロセスでの描画タイミングを非同期化させるのが `decoding="async"` ということでしょうか。
ということは、この二つの属性は共存させることは可能っぽいですね。

[x_x]

そう考えています。
decode のほうは一瞬で終わるはずなので確認が難しそうですが

[hibikikudo]

TwitterでAddy Osmaniさんからご回答いただきました。
> <img loading=lazy decoding=async> lazily loads & (could) decode img async. Maybe useful for hi-res images on slow devices? I'd be careful - img will be missing til decoded. The browser may have fetched & decoded it by the time user scrolls image into view without d=a. Measure :)

---翻訳--
<img loading=lazy decoding=async>
は、画像の遅延読み込みとデコードの非同期化ということです。遅いデバイス上の高解像度画像にはおそらく便利でしょう。注意点としては、 imgはデコードされるまで表示されないでしょう。ブラウザは、ユーザが画像を画面にスクロールする前にそれをデコード完了できたかもしれません:)