Add WebP image optimization with <picture> elements for browser-native format negotiation

- Convert all 14 images to WebP (quality 82)
- Wrap gallery and work section images in <picture> elements with WebP source + JPG/PNG fallback
- Update meta/schema og:image to reference .webp files
- Browsers supporting WebP will load smaller images (~40-60% smaller than JPG)

index.html

@@ -15,7 +15,7 @@
     <meta property="og:url" content="https://WilliamsPressureWashingServices.com/">
     <meta property="og:title" content="Williams Pressure Washing Services | Professional Cleaning">
     <meta property="og:description" content="Professional pressure washing for truck fleets, bus fleets, houses, and storefronts in Coshocton, OH. If it's dirty, we'll clean it.">
-    <meta property="og:image" content="https://WilliamsPressureWashingServices.com/img/og-banner.jpg">
+    <meta property="og:image" content="https://WilliamsPressureWashingServices.com/img/og-banner.webp">
     <meta property="og:locale" content="en_US">
     <meta property="og:site_name" content="Williams Pressure Washing Services">
 
@@ -24,7 +24,7 @@
     <meta name="twitter:url" content="https://WilliamsPressureWashingServices.com/">
     <meta name="twitter:title" content="Williams Pressure Washing Services">
     <meta name="twitter:description" content="Professional pressure washing for truck fleets, bus fleets, houses, and storefronts in Coshocton, OH.">
-    <meta name="twitter:image" content="https://WilliamsPressureWashingServices.com/img/og-banner.jpg">
+    <meta name="twitter:image" content="https://WilliamsPressureWashingServices.com/img/og-banner.webp">
 
     <!-- Favicon -->
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon.png">
@@ -49,7 +49,7 @@
       "serviceType": ["Pressure Washing", "Truck Fleet Washing", "Bus Fleet Washing", "House Washing", "Storefront Cleaning"],
       "priceRange": "$",
       "openingHours": "Mo-Sa 07:00-19:00",
-      "image": "https://WilliamsPressureWashingServices.com/img/og-banner.jpg",
+      "image": "https://WilliamsPressureWashingServices.com/img/og-banner.webp",
       "sameAs": []
     }
     </script>
@@ -226,8 +226,14 @@
             <div class="gallery-grid">
                 <div class="gallery-item">
                     <div class="gallery-before-after">
-                        <img src="img/before-truck.jpg" alt="Before: Dirty truck fleet exterior covered in grime and road film" loading="lazy">
+                        <picture>
-                        <img src="img/after-truck.jpg" alt="After: Clean truck fleet with restored appearance" loading="lazy">
+                            <source srcset="img/before-truck.webp" type="image/webp">
+                            <img src="img/before-truck.jpg" alt="Before: Dirty truck fleet exterior covered in grime and road film" loading="lazy">
+                        </picture>
+                        <picture>
+                            <source srcset="img/after-truck.webp" type="image/webp">
+                            <img src="img/after-truck.jpg" alt="After: Clean truck fleet with restored appearance" loading="lazy">
+                        </picture>
                         <div class="gallery-label gallery-label-before">Before</div>
                         <div class="gallery-label gallery-label-after">After</div>
                     </div>
@@ -235,8 +241,14 @@
                 </div>
                 <div class="gallery-item">
                     <div class="gallery-before-after">
-                        <img src="img/before-house.jpg" alt="Before: Dirty house siding with algae and mildew" loading="lazy">
+                        <picture>
-                        <img src="img/after-house.jpg" alt="After: Clean house siding restored to original color" loading="lazy">
+                            <source srcset="img/before-house.webp" type="image/webp">
+                            <img src="img/before-house.jpg" alt="Before: Dirty house siding with algae and mildew" loading="lazy">
+                        </picture>
+                        <picture>
+                            <source srcset="img/after-house.webp" type="image/webp">
+                            <img src="img/after-house.jpg" alt="After: Clean house siding restored to original color" loading="lazy">
+                        </picture>
                         <div class="gallery-label gallery-label-before">Before</div>
                         <div class="gallery-label gallery-label-after">After</div>
                     </div>
@@ -244,8 +256,14 @@
                 </div>
                 <div class="gallery-item">
                     <div class="gallery-before-after">
-                        <img src="img/before-storefront.jpg" alt="Before: Grimy storefront windows and entrance" loading="lazy">
+                        <picture>
-                        <img src="img/after-storefront.jpg" alt="After: Sparkling clean storefront" loading="lazy">
+                            <source srcset="img/before-storefront.webp" type="image/webp">
+                            <img src="img/before-storefront.jpg" alt="Before: Grimy storefront windows and entrance" loading="lazy">
+                        </picture>
+                        <picture>
+                            <source srcset="img/after-storefront.webp" type="image/webp">
+                            <img src="img/after-storefront.jpg" alt="After: Sparkling clean storefront" loading="lazy">
+                        </picture>
                         <div class="gallery-label gallery-label-before">Before</div>
                         <div class="gallery-label gallery-label-after">After</div>
                     </div>
@@ -263,23 +281,38 @@
             <p class="section-subtitle">Real jobs, real results — no stock photos</p>
             <div class="work-grid">
                 <div class="work-item">
-                    <img src="img/work-1-truck-setup.jpg" alt="Williams Pressure Washing truck fleet washing setup" loading="lazy">
+                    <picture>
+                        <source srcset="img/work-1-truck-setup.webp" type="image/webp">
+                        <img src="img/work-1-truck-setup.jpg" alt="Williams Pressure Washing truck fleet washing setup" loading="lazy">
+                    </picture>
                     <p class="work-caption">Fleet Washing — On-site Setup</p>
                 </div>
                 <div class="work-item">
-                    <img src="img/work-2-action-washing.jpg" alt="Worker pressure washing the truck — showing the real work" loading="lazy">
+                    <picture>
+                        <source srcset="img/work-2-action-washing.webp" type="image/webp">
+                        <img src="img/work-2-action-washing.jpg" alt="Worker pressure washing the truck — showing the real work" loading="lazy">
+                    </picture>
                     <p class="work-caption">In Action — Pressure Washing in Progress</p>
                 </div>
                 <div class="work-item">
-                    <img src="img/work-3-clean-white-truck.jpg" alt="Clean white semi-truck after professional washing" loading="lazy">
+                    <picture>
+                        <source srcset="img/work-3-clean-white-truck.webp" type="image/webp">
+                        <img src="img/work-3-clean-white-truck.jpg" alt="Clean white semi-truck after professional washing" loading="lazy">
+                    </picture>
                     <p class="work-caption">Clean Result — White Semi-Truck</p>
                 </div>
                 <div class="work-item">
-                    <img src="img/work-4-clean-wheels.jpg" alt="Clean truck wheels and chassis" loading="lazy">
+                    <picture>
+                        <source srcset="img/work-4-clean-wheels.webp" type="image/webp">
+                        <img src="img/work-4-clean-wheels.jpg" alt="Clean truck wheels and chassis" loading="lazy">
+                    </picture>
                     <p class="work-caption">Attention to Detail — Wheels & Chassis</p>
                 </div>
                 <div class="work-item">
-                    <img src="img/work-5-clean-side-view.jpg" alt="Clean truck from the side — professional fleet result" loading="lazy">
+                    <picture>
+                        <source srcset="img/work-5-clean-side-view.webp" type="image/webp">
+                        <img src="img/work-5-clean-side-view.jpg" alt="Clean truck from the side — professional fleet result" loading="lazy">
+                    </picture>
                     <p class="work-caption">Final Result — Side View</p>
                 </div>
             </div>