【徹底解説】imgタグのdecoding属性は指定しなくてもいい

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

※2024/6/24追記改めて調査、実験を行った結果decoding属性は現状不要という意見に変わりましたので内容を大幅に変更しました。

imgタグをもっと理解できる本を発売中です！

各属性の仕様、使い方などの基本に加え、サイズの決まり方やおすすめのCSSなど実践で使えるテクも紹介！

ぜひお買い求めください！

Web制作において一番使われると言っても過言ではないimgタグ。でも気を抜くとすぐに見た目が崩れたり、表示が遅くなったりして困りますよね・・・そんなimgタグを完全攻略します！この本を読めば、・画像を高速で読み込む・思った通りのサイズ...

概要
画像のデコードとは
「レンダリングをブロックする」とは
実際に試してみる
1. キャッシュがある場合
asyncにはデメリットもある
ブラウザ対応状況
総合すると、設定しなくても良さそう
参考

概要

画像のデコード（後述）方法を制御する属性です。この属性は以下の3つの値を取ることができます。ただし実際にブラウザで計測などをした結果、結論としては指定しなくても良いどころか逆効果の可能性すらあるようです。

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

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

デフォルトはautoで、何も指定しなければautoになります。

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

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

画像のデコードとは

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

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

HTML Standard

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

その文言の通り、レンダリング（＝画面への描画）を止めてしまうことを言います。代表的なのは、画像、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ファイルの容量が大きいと、しばらくの間画面には何も表示されなくなります。これがレンダリングをブロックするということです。

そして先ほど説明した画像のデコードは、これと同様にレンダリングをブロックするとされています。
デコード処理が重いとページの読み込み速度に影響が出てしまうわけですね。

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

デコードを待たずに他の要素を表示させるのでユーザーにとってはその方が良さそうですよね。