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

2022年9月9日2022年12月16日

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

また、画像のデコードは、ブラウザのメインスレッドをブロックするため表示速度にも影響します。それを調整するためにもimgタグには設定しておきましょう。

imgタグの属性値とは

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

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

decodingは、ブラウザに画像のデコードのヒントをユーザエージェントに明示するものです。
設定できる値と内容は、下記になります。

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

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

imgタグに設定できる属性値で似ているものとしてloading="lazy"があります。こちら画像の遅延ローディングをしたいときに使うものですね。

decoding=“async”	画像のデコードのタイミングを指定する
loading=”lazy”	画像の読み込むタイミングを指定する

微妙に異なる上記二つですが、どちらもメインスレッドの処理を遅延させないために用いるものです。併記をしても特にエラーになったりはしませんが、Google Chromeではloading=”lazy”の方が優先されます。

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

<img src="" alt="" decoding="async">

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

HTML/CSSの基本的な知識があるとWordPressやその他でも流用できておすすめです。今だと書籍で学んでも良いし、スクールに通っても良いし、オンライン講座で勉強しても身に着けることはできます。

料金としてはググる < 書籍 < オンライン講座 < スクールなので、まずは手出しの少ない書籍から始めてみて物足りないようだったら徐々に右に行くのが良いかと思います。いきなりスクールでも良いのですが、教えられること・時間に限りがあるのでどちらにせよ書籍は買って勉強すると思います。

ググっても知識自体は手に入るのですが、断片的に入手するのでどうしても体型的に学ぶことは難しいです。（記事を書いている自分が言うのもなんですが、、、）

オジー

エンジニアのスキルを学ぶ方法でおすすめの書籍やスクールなど紹介しますね！

DMMが運営している「DMM WEBCAMP 学習コース」ですがプログラミングの他に、Webデザインや動画編集、AI・データサイエンスに特化したコースも豊富にあり、学習中・就職のサポート体制も万全です。（さすが大手ですね）