Uses webp for home images (#4935)

Uses webp for home page images, saving 200+kb.

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->
Feature

Author: JudahGabriel

apps/pwabuilder/public/assets/new/community-image.webp

@@ -17,7 +17,7 @@ export class CommunityHub extends LitElement {
 
   static get styles() {
     return [
-    css`
+      css`
       #community-panel {
         display: flex;
         align-items: flex-start;
@@ -34,7 +34,7 @@ export class CommunityHub extends LitElement {
         justify-content: center;
       }
 
-      #community-photo img { 
+      #community-photo img {
         width: 500px;
         height: auto;
       }
@@ -65,7 +65,7 @@ export class CommunityHub extends LitElement {
 
        /* < 480px */
        ${smallBreakPoint(css`
-          #community-photo img { 
+          #community-photo img {
             display: none;
           }
           #community-panel {
@@ -82,7 +82,7 @@ export class CommunityHub extends LitElement {
 
       /* 480px - 639px */
       ${mediumBreakPoint(css`
-          #community-photo img { 
+          #community-photo img {
             display: none;
           }
           #success-panel {
@@ -103,11 +103,11 @@ export class CommunityHub extends LitElement {
           }
       `)}
 
-      
+
 
       /* 640px - 1023px */
       ${largeBreakPoint(css`
-          #community-photo img { 
+          #community-photo img {
             max-width: 18em;
             height: auto;
           }
@@ -120,7 +120,7 @@ export class CommunityHub extends LitElement {
       `)}
 
       @media (min-width: 640px) and (max-width: 850px) {
-        #community-photo img { 
+        #community-photo img {
           display: none;
         }
         #success-panel {
@@ -129,23 +129,23 @@ export class CommunityHub extends LitElement {
         }
       }
 
-      
-      
+
+
 
       /*1024px - 1365px*/
       ${xLargeBreakPoint(css`
-          
+
       `)}
 
       @media (min-width: 1024px) and (max-width: 1160px) {
-        #community-photo img { 
+        #community-photo img {
           width: 380px;
         }
       }
 
       /* > 1920px */
       ${xxxLargeBreakPoint(css`
-          #community-photo img { 
+          #community-photo img {
             width: 569px;
             height: auto;
           }
@@ -167,7 +167,7 @@ export class CommunityHub extends LitElement {
     return html`
       <div id="community-panel">
         <div id="community-photo">
-          <img src="/assets/new/community-image.png" alt="social hub image" role="img"/>
+          <img src="/assets/new/community-image.webp" alt="social hub image" role="img"/>
         </div>
         <div id="community-content">
           <h2>Join our community</h2>

apps/pwabuilder/public/assets/new/successBG_1024.webp

@@ -18,7 +18,7 @@ export class SuccessStories extends LitElement {
 
   static get styles() {
     return [
-    css`
+      css`
       #success-panel::before {
         content: "";
       }
@@ -27,7 +27,7 @@ export class SuccessStories extends LitElement {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        background-image: url(/assets/new/successBG_1920.png);
+        background-image: url(/assets/new/successBG_1920.webp);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: right;
@@ -55,7 +55,7 @@ export class SuccessStories extends LitElement {
       /* < 480px */
       ${smallBreakPoint(css`
           #success-panel {
-            background-image: url(/assets/new/successBG_320.png);
+            background-image: url(/assets/new/successBG_320.webp);
             padding: 2em 1em;
           }
           #success-panel h2 {
@@ -65,7 +65,7 @@ export class SuccessStories extends LitElement {
             font-size: 1.75em;
             margin-bottom: .5em;
           }
-          
+
           #success-cards {
             display: flex;
             flex-direction: column;
@@ -79,7 +79,7 @@ export class SuccessStories extends LitElement {
       /* 480px - 639px */
       ${mediumBreakPoint(css`
         #success-panel {
-          background-image: url(/assets/new/successBG_480.png);
+          background-image: url(/assets/new/successBG_480.webp);
           padding: 1em;
           padding-bottom: 2em;
         }
@@ -90,7 +90,7 @@ export class SuccessStories extends LitElement {
           padding-left: 5px;
           margin-bottom: .5em;
         }
-        
+
         #success-cards {
           display: flex;
           flex-direction: column;
@@ -104,7 +104,7 @@ export class SuccessStories extends LitElement {
       /* 640px - 1023px */
       ${largeBreakPoint(css`
           #success-panel {
-            background-image: url(/assets/new/successBG_1024.png);
+            background-image: url(/assets/new/successBG_1024.webp);
             padding-left: 2em;
           }
           #success-panel h2 {
@@ -114,7 +114,7 @@ export class SuccessStories extends LitElement {
 
       @media (min-width: 640px) and (max-width: 850px) {
         #success-panel {
-          background-image: url(/assets/new/successBG_480.png);
+          background-image: url(/assets/new/successBG_480.webp);
           padding: 1em;
           padding-bottom: 2em;
         }
@@ -123,7 +123,7 @@ export class SuccessStories extends LitElement {
           text-align: center;
           width: 100%;
         }
-        
+
         #success-cards {
           display: flex;
           flex-direction: column;
@@ -133,7 +133,7 @@ export class SuccessStories extends LitElement {
           align-self: center;
         }
       }
-      
+
 
       /*1024px - 1365px*/
       ${xLargeBreakPoint(css`