今回書いたコード
<img src="/img/hawai.jpeg" alt="ハワイの晴れの空撮写真">記事の内容
【最新】画像の扱いの追加説明
講座を完了したらクリックしてね!
<img src="/img/hawai.jpeg" alt="ハワイの晴れの空撮写真">decording=“async”ですが、「画像を同期的にデコードする」役割の属性です。
ページの読込み時に、コードも画像も順番に全部読み込んでからページを表示させると遅くなります。
少しでも高速化をしたいために、decording=“async”を使い画像を非同期で読み込ませますね。
loading=“lazy”は、ページ表示時に画像の読み込みはせず、表示位置に近付いたタイミングで読み込みを行う。
それに対し、decoding=“async”は、ページ表示時の画像読み込み自体は発生するが、それらをページの読み込みと並行して行うというものです。スクリーン外に存在する画像も読み込む点に違いがあります。
◎decoding=”async” について詳しく調べてみる
https://zenn.dev/ixkaito/articles/deep-dive-into-decoding
※かなり細かく検証されているので、気になる人は見てみましょう!
実際いろんなケースがありますので、どれが正解か?となると結構難しい話になります。
◎非同期処理の参考記事
https://samehack.com/javascript-async-await/
講座を完了したらクリックしてね!