imgタグにはdecoding=“async”を設定しておいた方が良い理由

imgタグ属性値decoding

あまり知られていないですがimgタグにはsrcやalt以外にもdecodingという属性を設定することができます。こちらの属性はimgをどのように読み込むかを指定するもので、設定自体も簡単なので、ぜひ設定しておくことをおすすめいたします。

imgタグの属性値とは

属性値とは、altやsrc、classなどオープンタグの中に書くことができるものです。
imgタグには下記属性値が設定できます。

  • src(必須)
  • srcset
  • sizes
  • alt
  • width
  • height
  • use map
  • ismap
  • referrerpolicy
  • longdesc
  • class
  • cross origin
  • decoding

src以外には設定しなくてもフロント(画面)に表示されますが、SEOやアクセシビリティを意識するならばaltを設定するのも忘れないでしておきたいですね。

imgタグ属性値:decodingとは

decodingは、ブラウザに画像のデコードのヒントを敵強するためのものです。
設定できる値と内容は、

  • sync:他のコンテンツと画像を同期的にデコード
  • async:他のコンテンツと画像を非同期的にデコード
  • auto:規定のモード。ブラウザが選択します

同期的に読み込む場合は、画像を読み込みを他のコンテンツが待つため、他のコンテンツの表示が遅れる可能性があります。

非同期的に読み込むと、そのようなことがなくなるため重要でないimgはdecoding=“asyncc”を設定しておくと良いでしょう。(decoding属性は、HTML5.2では定義されていないため、ブラウザによって動作しない可能性があります。)

設定方法

下記のように記述するだけです。

まとめ

ブラウザによっては、あまり意味をなさない可能性もありますが、属性値を設定するだけで、表示速度少しでも早くできる可能性があるため設定しておいて損はないと思います。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。