Add `loading="lazy"` in images

Backport of #30199 after adapting it for v4-dev.

diff --git a/site/docs/4.4/about/brand.md b/site/docs/4.4/about/brand.md
index 084c36bd88b0d6cfc8a20f00caeb985c9bbc5ceb..5e670091b328a1029199145ef78ff4a9f24bcec8 100644 (file)
--- a/site/docs/4.4/about/brand.md
+++ b/site/docs/4.4/about/brand.md
@@ -14,10 +14,10 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
 
 <div class="bd-brand-logos">
   <div class="bd-brand-item">
-    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
   <div class="bd-brand-item inverse">
-    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
 </div>
 <div class="bd-brand-logos">
@@ -35,13 +35,13 @@ Download the Bootstrap mark in one of three styles, each available as an SVG fil
 
 <div class="bd-brand-logos">
   <div class="bd-brand-item">
-    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
   <div class="bd-brand-item inverse">
-    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
   <div class="bd-brand-item inverse">
-    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
+    <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
 </div>
 

diff --git a/site/docs/4.4/about/team.md b/site/docs/4.4/about/team.md
index 93aecf882fb07d5d3725557807a8604df273f6b3..231e315c5a0b77b9d763c3c2b98af59b3489f29d 100644 (file)
--- a/site/docs/4.4/about/team.md
+++ b/site/docs/4.4/about/team.md
@@ -10,7 +10,7 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
 <div class="list-group mb-3">
   {% for member in site.data.core-team %}
     <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/{{ member.user }}">
-      <img src="https://github.com/{{ member.user }}.png" alt="@{{ member.user }}" width="32" height="32" class="rounded mr-2">
+      <img src="https://github.com/{{ member.user }}.png" alt="@{{ member.user }}" width="32" height="32" class="rounded mr-2" loading="lazy">
       <span>
         <strong>{{ member.name }}</strong> @{{ member.user }}
       </span>

diff --git a/site/docs/4.4/components/navbar.md b/site/docs/4.4/components/navbar.md
index 64dcb3bda4f0cd2804edfdef9870793fdc1173c7..69df11b34050ee41f6d9b3246dced6083d1584d2 100644 (file)
--- a/site/docs/4.4/components/navbar.md
+++ b/site/docs/4.4/components/navbar.md
@@ -98,7 +98,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 <!-- Just an image -->
 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">
-    <img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
+    <img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy">
   </a>
 </nav>
 {% endcapture %}
@@ -108,7 +108,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 <!-- Image and text -->
 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">
-    <img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
+    <img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
     Bootstrap
   </a>
 </nav>

diff --git a/site/docs/4.4/examples/index.html b/site/docs/4.4/examples/index.html
index ced9cc814a8b3604f00ceda1778af04b1fab90c6..6ac9a6718b89b58dcea92826e032813bb2b8bc62 100644 (file)
--- a/site/docs/4.4/examples/index.html
+++ b/site/docs/4.4/examples/index.html
@@ -15,7 +15,7 @@ redirect_from: "/examples/"
           <img class="img-thumbnail mb-3" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png,
                                                   {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}@2x.png 2x"
                                           src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
-                                          alt="{{ example.name }} screenshot" width="480" height="300">
+                                          alt="{{ example.name }} screenshot" width="480" height="300" loading="lazy">
           <h5 class="mb-1">{{ example.name }}</h5>
         </a>
         <p class="text-muted">{{ example.description }}</p>
@@ -40,5 +40,5 @@ redirect_from: "/examples/"
   <img class="d-block img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png,
                                               {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
                                               src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png"
-                                              alt="Bootstrap Themes" width="1151" height="320">
+                                              alt="Bootstrap Themes" width="1151" height="320" loading="lazy">
 </div>

diff --git a/site/index.html b/site/index.html
index adae306b5e8336935be566a70903b6023f76d851..648458e0835175641245334230fedab93aa68191 100644 (file)
--- a/site/index.html
+++ b/site/index.html
@@ -96,7 +96,7 @@ gem install bootstrap -v {{ site.current_ruby_version }}
         <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png,
                                                     {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
                                                     src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png"
-                                                    alt="Bootstrap Icons" width="966" height="600">
+                                                    alt="Bootstrap Icons" width="966" height="600" loading="lazy">
       </div>
     </div>
 
@@ -118,7 +118,7 @@ gem install bootstrap -v {{ site.current_ruby_version }}
         <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
                                                     {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
                                                     src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png"
-                                                    alt="Bootstrap Themes" width="700" height="500">
+                                                    alt="Bootstrap Themes" width="700" height="500" loading="lazy">
       </div>
     </div>
   </div>