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

この記事を書いてる人

オジー

  • WordPress歴8年
  • 副業でデザイン/開発を受託→法人化
  • WordPressで会社HPをオリジナルテーマで作成
  • 主軸はデザイン、たまにフロントエンドのコードも書きます
  • 事業会社/受託会社 両方経験あり

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

また、画像のデコードは、ブラウザのメインスレッドをブロックするため表示速度にも影響します。それを調整するためにも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=“async”を設定しておくと良いでしょう。(decoding属性は、HTML5.2では定義されていないため、ブラウザによって動作しない可能性があります。)

loading=”lazy”とは何が違うのか

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

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

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

設定方法

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

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

まとめ

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

プログラミングのスキルを学ぶのにおすすめの方法

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

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

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

オジー

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

おすすめ書籍

著:Mana
¥1,980 (2024/06/23 17:10時点 | Amazon調べ)
著:Mana
¥2,237 (2024/06/24 18:19時点 | Amazon調べ)
SBクリエイティブ
¥2,794 (2024/06/19 12:42時点 | Amazon調べ)
著:草野あけみ
¥3,031 (2023/05/09 17:34時点 | Amazon調べ)

おすすめのスクール

就職、転職までサポートの「SAMURAI ENGINEER」

日本で初めてマンツーマンでのプログラミング指導を導入したプログラミング塾「SAMURAI ENGINEER」ですが、専属のインストラクターとのWeb面談のレッスンを通じてプログラミングやWebデザインのスキルを身につけてられ、就職や転職、案件の獲得の方法などをマンツーマンでサポートする体制も整っています。

  • 転職成功率98%
  • レッスン満足度No.1
  • 累計指導実績35,000名以上
  • 挫折率8%
侍エンジニア塾

現役エンジニアによるマンツーマンサポート「DMM WEBCAMP 学習コース」

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

  • 通過率わずか10%の選考を突破した現役エンジニアがサポート
  • チャットにていつでも質問可能
  • 週に2回のメンタリング
  • カナダで開発・実践されてきたICEモデルに基づきカリキュラムを独自開発
  • 希望に応じて転職や副業のサポートを無料で受けることができる
DMM WEBCAMP SKILLS

おすすめオンラインコース

Udemy

オンラインコースで有名どころののUdemyですが、プログラミング、マーケティング、データサイエンスなど、213,000以上のコースを5,700万人の受講生が学んでいます。

  • オンラインですべて完結
  • 豊富なジャンル
  • 一つを買い切り型(一気にお金を払う必要はない)
  • セールも頻繁に開催される
  • Q&A機能で講師に質問可能
  • 動画のお試し視聴

Amazon Kindleのように購入前に評価が見れたり、講座を購入する前に動画のお試し視聴が可能だったりと失敗しないようなサービス設計になっているのがポイント高めです。

Udemyを試してみる

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次