HTML基礎 imgタグを使って画像を表示させてみよう 2025 11/25 HTML基礎 </noscript><iframe data-src="https://player.vimeo.com/video/676688112?h=66ca398978" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="lazyload" > 今回書いたコード <img src="/img/hawai.jpeg" alt="ハワイの晴れの空撮写真"> 記事の内容【最新】画像の扱いの追加説明 </noscript><iframe data-src="https://player.vimeo.com/video/839428181?h=855e0145f5" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="lazyload" > 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/ 講座を完了したらクリックしてね！ レッスン完了 次のページへ HTML基礎