fix: serve logo as WebP with PNG fallback via picture element

Converts the 120KB PNG logo to 17KB WebP (86% smaller). Both logo instances in the marketing layout use <picture> with WebP source and PNG fallback for maximum browser compatibility.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

lib/towerops_web/components/marketing_layouts.ex

@@ -32,11 +32,14 @@ defmodule ToweropsWeb.MarketingLayouts do
           <nav class="relative z-50 flex justify-between">
             <div class="flex items-center md:gap-x-12 dark:bg-slate-950 dark:rounded-lg">
               <.link navigate={~p"/"} aria-label="Home">
-                <img
-                  src="/images/towerops_logo.png"
-                  alt="Towerops"
-                  class="w-48 h-auto sm:w-64 dark:invert dark:mix-blend-screen"
-                />
+                <picture>
+                  <source srcset="/images/towerops_logo.webp" type="image/webp" />
+                  <img
+                    src="/images/towerops_logo.png"
+                    alt="Towerops"
+                    class="w-48 h-auto sm:w-64 dark:invert dark:mix-blend-screen"
+                  />
+                </picture>
               </.link>
             </div>
             <div class="flex items-center gap-x-5 md:gap-x-8">
@@ -68,11 +71,14 @@ defmodule ToweropsWeb.MarketingLayouts do
       <footer class="bg-slate-50 dark:bg-slate-900">
         <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div class="py-16">
-            <img
-              src="/images/towerops_logo.png"
-              alt="Towerops"
-              class="mx-auto w-48 h-auto sm:w-64 dark:invert dark:mix-blend-screen"
-            />
+            <picture>
+              <source srcset="/images/towerops_logo.webp" type="image/webp" />
+              <img
+                src="/images/towerops_logo.png"
+                alt="Towerops"
+                class="mx-auto w-48 h-auto sm:w-64 dark:invert dark:mix-blend-screen"
+              />
+            </picture>
           </div>
           <div class="grid grid-cols-1 gap-8 border-t border-slate-400/10 py-10 lg:grid-cols-4">
             <!-- Product Column -->