diff --git a/site/_includes/icons/bootstrap-stack.svg b/site/_includes/icons/bootstrap-stack.svg
new file mode 100644
index 000000000000..2ced27898f8b
--- /dev/null
+++ b/site/_includes/icons/bootstrap-stack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewBox="0 0 1024 860"><defs><linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#5C24AE"/><stop offset="100%" stop-color="#30135A"/></linearGradient><path id="b" d="M355.967 242.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="a" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter><linearGradient id="f" x1="50%" x2="50%" y1="-17.303%" y2="100%"><stop offset="0%" stop-color="#7331D4"/><stop offset="100%" stop-color="#461B84"/></linearGradient><path id="e" d="M355.967 132.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="d" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter><linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#905BDD"/><stop offset="100%" stop-color="#5521A0"/></linearGradient><path id="h" d="M355.967 22.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="g" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter></defs><g fill="none"><g transform="translate(75 23)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/></g><g transform="translate(75 23)"><use fill="#000" filter="url(#d)" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/></g><g transform="translate(75 23)"><use fill="#000" filter="url(#g)" xlink:href="#h"/><use fill="url(#i)" xlink:href="#h"/></g><path fill="#FFF" d="M558.273 447.667L308.036 279.5l97.982-65.847c42.83-28.784 96.789-31.483 134.245-6.311 26.044 17.502 31.214 46.615 11.444 65.724l1.389.934c38.324-19.932 84.107-18.527 117.396 3.845 44.046 29.6 38.671 68.419-14.561 104.193l-97.658 65.629zM447.112 331.01l49.942-33.562c36.935-24.822 42.31-48.249 15.224-66.451-24.798-16.665-55.49-14.453-85.851 5.95l-59.641 40.081 80.326 53.982zm176.532 35.663c37.63-25.289 42.136-48.832 13.203-68.276-28.932-19.444-64.163-15.614-104.042 11.186l-58.789 39.508 87.92 59.084 61.708-41.502z"/></g></svg>
\ No newline at end of file
diff --git a/site/docs/4.1/assets/img/bootstrap-stack.png b/site/docs/4.1/assets/img/bootstrap-stack.png
deleted file mode 100644
index 7cae17fe2e73..000000000000
Binary files a/site/docs/4.1/assets/img/bootstrap-stack.png and /dev/null differ
diff --git a/site/docs/4.1/assets/img/bootstrap-themes.png b/site/docs/4.1/assets/img/bootstrap-themes.png
index 3876a18ee335..15f33f3f7bc7 100644
Binary files a/site/docs/4.1/assets/img/bootstrap-themes.png and b/site/docs/4.1/assets/img/bootstrap-themes.png differ
diff --git a/site/docs/4.1/assets/img/bootstrap-themes@2x.png b/site/docs/4.1/assets/img/bootstrap-themes@2x.png
new file mode 100644
index 000000000000..3876a18ee335
Binary files /dev/null and b/site/docs/4.1/assets/img/bootstrap-themes@2x.png differ
diff --git a/site/docs/4.1/assets/img/examples/album.png b/site/docs/4.1/assets/img/examples/album.png
new file mode 100644
index 000000000000..694b3b2d203c
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/album.png differ
diff --git a/site/docs/4.1/examples/screenshots/album.png b/site/docs/4.1/assets/img/examples/album@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/album.png
rename to site/docs/4.1/assets/img/examples/album@2x.png
diff --git a/site/docs/4.1/assets/img/examples/blog.png b/site/docs/4.1/assets/img/examples/blog.png
new file mode 100644
index 000000000000..6d6c8356bc95
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/blog.png differ
diff --git a/site/docs/4.1/examples/screenshots/blog.png b/site/docs/4.1/assets/img/examples/blog@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/blog.png
rename to site/docs/4.1/assets/img/examples/blog@2x.png
diff --git a/site/docs/4.1/assets/img/examples/carousel.png b/site/docs/4.1/assets/img/examples/carousel.png
new file mode 100644
index 000000000000..abca5b3db691
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/carousel.png differ
diff --git a/site/docs/4.1/examples/screenshots/carousel.png b/site/docs/4.1/assets/img/examples/carousel@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/carousel.png
rename to site/docs/4.1/assets/img/examples/carousel@2x.png
diff --git a/site/docs/4.1/assets/img/examples/checkout.png b/site/docs/4.1/assets/img/examples/checkout.png
new file mode 100644
index 000000000000..7af2e2efa826
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/checkout.png differ
diff --git a/site/docs/4.1/examples/screenshots/checkout.png b/site/docs/4.1/assets/img/examples/checkout@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/checkout.png
rename to site/docs/4.1/assets/img/examples/checkout@2x.png
diff --git a/site/docs/4.1/assets/img/examples/cover.png b/site/docs/4.1/assets/img/examples/cover.png
new file mode 100644
index 000000000000..5458ff11d389
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/cover.png differ
diff --git a/site/docs/4.1/examples/screenshots/cover.png b/site/docs/4.1/assets/img/examples/cover@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/cover.png
rename to site/docs/4.1/assets/img/examples/cover@2x.png
diff --git a/site/docs/4.1/assets/img/examples/dashboard.png b/site/docs/4.1/assets/img/examples/dashboard.png
new file mode 100644
index 000000000000..1ef0c39250b6
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/dashboard.png differ
diff --git a/site/docs/4.1/examples/screenshots/dashboard.png b/site/docs/4.1/assets/img/examples/dashboard@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/dashboard.png
rename to site/docs/4.1/assets/img/examples/dashboard@2x.png
diff --git a/site/docs/4.1/assets/img/examples/floating-labels.png b/site/docs/4.1/assets/img/examples/floating-labels.png
new file mode 100644
index 000000000000..c836eadbb86a
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/floating-labels.png differ
diff --git a/site/docs/4.1/examples/screenshots/floating-labels.png b/site/docs/4.1/assets/img/examples/floating-labels@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/floating-labels.png
rename to site/docs/4.1/assets/img/examples/floating-labels@2x.png
diff --git a/site/docs/4.1/assets/img/examples/grid.png b/site/docs/4.1/assets/img/examples/grid.png
new file mode 100644
index 000000000000..b3b5b35650c3
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/grid.png differ
diff --git a/site/docs/4.1/examples/screenshots/grid.png b/site/docs/4.1/assets/img/examples/grid@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/grid.png
rename to site/docs/4.1/assets/img/examples/grid@2x.png
diff --git a/site/docs/4.1/assets/img/examples/jumbotron.png b/site/docs/4.1/assets/img/examples/jumbotron.png
new file mode 100644
index 000000000000..afca61a7c5f2
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/jumbotron.png differ
diff --git a/site/docs/4.1/examples/screenshots/jumbotron.png b/site/docs/4.1/assets/img/examples/jumbotron@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/jumbotron.png
rename to site/docs/4.1/assets/img/examples/jumbotron@2x.png
diff --git a/site/docs/4.1/assets/img/examples/navbar-bottom.png b/site/docs/4.1/assets/img/examples/navbar-bottom.png
new file mode 100644
index 000000000000..e9f0abc95233
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/navbar-bottom.png differ
diff --git a/site/docs/4.1/examples/screenshots/navbar-bottom.png b/site/docs/4.1/assets/img/examples/navbar-bottom@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/navbar-bottom.png
rename to site/docs/4.1/assets/img/examples/navbar-bottom@2x.png
diff --git a/site/docs/4.1/assets/img/examples/navbar-fixed.png b/site/docs/4.1/assets/img/examples/navbar-fixed.png
new file mode 100644
index 000000000000..c839602a7f62
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/navbar-fixed.png differ
diff --git a/site/docs/4.1/examples/screenshots/navbar-fixed.png b/site/docs/4.1/assets/img/examples/navbar-fixed@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/navbar-fixed.png
rename to site/docs/4.1/assets/img/examples/navbar-fixed@2x.png
diff --git a/site/docs/4.1/assets/img/examples/navbar-static.png b/site/docs/4.1/assets/img/examples/navbar-static.png
new file mode 100644
index 000000000000..faebe34511a5
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/navbar-static.png differ
diff --git a/site/docs/4.1/examples/screenshots/navbar-static.png b/site/docs/4.1/assets/img/examples/navbar-static@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/navbar-static.png
rename to site/docs/4.1/assets/img/examples/navbar-static@2x.png
diff --git a/site/docs/4.1/assets/img/examples/navbars.png b/site/docs/4.1/assets/img/examples/navbars.png
new file mode 100644
index 000000000000..874f6d7525c8
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/navbars.png differ
diff --git a/site/docs/4.1/examples/screenshots/navbars.png b/site/docs/4.1/assets/img/examples/navbars@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/navbars.png
rename to site/docs/4.1/assets/img/examples/navbars@2x.png
diff --git a/site/docs/4.1/assets/img/examples/offcanvas.png b/site/docs/4.1/assets/img/examples/offcanvas.png
new file mode 100644
index 000000000000..b5073eba40b8
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/offcanvas.png differ
diff --git a/site/docs/4.1/examples/screenshots/offcanvas.png b/site/docs/4.1/assets/img/examples/offcanvas@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/offcanvas.png
rename to site/docs/4.1/assets/img/examples/offcanvas@2x.png
diff --git a/site/docs/4.1/assets/img/examples/pricing.png b/site/docs/4.1/assets/img/examples/pricing.png
new file mode 100644
index 000000000000..3638c9ef3d05
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/pricing.png differ
diff --git a/site/docs/4.1/examples/screenshots/pricing.png b/site/docs/4.1/assets/img/examples/pricing@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/pricing.png
rename to site/docs/4.1/assets/img/examples/pricing@2x.png
diff --git a/site/docs/4.1/assets/img/examples/product.png b/site/docs/4.1/assets/img/examples/product.png
new file mode 100644
index 000000000000..a8d3dcb8d499
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/product.png differ
diff --git a/site/docs/4.1/examples/screenshots/product.png b/site/docs/4.1/assets/img/examples/product@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/product.png
rename to site/docs/4.1/assets/img/examples/product@2x.png
diff --git a/site/docs/4.1/assets/img/examples/sign-in.png b/site/docs/4.1/assets/img/examples/sign-in.png
new file mode 100644
index 000000000000..53aed97247d4
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/sign-in.png differ
diff --git a/site/docs/4.1/examples/screenshots/sign-in.png b/site/docs/4.1/assets/img/examples/sign-in@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/sign-in.png
rename to site/docs/4.1/assets/img/examples/sign-in@2x.png
diff --git a/site/docs/4.1/assets/img/examples/starter-template.png b/site/docs/4.1/assets/img/examples/starter-template.png
new file mode 100644
index 000000000000..0cbcaa1eb01a
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/starter-template.png differ
diff --git a/site/docs/4.1/examples/screenshots/starter-template.png b/site/docs/4.1/assets/img/examples/starter-template@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/starter-template.png
rename to site/docs/4.1/assets/img/examples/starter-template@2x.png
diff --git a/site/docs/4.1/assets/img/examples/sticky-footer-navbar.png b/site/docs/4.1/assets/img/examples/sticky-footer-navbar.png
new file mode 100644
index 000000000000..f64d666387e5
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/sticky-footer-navbar.png differ
diff --git a/site/docs/4.1/examples/screenshots/sticky-footer-navbar.png b/site/docs/4.1/assets/img/examples/sticky-footer-navbar@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/sticky-footer-navbar.png
rename to site/docs/4.1/assets/img/examples/sticky-footer-navbar@2x.png
diff --git a/site/docs/4.1/assets/img/examples/sticky-footer.png b/site/docs/4.1/assets/img/examples/sticky-footer.png
new file mode 100644
index 000000000000..203ed62f501b
Binary files /dev/null and b/site/docs/4.1/assets/img/examples/sticky-footer.png differ
diff --git a/site/docs/4.1/examples/screenshots/sticky-footer.png b/site/docs/4.1/assets/img/examples/sticky-footer@2x.png
similarity index 100%
rename from site/docs/4.1/examples/screenshots/sticky-footer.png
rename to site/docs/4.1/assets/img/examples/sticky-footer@2x.png
diff --git a/site/docs/4.1/examples/index.html b/site/docs/4.1/examples/index.html
index fbff34ad5c32..d47151252491 100644
--- a/site/docs/4.1/examples/index.html
+++ b/site/docs/4.1/examples/index.html
@@ -15,7 +15,9 @@ <h2>{{ entry.category | capitalize }}</h2>
     {% if forloop.first %}<div class="row">{% endif %}
       <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
         <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/{{ example.name | slugify }}/">
-          <img class="img-thumbnail mb-3" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/{{ example.name | slugify }}.png" alt="{{ example.name }} screenshot" width="960" height="600">
+          <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">
           <h5 class="mb-1">{{ example.name }}</h5>
         </a>
         <p class="text-muted">{{ example.description }}</p>
diff --git a/site/index.html b/site/index.html
index ebe84841fc41..df50c7291c24 100644
--- a/site/index.html
+++ b/site/index.html
@@ -6,7 +6,7 @@
   <div class="container">
     <div class="row align-items-center">
       <div class="col-6 mx-auto col-md-6 order-md-2">
-        <img class="img-fluid mb-3 mb-md-0" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-stack.png" alt="" width="1024" height="860">
+        {% include icons/bootstrap-stack.svg width="512" height="430" class="img-fluid mb-3 mb-md-0" %}
       </div>
       <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
         <h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
@@ -80,7 +80,9 @@ <h3>Official Themes</h3>
     <p>
       Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
     </p>
-    <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="1024" height="388">
+    <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="500" height="200">
     <hr class="half-rule">
     <a href="{{ site.themes }}/" class="btn btn-outline-primary">Browse themes</a>
   </div>