セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。2024.07.16こんにちは。今回はimgタグのloading属性の適切な指定方法とその効果について解説していきます。imgタグをもっと理解できる本を発売中です!各属性の仕様、使い方などの基本に加え、サイズの決まり方やおすすめのCSSなど実践で使えるテクも紹介!ぜひお買い求めください!【完全攻略】imgタグ解体新書Web制作において一番使われると言っても過言ではないimgタグ。注意点まとめ概要loading属性は、いわゆる非同期読み込みを指定することができる属性です。参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/imgこれの値を”lazy”に指定すると、近くまでスクロールされるまで画像が読み込まれません。その結果、以下2つの利点があります。ページの初回読み込み時間を短縮するデータ通信量を削減するこれらについて解説していきます。役割と効果ページの初回読み込み時間を短縮するまずは遅延読み込みの仕組みについて確認しましょう。画像の遅延読み込みまでは、下記の流れで処理が行われます。そのタイミングで初めて読み込みを開始する」こうすることで初期の読み込みにおいて余計なファイルをダウンロードせず、その分画像以外の読み込みが速くなります。データ通信量を削減する前述の通り、近くまでスクロールされなかった画像は読み込まれません。全員がページの最後までスクロールするとは限らないので、その分の通信量が削減されます。スマホユーザーにとっては通信量の節約になるので嬉しいポイントですね。前はChromeしか対応しておらず現場では使うのを躊躇していましたが、ここ最近は多くのブラウザで利用可能になりました。Useによれば、上記画像の通り93.22%のブラウザで対応しているようです。何を持って現場で使って良いこととするかにもよりますが、僕はもう利用可能な領域かと考えています。注意点このloading=”lazy”、大抵は指定しておけば問題ないのですがファーストビューやページ前半の画像である場合は指定しない方が良いです。明らかに最初から読み込んでおくべきなのに、lazyを指定すると前述の「ブラウザが画像の位置を把する」という手順を不必要に挟んでしまい表示が遅れるからです。googleのガイドラインにもその旨が表記されています。images.web.devというわけで、ページ前半で表示される画像以外に指定しましょう。明示的に遅延読み込みをさせないようにするにはloading=”eager”を指定すればOKです。まとめというわけでimgタグのloading属性についてでした。一時期は画像の遅延読み込みといえばJavaScriptのライブラリを使って仰々しい実装をする必要がありましたが、今はimgタグに1行追加するだけと非常に楽になりました。loading属性以外にもimgタグに必要な属性はいくつかあります。それらを完全に解説し、よりimgタグを理解して使いこなすための本を発売中です!ぜひお買い求めください!【完全攻略】imgタグ解体新書Web制作において一番使われると言っても過言ではないimgタグ。関連記事HTML/CSSを学ぶHTMLタグに必ずクラスをつけるべき理由こんにちは。今回はHTMLタグになぜ必ずクラスをつけるべきなのか、その理由を解説していきます。こんな要素があったとします。htmlはこんな感じ。absoluteなし】一見重なっている要素をlinear-gradientで解決するこんにちは。今回は、デザイン上の見た目は要素が重なっているように見える要素をスマートに実装する方法を解説したいと思います。absolute;を使った実装法がまず思いつくと思いますが、posi...2024.05.05HTML/CSSを学ぶHTML/CSSを学ぶ【徹底解説】CSSでチェックボックス/ラジオボタンをカスタマイズする方法を超絶優しく解説するはい、今回はHTML/CSSの中でも比較的高難易度な、チェックボックスやラジオボタンのカスタマイズについてです。高難易度でありながら実務においては頻出です。gridを使って要素を重ねるこんにちは。gridを使って要素を重ねる方法について考えていこうと思います。ブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。結論から言...2022.12.24HTML/CSSを学ぶHTML/CSSを学ぶmarginとpaddingの違いと正しい使い分け方を完全解説こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。flex;の時に使えるorderプロパティを使って要素の順番を入れ替える方法を紹介します。ようなケースです(下画像参照)。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。