Manually added lazy load

src/app/cheat-sheets/game-base/balancers/balancers.component.html

@@ -33,6 +33,7 @@
         <strong>4x4 belt balancer</strong>
         <br />
         <img
+          loading="lazy"
           class="img-fluid rounded"
           src="{{ APP_SETTINGS.links.getLocalImagePath('balancer-4x4.webp') }}"
           alt="4x4 belt balancer"

src/app/cheat-sheets/game-base/belts/belts.component.html

@@ -60,6 +60,7 @@
         on each tile.
       </p>
       <img
+        loading="lazy"
         class="img-fluid rounded"
         src="{{ APP_SETTINGS.links.getLocalImagePath('belt-signal-circuit.webp') }}"
         alt="Transport Belt Signal"
@@ -90,6 +91,7 @@
       <!-- <strong>Main Bus</strong> <br> -->
       <a href="{{ APP_SETTINGS.links.getLocalImagePath('bus.webp') }}" target="_blank" rel="noopener">
         <img
+          loading="lazy"
           class="img-fluid rounded limit-img-height"
           src="{{ APP_SETTINGS.links.getLocalImagePath('bus.webp') }}"
           alt="Main Bus"
@@ -105,6 +107,7 @@
     <div class="col-12 col-sm-6 col-lg-4 col-print-4 text-center">
       <strong>Underground belts can be side loaded</strong><br />
       <img
+        loading="lazy"
         class="img-fluid rounded limit-img-height"
         src="{{ APP_SETTINGS.links.getLocalImagePath('belt-tip-side-load.webp') }}"
         alt="Side Load Underground"
@@ -114,6 +117,7 @@
     <div class="col-12 col-sm-6 col-lg-4 col-print-4 text-center">
       <strong>Splitters can filter items</strong><br />
       <img
+        loading="lazy"
         class="img-fluid rounded limit-img-height"
         src="{{ APP_SETTINGS.links.getLocalImagePath('belt-tip-filter.webp') }}"
         alt="Splitter Filter"
@@ -123,6 +127,7 @@
     <div class="col-12 col-sm-6 col-lg-4 col-print-4 text-center">
       <strong>Belts can be woven</strong><br />
       <img
+        loading="lazy"
         class="img-fluid rounded limit-img-height"
         src="{{ APP_SETTINGS.links.getLocalImagePath('belt-weaving.webp') }}"
         alt="Woven Belts"

src/app/cheat-sheets/game-base/cargo-wagon-transfer/cargo-wagon-transfer.component.html

@@ -98,6 +98,7 @@
       <span><strong>Cargo Loading Setup</strong></span
       ><br />
       <img
+        loading="lazy"
         class="img-fluid rounded"
         src="{{ APP_SETTINGS.links.getLocalImagePath('train-stack-load.webp') }}"
         alt="Wagon Load"

src/app/cheat-sheets/game-base/combat/combat.component.html

@@ -11,6 +11,7 @@
       </p>
       <a href="https://i.imgur.com/6EenAcn.png">
         <img
+          loading="lazy"
           class="img-fluid rounded full-width"
           src="{{ APP_SETTINGS.links.getLocalImagePath('military-range-comparison.webp') }}"
           alt="Military Range Comparison"

src/app/cheat-sheets/game-base/fluid-wagon-transfer/fluid-wagon-transfer.component.html

@@ -103,6 +103,7 @@
       <span><strong>Example Fast Transfer Build</strong></span
       ><br />
       <img
+        loading="lazy"
         class="img-fluid rounded"
         src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-wagon-fastest-transfer.webp') }}"
         alt="Example Fast Transfer Build"
@@ -147,6 +148,7 @@ <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"
         src="{{ APP_SETTINGS.links.getLocalImagePath('fluid-flow-vs-pipe-length.png') }}"
         alt="Flow vs Pipe Length"

src/app/cheat-sheets/game-base/mining/mining.component.html

@@ -122,6 +122,7 @@
   <div class="row align-items-center">
     <div class="col text-center">
       <img
+        loading="lazy"
         class="img-fluid rounded"
         src="{{ APP_SETTINGS.links.getLocalImagePath('mining-direct-feed.webp') }}"
         alt="Mining Direct Feed"

src/app/cheat-sheets/game-base/modules-and-beacons/modules-and-beacons.component.html

@@ -61,6 +61,7 @@
     </div>
     <div class="col-12 col-lg-6 text-center">
       <img
+        loading="lazy"
         class="img-fluid rounded"
         src="{{ APP_SETTINGS.links.getLocalImagePath('formula-diagram.webp') }}"
         alt="Formula Diagram"

src/app/cheat-sheets/game-base/nuclear-power/nuclear-power.component.html

@@ -155,6 +155,7 @@ <h4 class="card-title" id="nuclear-sre-diagrams">SRE Diagrams</h4>
         reactors
       </p>
       <img
+        loading="lazy"
         class="img-fluid rounded"
         src="{{ APP_SETTINGS.links.getLocalImagePath('nuclear-config-h.webp') }}"
         alt="2x3 Reactor Setup"

src/app/shared/factorio-icon/factorio-icon.component.html

@@ -1,2 +1,2 @@
-<img class="factorio-icon" src="{{ icon?.src }}" alt="{{ icon?.name }}" title="{{ icon?.name }}" />
+<img loading="lazy" class="factorio-icon" src="{{ icon?.src }}" alt="{{ icon?.name }}" title="{{ icon?.name }}" />
 <div class="factorio-icon-text" *ngIf="icon?.text">{{ icon?.text }}</div>