From 345d68cdbb48e9f8c018062df655e65ae95b6ef1 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sun, 10 May 2020 08:13:02 +0300
Subject: [PATCH] Add `loading="lazy"` in images

Backport of #30199 after adapting it for v4-dev.
---
 site/docs/4.4/about/brand.md       | 10 +++++-----
 site/docs/4.4/about/team.md        |  2 +-
 site/docs/4.4/components/navbar.md |  4 ++--
 site/docs/4.4/examples/index.html  |  4 ++--
 site/index.html                    |  4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/site/docs/4.4/about/brand.md b/site/docs/4.4/about/brand.md
index 084c36bd88..5e670091b3 100644
--- 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 93aecf882f..231e315c5a 100644
--- 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 64dcb3bda4..69df11b340 100644
--- 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 ced9cc814a..6ac9a6718b 100644
--- 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 adae306b5e..648458e083 100644
--- 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>