diff --git a/src/app/cheat-sheets/game-base/fluid-wagon-transfer/fluid-wagon-transfer.component.html b/src/app/cheat-sheets/game-base/fluid-wagon-transfer/fluid-wagon-transfer.component.html
index d976830..4cf95f7 100644
--- a/src/app/cheat-sheets/game-base/fluid-wagon-transfer/fluid-wagon-transfer.component.html
+++ b/src/app/cheat-sheets/game-base/fluid-wagon-transfer/fluid-wagon-transfer.component.html
@@ -88,23 +88,40 @@
       <span
         ><strong>Tanker-Pump Alignment <a [routerLink]="[]" fragment="note-alignment">*</a></strong></span
       ><br />
-      <video
-        class="img-fluid rounded"
-        autoplay
-        muted
-        loop
-        src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-wagon-alignment.webm') }}"
-        alt="Tanker-Pump Alignment"
-        title="Tanker-Pump Alignment"
-      ></video>
+      <picture>
+        <source
+          class="img-fluid rounded"
+          loading="lazy"
+          srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-wagon-alignment.avif') }}"
+          alt="Tanker-Pump Alignment"
+          title="Tanker-Pump Alignment"
+          type="image/avif"
+        />
+        <source
+          class="img-fluid rounded"
+          loading="lazy"
+          srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-wagon-alignment.webp') }}"
+          alt="Tanker-Pump Alignment"
+          title="Tanker-Pump Alignment"
+          type="image/webp"
+        />
+        <img
+          class="img-fluid rounded"
+          loading="lazy"
+          src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-wagon-alignment.webp') }}"
+          alt="Tanker-Pump Alignment"
+          title="Tanker-Pump Alignment"
+          type="image/webp"
+        />
+      </picture>
     </div>
     <br />
     <div class="col text-center col-print-3">
       <span><strong>Example Fast Transfer Build</strong></span
       ><br />
       <img
-        loading="lazy"
         class="img-fluid rounded"
+        loading="lazy"
         src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-wagon-fastest-transfer.webp') }}"
         alt="Example Fast Transfer Build"
         title="Example Fast Transfer Build"
@@ -114,15 +131,32 @@
     <div class="col-12 text-center col-lg-5 col-print-4">
       <span><strong>Transfer Rate Comparison</strong></span
       ><br />
-      <video
-        class="img-fluid rounded"
-        autoplay
-        muted
-        loop
-        src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-transfer-rate-comparison.webm') }}"
-        alt="Transfer Rate Comparison"
-        title="Transfer Rate Comparison"
-      ></video>
+      <picture>
+        <source
+          class="img-fluid rounded"
+          loading="lazy"
+          srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-transfer-rate-comparison.avif') }}"
+          alt="Transfer Rate Comparison"
+          title="Transfer Rate Comparison"
+          type="image/avif"
+        />
+        <source
+          class="img-fluid rounded"
+          loading="lazy"
+          srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-transfer-rate-comparison.webp') }}"
+          alt="Transfer Rate Comparison"
+          title="Transfer Rate Comparison"
+          type="image/webp"
+        />
+        <img
+          class="img-fluid rounded"
+          loading="lazy"
+          src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-transfer-rate-comparison.webp') }}"
+          alt="Transfer Rate Comparison"
+          title="Transfer Rate Comparison"
+          type="image/webp"
+        />
+      </picture>
     </div>
   </div>
   <p id="note-alignment">*Trains snap into position when placed at train stations.</p>
@@ -148,8 +182,8 @@ <h4 class="card-title" id="fluid-flow-and-pipe-length">Fluid Flow and Pipe Lengt
 
     <div class="col-8 col-lg-4 text-center">
       <img
-        loading="lazy"
         class="img-fluid rounded limit-img-height"
+        loading="lazy"
         src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-flow-vs-pipe-length.png') }}"
         alt="Flow vs Pipe Length"
         title="Flow vs Pipe Length"
diff --git a/src/app/cheat-sheets/game-base/oil-refining/oil-refining.component.html b/src/app/cheat-sheets/game-base/oil-refining/oil-refining.component.html
index 688be5f..739537b 100644
--- a/src/app/cheat-sheets/game-base/oil-refining/oil-refining.component.html
+++ b/src/app/cheat-sheets/game-base/oil-refining/oil-refining.component.html
@@ -137,28 +137,62 @@ <h4 id="advanced-oil">Advanced Oil</h4>
         <div class="col-6 col-sm-5 col-lg-6 text-center">
           <span><strong>Refinery Plant IO</strong></span
           ><br />
