【徹底解説】imgタグのdecoding属性は絶対に指定した方が良い

こんにちは。今回はimgタグのdecoding属性の適切な指定方法とその効果について解説していきます。

概要
「レンダリングをブロックする」とは
画像のデコードとは
ブラウザ対応状況
まとめ

概要

画像のデコード（後述）方法を制御する属性です。この属性は以下の3つの値を取ることができます。結論だけ言えば、とにかくasyncを指定しておけば読み込みが速くなります。

async: 画像のデコードを非同期に行うように指示します。これはページのレンダリングをブロックするのを防ぎ、ページの読み込み速度を向上させることができます。
sync: 画像のデコードを同期的に行うように指示します。画像がすぐに表示されることを保証しますが、大きな画像をデコードするとページのレンダリングがブロックされる可能性があります。
auto: ブラウザにデコード方法を自動的に決定するように指示します。ページの他の要素や画像のサイズや種類などの要素に基づいて最適なデコード戦略を選択します。

参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

さて、非常にややこしくなってきましたね。笑

まず「レンダリングをブロックする」とは何なのか説明します。

「レンダリングをブロックする」とは

その文言の通り、レンダリング（＝画面への描画）を止めてしまうことを言います。代表的なのは、画像、CSS、JavaScriptなどの外部リソースを読み込む時に発生することでしょう。例えば以下のようなHTMLがあったとします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./resources/styles/style.css" /> 
  </head>
  <body>
    <!-- 省略 -->
  </body>
</html>

7行目でlinkタグを使ってCSSファイルを読み込んでいます。この時、CSSファイルの読み込みが完了するまでHTMLの次の行以降が一切読み込まれません。もしCSSファイルの容量が大きいと、しばらくの間画面には何も表示されなくなります。これがレンダリングをブロックするということです。

そして、画像のデコードという行為はこれと同様に完了するまで他の要素の表示を止めてしまうのです。

画像のデコードとは

画像は通常、JPEGやPNGなどの形式でエンコードされた上で通信されます。ブラウザがこれらのデータを受け取ったとき、実はそのまま表示させているのではありません。画面の表示に適したビットマップ形式という別の形式にデコード（つまり、エンコードを解除して画像を再構成）する必要があります。このデコード処理は画像のサイズや複雑さによっては時間がかかる可能性があります。

そしてこのデコード処理は、完了するまでブラウザの他のレンダリングを停止させます。

ここでdecoding属性が登場します。decoding=”async”を指定するとブラウザはレンダリング操作を停止せずデコードを並列的に行うことができます。非同期に処理をするとも言います。これによりページの読み込み速度が速くなります。

デコード処理についての参考はこちらです。