diff --git a/apps/web/public/images/monsters/runtime/ash-rat-560.jpg b/apps/web/public/images/monsters/runtime/ash-rat-560.jpg
new file mode 100644
index 0000000..ee31a18
Binary files /dev/null and b/apps/web/public/images/monsters/runtime/ash-rat-560.jpg differ
diff --git a/apps/web/public/images/monsters/runtime/road-bandit-560.jpg b/apps/web/public/images/monsters/runtime/road-bandit-560.jpg
new file mode 100644
index 0000000..8de9503
Binary files /dev/null and b/apps/web/public/images/monsters/runtime/road-bandit-560.jpg differ
diff --git a/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.html b/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.html
index 5d46fcd..ee418b4 100644
--- a/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.html
+++ b/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.html
@@ -1,10 +1,17 @@
 <article class="encounter-card">
   <div class="encounter-card__artwork-frame">
-    <img
-      class="encounter-card__artwork"
-      [src]="encounter.monster.artworkPath"
-      [alt]="encounter.monster.name"
-    />
+    <picture>
+      @if (runtimeArtworkPath(encounter.monster.artworkPath); as runtimeArtwork) {
+        <source [srcset]="runtimeArtwork" type="image/jpeg" />
+      }
+      <img
+        class="encounter-card__artwork"
+        [src]="encounter.monster.artworkPath"
+        [alt]="encounter.monster.name"
+        loading="lazy"
+        decoding="async"
+      />
+    </picture>
   </div>
   <div class="encounter-card__body">
     <h3 class="encounter-card__name">{{ encounter.monster.name }}</h3>
diff --git a/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.ts b/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.ts
index c741057..aefb280 100644
--- a/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.ts
+++ b/apps/web/src/app/features/hunting/encounter-card/encounter-card.component.ts
@@ -2,6 +2,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { HuntEncounter } from '../../../core/api/game-api.models';
 import { DangerBadgeComponent } from '../../../shared/danger-badge/danger-badge.component';
 
+const runtimeArtworkPaths: Readonly<Record<string, string>> = {
+  '/images/monsters/ash-rat.png': '/images/monsters/runtime/ash-rat-560.jpg',
+  '/images/monsters/road-bandit.png': '/images/monsters/runtime/road-bandit-560.jpg',
+};
+
 @Component({
   selector: 'app-encounter-card',
   imports: [DangerBadgeComponent],
@@ -15,4 +20,8 @@ export class EncounterCardComponent {
   protected onAttack(): void {
     this.attack.emit(this.encounter.id);
   }
+
+  protected runtimeArtworkPath(artworkPath: string): string | undefined {
+    return runtimeArtworkPaths[artworkPath];
+  }
 }