Optimize deployment example images

docs/wxm-devices/deployment-examples.mdx

@@ -11,7 +11,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 ### Case 1
 
 <div class="explanation">
-    <img src={useBaseUrl("img/wxm-devices/deployments/good-example-1.jpg")} />
+    <img className="deployment-image" width="900" height="1600" src={useBaseUrl("img/wxm-devices/deployments/good-example-1.webp")} decoding="async" />
     <p>
     The station has been deployed at the highest point of this apartment, which is located at an area, where buildings present similar heights. Thus, the outdoor sensor is over the level of any object around. It is also placed on a >2m mast and, hence, temperature/humidity is not  affected by the roof’s material.
     </p>
@@ -23,8 +23,8 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 
 <div class="explanation horizontal">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/good-example-2.jpg")} />
-      <img src={useBaseUrl("img/wxm-devices/deployments/good-example-3.jpg")} />
+      <img className="deployment-image" width="1600" height="1200" src={useBaseUrl("img/wxm-devices/deployments/good-example-2.webp")} decoding="async" loading="lazy" />
+      <img className="deployment-image" width="1600" height="1200" src={useBaseUrl("img/wxm-devices/deployments/good-example-3.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="copy">
         <p>
@@ -38,7 +38,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 ### Case 3
 
 <div class="explanation">
-    <img src={useBaseUrl("img/wxm-devices/deployments/good-example-4.png")} />
+    <img className="deployment-image" width="1600" height="918" src={useBaseUrl("img/wxm-devices/deployments/good-example-4.webp")} decoding="async" loading="lazy" />
     <p>
     The station has been deployed at the highest point of this apartment, which is located at an area, where other obstacles are not much higher. In addition, the mast is ~7m makes the deployment quite ideal. Sparse thin coconut trees shouldn’t be able to affect measurements. In a case like that the user should tight firmly the wires that stabilise the mast. Otherwise, the mast may significantly oscillate, producing faulty wind and especially rain measurements.
     </p>
@@ -50,8 +50,8 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 
 <div class="explanation horizontal">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/good-example-5.jpg")} />
-      <img src={useBaseUrl("img/wxm-devices/deployments/good-example-6.png")} />
+      <img className="deployment-image" width="1600" height="1187" src={useBaseUrl("img/wxm-devices/deployments/good-example-5.webp")} decoding="async" loading="lazy" />
+      <img className="deployment-image" width="1600" height="1164" src={useBaseUrl("img/wxm-devices/deployments/good-example-6.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="copy">
         <p>
@@ -69,8 +69,8 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 
 <div class="explanation horizontal">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-1.jpg")} />
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-2.jpg")} />
+      <img className="deployment-image" width="1600" height="1200" src={useBaseUrl("img/wxm-devices/deployments/bad-example-1.webp")} decoding="async" loading="lazy" />
+      <img className="deployment-image" width="1600" height="1200" src={useBaseUrl("img/wxm-devices/deployments/bad-example-2.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="copy">
         <p>
@@ -94,12 +94,12 @@ The station should be moved to the terrace of the house (which is not visible in
 
 <div class="explanation horizontal">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-3.jpg")} />
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-4.png")} />
+      <img className="deployment-image" width="1200" height="1600" src={useBaseUrl("img/wxm-devices/deployments/bad-example-3.webp")} decoding="async" loading="lazy" />
+      <img className="deployment-image" width="1200" height="1600" src={useBaseUrl("img/wxm-devices/deployments/bad-example-4.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="images">
-        <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-5.png")} />
-        <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-6.png")} />
+        <img className="deployment-image" width="1200" height="1600" src={useBaseUrl("img/wxm-devices/deployments/bad-example-5.webp")} decoding="async" loading="lazy" />
+        <img className="deployment-image" width="1200" height="1600" src={useBaseUrl("img/wxm-devices/deployments/bad-example-6.webp")} decoding="async" loading="lazy" />
       </div>
     <div class="copy">
         <p>
@@ -117,7 +117,7 @@ The trees at the west and south have a significant impact on wind speed/directio
 
 :::tip
 <div class="explanation">
-    <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-7.png")} />
+    <img className="deployment-image" width="1339" height="1236" src={useBaseUrl("img/wxm-devices/deployments/bad-example-7.webp")} decoding="async" loading="lazy" />
     <p>
     The station could ideally be moved to the roof of the nearby building (using a 3-4m-mast) in order to be placed as higher as possible to avoid at least the closest obstacles. Otherwise (if there is no other available place) a 5-7m-mast could be used at the same place in order to place the weather station above the level of the closer obstacles.
     </p>
@@ -130,7 +130,7 @@ The trees at the west and south have a significant impact on wind speed/directio
 ### Case 7
 
 <div class="explanation">
-    <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-8.jpg")} />
+    <img className="deployment-image" width="1376" height="1600" src={useBaseUrl("img/wxm-devices/deployments/bad-example-8.webp")} decoding="async" loading="lazy" />
     <p>
     The station is placed just a few tens of centimetres over a wooden structure. From this photo it is unknown if there are any obstacles at the north-east-south.
     </p>
@@ -150,8 +150,8 @@ The outdoor sensor should be placed on a higher mast (at least a 2m one) over th
 
 <div class="explanation horizontal">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-9.png")} />
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-10.png")} />
+      <img className="deployment-image" width="1600" height="1200" src={useBaseUrl("img/wxm-devices/deployments/bad-example-9.webp")} decoding="async" loading="lazy" />
+      <img className="deployment-image" width="540" height="414" src={useBaseUrl("img/wxm-devices/deployments/bad-example-10.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="copy">
         <p>
@@ -178,7 +178,7 @@ The user moved the outdoor sensor higher by ~1m increasing the  distance-height
 
 <div class="explanation">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-11.jpg")} />
+      <img className="deployment-image" width="1600" height="1200" src={useBaseUrl("img/wxm-devices/deployments/bad-example-11.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="copy">
         <p>
@@ -201,7 +201,7 @@ In case that chimney is inactive, the outdoor sensor should be placed at the sam
 
 <div class="explanation">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-12.jpg")} />
+      <img className="deployment-image" width="900" height="1600" src={useBaseUrl("img/wxm-devices/deployments/bad-example-12.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="copy">
         <p>
@@ -224,7 +224,7 @@ A balcony is not a place for a weather station. The station should be moved to t
 
 <div class="explanation">
     <div class="images">
-      <img src={useBaseUrl("img/wxm-devices/deployments/bad-example-13.png")} />
+      <img className="deployment-image" width="1600" height="1498" src={useBaseUrl("img/wxm-devices/deployments/bad-example-13.webp")} decoding="async" loading="lazy" />
     </div>
     <div class="copy">
         <p>

src/css/custom.css

@@ -467,3 +467,15 @@ details.alert.alert--info summary::before {
   }
 }
 
+/* Keep deployment examples readable while reserving image aspect ratios. */
+.deployment-image {
+  height: auto;
+  max-height: 640px;
+}
+
+@media only screen and (max-width: 996px) {
+  .deployment-image {
+    max-height: 70vh;
+  }
+}
+