Optimize the image on the subscribe page (#1247)

* optimize image on the subscribe page

* mobile files, fix

Author: trean

qdrant-landing/content/subscribe/_index.md

@@ -4,8 +4,9 @@ section_title: Subscribe
 subtitle: Subscribe 
 description: Subscribe 
 image: 
-  src: /img/subscribe.svg
-  srcMobile: /img/mobile/subscribe.svg
+  src: /img/subscribe.webp
+  srcMobile: /img/mobile/subscribe.webp
+  # always add png image to the same folder as webp image for compatibility with older browsers
   alt: Astronaut
 form:
   title: Sign up for Qdrant Updates

qdrant-landing/themes/qdrant-2024/layouts/partials/subscribe.html

@@ -12,19 +12,37 @@ <h5 class="subscribe-block__title">{{ .Params.form.title }}</h5>
         <!--        </form>-->
 
         {{ with (.Site.GetPage "/headless/newsletter") }}
-        {{ partial "hubspot-form.html" (dict "hubspotFormOptions" .Params.hubspotFormOptions "id" "subscribe-page" "context" . "classes" "subscribe-block__hs-form") }}
+          {{ partial "hubspot-form.html" (dict "hubspotFormOptions" .Params.hubspotFormOptions "id" "subscribe-page" "context" . "classes" "subscribe-block__hs-form") }}
         {{ end }}
       </div>
     </div>
-    <img class="subscribe-body__image" src="{{ .Params.image.src }}" alt="{{ .Params.image.alt }}" />
-    <img class="subscribe-body__image-mobile" src="{{ .Params.image.srcMobile }}" alt="{{ .Params.image.alt }}" />
+    <picture>
+      <source srcset="{{ .Params.image.src }}" type="image/png" />
+      <img
+        class="subscribe-body__image"
+        src="{{ .Params.image.src | replaceRE "\\.[^.]+$" ".png" }} "
+        alt="{{ .Params.image.alt }}"
+        loading="lazy"
+      />
+    </picture>
+    <picture>
+      <source srcset="{{ .Params.image.srcMobile }}" type="image/png" />
+      <img
+        class="subscribe-body__image-mobile"
+        src="{{ .Params.image.srcMobile | replaceRE "\\.[^.]+$" ".png" }}"
+        alt="{{ .Params.image.alt }}"
+        loading="lazy"
+      />
+    </picture>
   </div>
   <div class="subscribe-header">
     <p class="subscribe-header__rights">{{ .Params.footer.rights | safeHTML }}</p>
     <a class="subscribe-header__link" href="{{ .Params.footer.termsLink.url }}">{{ .Params.footer.termsLink.text }}</a>
     <a class="subscribe-header__link" href="{{ .Params.footer.policyLink.url }}">
       {{ .Params.footer.policyLink.text }}
     </a>
-    <a class="subscribe-header__link" href="{{ .Params.footer.impressumLink.url }}">{{ .Params.footer.impressumLink.text }}</a>
+    <a class="subscribe-header__link" href="{{ .Params.footer.impressumLink.url }}"
+      >{{ .Params.footer.impressumLink.text }}</a
+    >
   </div>
 </section>