website: optimize images (#4290)

website/source/assets/stylesheets/consul-connect/components/_text-asset.scss

@@ -40,6 +40,7 @@
       justify-content: unset;
     }
 
+    picture > img,
     img {
       width: 145%;
     }
@@ -95,7 +96,8 @@
       justify-content: center;
     }
 
-    & > img {
+    & > img,
+    picture > img {
       width: 100%;
 
       &.shadow {
@@ -158,7 +160,8 @@
         display: flex;
         flex-direction: column;
 
-        & img {
+        & img,
+        picture {
           margin: 30px 0;
 
           @media (max-width: 767px) {
@@ -197,7 +200,7 @@
       background-repeat: no-repeat;
       background-size: 100%;
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22"><path fill="#CA2171" d="M21.293 1.298L11 11.591 8.707 9.298a1 1 0 1 0-1.414 1.414l3 3a.997.997 0 0 0 1.414 0l11-11a1 1 0 1 0-1.414-1.414M22 10.075v.93a10.925 10.925 0 0 1-3.227 7.777A10.926 10.926 0 0 1 11 22h-.007C4.929 21.996-.003 17.058 0 10.993a10.927 10.927 0 0 1 3.226-7.776A10.927 10.927 0 0 1 10.999 0h.008c1.551 0 3.055.32 4.47.952a1 1 0 1 1-.815 1.826A8.926 8.926 0 0 0 11.006 2H11a8.938 8.938 0 0 0-6.36 2.632A8.938 8.938 0 0 0 2 10.994c-.003 4.963 4.032 9.003 8.995 9.006H11c2.401 0 4.66-.935 6.36-2.633A8.936 8.936 0 0 0 20 11.005v-.93a1 1 0 1 1 2 0"/></svg>');
-      content: "";
+      content: '';
       display: block;
       float: left;
       height: 24px;

website/source/configuration.html.erb

@@ -71,7 +71,17 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/ui-kv-store.jpg' alt='Service Registry'>
+          <picture>
+            <source type="image/webp" srcset="
+              /assets/images/consul-connect/ui-kv-store/ui-kv-store_230.webp 230w,
+              /assets/images/consul-connect/ui-kv-store/ui-kv-store_986.webp 986w,
+              /assets/images/consul-connect/ui-kv-store/ui-kv-store_1290.webp 1290w" />
+             <source type="image/jpg" srcset="
+              /assets/images/consul-connect/ui-kv-store/ui-kv-store_230.jpg 230w,
+              /assets/images/consul-connect/ui-kv-store/ui-kv-store_986.jpg 986w,
+              /assets/images/consul-connect/ui-kv-store/ui-kv-store_1290.jpg 1290w" />
+              <img src='/assets/images/consul-connect/ui-kv-store/ui-kv-store_1290.jpg' alt='Service Registry'>
+          </picture>
         </div>
       </div>
     </div>

website/source/discovery.html.erb

@@ -69,7 +69,17 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/ui-health-checks.jpg' alt='Service Registry'>
+          <picture>
+            <source type="image/webp" srcset="
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_230.webp 230w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_690.webp 690w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_1290.webp 1290w" />
+             <source type="image/jpg" srcset="
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_230.jpg 230w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_690.jpg 690w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_1290.jpg 1290w" />
+              <img src='/assets/images/consul-connect/ui-health-checks/ui-health-checks_1290.jpg' alt='Service Registry'>
+          </picture>
         </div>
       </div>
     </div>
@@ -201,7 +211,17 @@ web-frontend.service.consul. 0 IN A <code class='keyword'>10.0.1.109</code></cod
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/ui-health-checks.jpg' alt='Service Registry'>
+          <picture>
+            <source type="image/webp" srcset="
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_230.webp 230w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_690.webp 690w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_1290.webp 1290w" />
+             <source type="image/jpg" srcset="
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_230.jpg 230w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_690.jpg 690w,
+              /assets/images/consul-connect/ui-health-checks/ui-health-checks_1290.jpg 1290w" />
+              <img src='/assets/images/consul-connect/ui-health-checks/ui-health-checks_1290.jpg' alt='Health Checks'>
+          </picture>
         </div>
       </div>
     </div>

website/source/index.html.erb

@@ -189,7 +189,17 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/grid_1.png' alt='Run and Connect Anywhere'>
+          <picture>
+            <source type="image/webp" srcset="
+              /assets/images/consul-connect/grid_1/grid_1_300.webp 300w,
+              /assets/images/consul-connect/grid_1/grid_1_715.webp 715w,
+              /assets/images/consul-connect/grid_1/grid_1_1256.webp 1256w" />
+             <source type="image/png" srcset="
+              /assets/images/consul-connect/grid_1/grid_1_300.png 300w,
+              /assets/images/consul-connect/grid_1/grid_1_715.png 715w,
+              /assets/images/consul-connect/grid_1/grid_1_1256.png 1256w" />
+              <img src='/assets/images/consul-connect/grid_1/grid_1_1256.png' alt='Run and Connect Anywhere'>
+          </picture>
         </div>
       </div>
     </div>
@@ -209,7 +219,17 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/grid_2.png' alt='Extend and Integrate'>
+          <picture>
+            <source type="image/webp" srcset="
+              /assets/images/consul-connect/grid_2/grid_2_300.webp 300w,
+              /assets/images/consul-connect/grid_2/grid_2_704.webp 704w,
+              /assets/images/consul-connect/grid_2/grid_2_1256.webp 1256w" />
+             <source type="image/png" srcset="
+              /assets/images/consul-connect/grid_2/grid_2_300.png 300w,
+              /assets/images/consul-connect/grid_2/grid_2_704.png 704w,
+              /assets/images/consul-connect/grid_2/grid_2_1256.png 1256w" />
+              <img src='/assets/images/consul-connect/grid_2/grid_2_1256.png' alt='Extend and Integrate'>
+          </picture>
         </div>
       </div>
     </div>

website/source/segmentation.html.erb

@@ -78,7 +78,17 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/ui-intentions-list.jpg' alt='Service Access Graph '>
+          <picture>
+            <source type="image/webp" srcset="
+              /assets/images/consul-connect/ui-intentions-list/ui-intentions-list_230.webp 230w,
+              /assets/images/consul-connect/ui-intentions-list/ui-intentions-list_844.webp 844w,
+              /assets/images/consul-connect/ui-intentions-list/ui-intentions-list_1290.webp 1290w" />
+             <source type="image/jpg" srcset="
+              /assets/images/consul-connect/ui-intentions-list/ui-intentions-list_230.jpg 230w,
+              /assets/images/consul-connect/ui-intentions-list/ui-intentions-list_844.jpg 844w,
+              /assets/images/consul-connect/ui-intentions-list/ui-intentions-list_1290.jpg 1290w" />
+              <img src='/assets/images/consul-connect/ui-intentions-list/ui-intentions-list_1290.jpg' alt='Service Access Graph'>
+          </picture>
         </div>
       </div>
     </div>
@@ -97,7 +107,17 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/grid_3.png' alt='Secure services across any runtime platform'>
+          <picture>
+            <source type="image/webp" srcset="
+              /assets/images/consul-connect/grid_3/grid_3_300.webp 300w,
+              /assets/images/consul-connect/grid_3/grid_3_976.webp 976w,
+              /assets/images/consul-connect/grid_3/grid_3_1256.webp 1256w" />
+             <source type="image/png" srcset="
+              /assets/images/consul-connect/grid_3/grid_3_300.png 300w,
+              /assets/images/consul-connect/grid_3/grid_3_976.png 976w,
+              /assets/images/consul-connect/grid_3/grid_3_1256.png 1256w" />
+              <img src='/assets/images/consul-connect/grid_3/grid_3_1256.png' alt='Secure services across any runtime platform'>
+          </picture>
         </div>
       </div>
     </div>