-          <video
-            class="img-fluid rounded"
-            autoplay
-            muted
-            loop
-            src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-refinery.webm') }}"
-            alt="Refinery Plant IO"
-            title="Refinery Plant IO"
-          ></video>
+          <picture>
+            <source
+              class="img-fluid rounded"
+              loading="lazy"
+              srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-refinery.avif') }}"
+              alt="Refinery Plant IO"
+              title="Refinery Plant IO"
+              type="image/avif"
+            />
+            <source
+              class="img-fluid rounded"
+              loading="lazy"
+              srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-refinery.webp') }}"
+              alt="Refinery Plant IO"
+              title="Refinery Plant IO"
+              type="image/webp"
+            />
+            <img
+              class="img-fluid rounded"
+              loading="lazy"
+              src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-refinery.webp') }}"
+              alt="Refinery Plant IO"
+              title="Refinery Plant IO"
+              type="image/webp"
+            />
+          </picture>
         </div>
         <div class="col-6 col-sm-5 col-lg-6 text-center">
           <span><strong>Chemical Plant IO</strong></span
           ><br />
-          <video
-            class="img-fluid rounded"
-            autoplay
-            muted
-            loop
-            src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-chemical-plant.webm') }}"
-            alt="Chemical Plant IO"
-            title="Chemical Plant IO"
-          ></video>
+          <picture>
+            <source
+              class="img-fluid rounded"
+              loading="lazy"
+              srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-chemical-plant.avif') }}"
+              alt="Chemical Plant IO"
+              title="Chemical Plant IO"
+              type="image/avif"
+            />
+            <source
+              class="img-fluid rounded"
+              loading="lazy"
+              srcset="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-chemical-plant.webp') }}"
+              alt="Chemical Plant IO"
+              title="Chemical Plant IO"
+              type="image/webp"
+            />
+            <img
+              class="img-fluid rounded"
+              loading="lazy"
+              src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-io-chemical-plant.webp') }}"
+              alt="Chemical Plant IO"
+              title="Chemical Plant IO"
+              type="image/webp"
+            />
+          </picture>
         </div>
       </div>
     </div>
diff --git a/src/assets/images/fluid-io-chemical-plant.avif b/src/assets/images/fluid-io-chemical-plant.avif
new file mode 100644
index 0000000..c5e196d
Binary files /dev/null and b/src/assets/images/fluid-io-chemical-plant.avif differ
diff --git a/src/assets/images/fluid-io-chemical-plant.webp b/src/assets/images/fluid-io-chemical-plant.webp
new file mode 100644
index 0000000..da4c631
Binary files /dev/null and b/src/assets/images/fluid-io-chemical-plant.webp differ
diff --git a/src/assets/images/fluid-io-refinery.avif b/src/assets/images/fluid-io-refinery.avif
new file mode 100644
index 0000000..ac6730e
Binary files /dev/null and b/src/assets/images/fluid-io-refinery.avif differ
diff --git a/src/assets/images/fluid-io-refinery.webp b/src/assets/images/fluid-io-refinery.webp
new file mode 100644
index 0000000..60a0d0f
Binary files /dev/null and b/src/assets/images/fluid-io-refinery.webp differ
diff --git a/src/assets/images/fluid-transfer-rate-comparison.avif b/src/assets/images/fluid-transfer-rate-comparison.avif
new file mode 100644
index 0000000..9cc0b04
Binary files /dev/null and b/src/assets/images/fluid-transfer-rate-comparison.avif differ
diff --git a/src/assets/images/fluid-transfer-rate-comparison.webp b/src/assets/images/fluid-transfer-rate-comparison.webp
new file mode 100644
index 0000000..8632cce
Binary files /dev/null and b/src/assets/images/fluid-transfer-rate-comparison.webp differ
diff --git a/src/assets/images/fluid-wagon-alignment.avif b/src/assets/images/fluid-wagon-alignment.avif
new file mode 100644
index 0000000..d3b41e0
Binary files /dev/null and b/src/assets/images/fluid-wagon-alignment.avif differ
diff --git a/src/assets/images/fluid-wagon-alignment.webp b/src/assets/images/fluid-wagon-alignment.webp
new file mode 100644
index 0000000..54ed5fa
Binary files /dev/null and b/src/assets/images/fluid-wagon-alignment.webp differ