From e6e1777296d094cae31a977fba32ba83e1fce4aa Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Tue, 2 Jul 2024 11:24:38 -0700
Subject: [PATCH] feat: leverage bunny.net transform classes

---
 package.json                                  |  2 +-
 src/_includes/base.liquid                     |  1 -
 src/_includes/partials/media/grid.liquid      | 20 ++++++++---------
 .../partials/media/watching/grid.liquid       | 12 +++++-----
 .../partials/media/watching/hero.liquid       | 14 ++++++------
 src/_includes/webrings/the-claw.liquid        | 10 ++++-----
 src/assets/styles/defaults/vars.css           |  2 +-
 src/pages/errors/404.html                     | 14 ++++++------
 src/pages/errors/broken.html                  | 14 ++++++------
 src/pages/errors/not-allowed.html             | 14 ++++++------
 src/pages/errors/rate-limit.html              | 14 ++++++------
 src/pages/main/about.md                       | 10 ++++-----
 src/pages/main/books/index.html               | 22 +++++++++----------
 src/pages/main/watching/movie.html            | 14 ++++++------
 src/pages/main/watching/show.html             | 14 ++++++------
 15 files changed, 88 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index 01d92eae..5399038c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.8.5",
+  "version": "19.9.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index cdcc9e3d..ff84da79 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -99,7 +99,6 @@
     <link rel="alternate" href="https://feedpress.me/coryd-movies" title="{{ meta.siteName }}'s movies feed" type="application/rss+xml">
     <link rel="alternate" href="https://feedpress.me/coryd-books" title="{{ meta.siteName }}'s books feed" type="application/rss+xml">
     <link rel="alternate" href="https://feedpress.me/coryd-all" title="{{ meta.siteName }}'s activity feed" type="application/rss+xml">
-    <link type="text/plain" rel="author" href="/humans.txt" />
     <script defer data-domain="coryd.dev" src="/js/script.outbound-links.tagged-events.js"></script>
     <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <script type="application/ld+json">
diff --git a/src/_includes/partials/media/grid.liquid b/src/_includes/partials/media/grid.liquid
index d8988ee4..401d2841 100644
--- a/src/_includes/partials/media/grid.liquid
+++ b/src/_includes/partials/media/grid.liquid
@@ -19,16 +19,16 @@
         {% if shape == 'square' %}
           <img
             srcset="
-              https://cdn.coryd.dev{{ item.image }}?width=200&h=200&aspect_ratio=1:1 200w,
-              https://cdn.coryd.dev{{ item.image }}?width=400&h=400&aspect_ratio=1:1 400w,
-              https://cdn.coryd.dev{{ item.image }}?width=800&h=800&aspect_ratio=1:1 800w,
-              https://cdn.coryd.dev{{ item.image }}?width=1200&h=1200&aspect_ratio=1:1 1200w
+              https://cdn.coryd.dev{{ item.image }}?class=squaresm 200w,
+              https://cdn.coryd.dev{{ item.image }}?class=squaremd 400w,
+              https://cdn.coryd.dev{{ item.image }}?class=squarebase 800w,
+              https://cdn.coryd.dev{{ item.image }}?class=squarelg 1200w
             "
             sizes="(max-width: 450px) 200px,
               (max-width: 850px) 400px,
               (max-width: 100px) 800px,
               1200px"
-            src="https://cdn.coryd.dev{{ item.image }}?width=1200&h=1200&aspect_ratio=1:1"
+            src="https://cdn.coryd.dev{{ item.image }}?class=squarelg"
             alt="{{ alt }}"
             loading="{{ loadingStrategy }}"
             decoding="async"
@@ -38,16 +38,16 @@
         {% else %}
           <img
             srcset="
-              https://cdn.coryd.dev{{ item.image }}?w=200&aspect_ratio=2:3 200w,
-              https://cdn.coryd.dev{{ item.image }}?w=400&aspect_ratio=2:3 400w,
-              https://cdn.coryd.dev{{ item.image }}?w=800&aspect_ratio=2:3 800w,
-              https://cdn.coryd.dev{{ item.image }}?w=1200&aspect_ratio=2:3 1200w
+              https://cdn.coryd.dev{{ item.image }}?class=verticalsm 200w,
+              https://cdn.coryd.dev{{ item.image }}?class=verticalmd 400w,
+              https://cdn.coryd.dev{{ item.image }}?class=verticalbase 800w,
+              https://cdn.coryd.dev{{ item.image }}?class=verticallg 1200w
             "
             sizes="(max-width: 450px) 200px,
               (max-width: 850px) 400px,
               (max-width: 1000px) 800px,
               1200px"
-            src="https://cdn.coryd.dev{{ item.image }}?w=1200&aspect_ratio=2:3"
+            src="https://cdn.coryd.dev{{ item.image }}?class=verticallg"
             alt="{{ alt }}"
             loading="{{ loadingStrategy }}"
             decoding="async"
diff --git a/src/_includes/partials/media/watching/grid.liquid b/src/_includes/partials/media/watching/grid.liquid
index c1c326f2..e2879191 100644
--- a/src/_includes/partials/media/watching/grid.liquid
+++ b/src/_includes/partials/media/watching/grid.liquid
@@ -25,21 +25,21 @@
         {%- endcapture -%}
         <img
           srcset="
-            https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=256 256w,
-            https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=512 512w,
-            https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=1024 1024w,
-            https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=2048 2048w
+            https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm 256w,
+            https://cdn.coryd.dev{{ item.backdrop }}?class=bannermd 512w,
+            https://cdn.coryd.dev{{ item.backdrop }}?class=bannerbase 1024w,
+            https://cdn.coryd.dev{{ item.backdrop }}?class=bannerlg 2048w
           "
           sizes="(max-width: 450px) 256px,
             (max-width: 850px) 512px,
             (max-width: 1000px) 1024px,
             2048px"
-          src="https://cdn.coryd.dev{{ item.backdrop }}?aspect_ratio=1:.5625&width=2048"
+          src="https://cdn.coryd.dev{{ item.backdrop }}?class=bannerlg"
           alt="{{ alt }}"
           loading="{{ loadingStrategy }}"
           decoding="async"
           width="256"
-          height="144"
+          height="170"
         />
       </div>
     </a>
diff --git a/src/_includes/partials/media/watching/hero.liquid b/src/_includes/partials/media/watching/hero.liquid
index e4a129c9..0f9b2fc5 100644
--- a/src/_includes/partials/media/watching/hero.liquid
+++ b/src/_includes/partials/media/watching/hero.liquid
@@ -12,21 +12,21 @@
     </div>
     <img
       srcset="
-        https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=256 256w,
-        https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=512 512w,
-        https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=1024 1024w,
-        https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048 2048w
+        https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm 256w,
+        https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd 512w,
+        https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase 1024w,
+        https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg 2048w
       "
       sizes="(max-width: 450px) 256px,
         (max-width: 850px) 512px,
         (max-width: 1000px) 1024px,
         2048px"
-      src="https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048"
+      src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg"
       alt="{{ alt }}"
       loading="eager"
       decoding="async"
-      width="768"
-      height="432"
+      width="1080"
+      height="720"
     />
   </div>
 </a>
\ No newline at end of file
diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid
index e4598b43..dad88294 100644
--- a/src/_includes/webrings/the-claw.liquid
+++ b/src/_includes/webrings/the-claw.liquid
@@ -2,16 +2,16 @@
   <div class="flex-centered justify-centered">
     <img
       srcset="
-        https://cdn.coryd.dev/assets/webrings/theclaw.png?width=200 200w,
-        https://cdn.coryd.dev/assets/webrings/theclaw.png?width=400 400w,
-        https://cdn.coryd.dev/assets/webrings/theclaw.png?width=800 800w,
-        https://cdn.coryd.dev/assets/webrings/theclaw.png?width=1600 1600w
+        https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w200 200w,
+        https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w400 400w,
+        https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w800 800w,
+        https://cdn.coryd.dev/assets/webrings/theclaw.png?class=w1600 1600w
       "
       sizes="(max-width: 450px) 200px,
         (max-width: 850px) 400px,
         (max-width: 1000px) 800px,
         1600px"
-      src="https://cdn.coryd.dev/assets/webrings/theclaw.png?width=1600"
+      src="https://cdn.coryd.dev/assets/webrings/theclaw.png?class=1600"
       alt="The Claw Webring"
       loading="lazy"
       decoding="async"
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index c3456cf6..26c2c60d 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -110,7 +110,7 @@
   /* aspect ratios */
   --aspect-ratio-square: 1/1;
   --aspect-ratio-vertical: 2/3;
-  --aspect-ratio-banner: 1 / 0.5625;
+  --aspect-ratio-banner: 3/2;
 
   /* transitions */
   --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/pages/errors/404.html b/src/pages/errors/404.html
index c284ed42..31eb3102 100644
--- a/src/pages/errors/404.html
+++ b/src/pages/errors/404.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/404.jpg
 ---
 <img
   srcset="
-    https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=256 256w,
-    https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=512 512w,
-    https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=1024 1024w,
-    https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=2048 2048w
+    https://cdn.coryd.dev/assets/404.jpg?class=bannersm 256w,
+    https://cdn.coryd.dev/assets/404.jpg?class=bannermd 512w,
+    https://cdn.coryd.dev/assets/404.jpg?class=bannerbase 1024w,
+    https://cdn.coryd.dev/assets/404.jpg?class=bannerlg 2048w
   "
   sizes="(max-width: 450px) 256px,
     (max-width: 850px) 512px,
     (max-width: 1000px) 1024px,
     2048px"
-  src="https://cdn.coryd.dev/assets/404.jpg?aspect_ratio=1:.5625&width=2048"
+  src="https://cdn.coryd.dev/assets/404.jpg?class=bannerlg"
   alt="{{ alt }}"
   class="image-banner"
   style="aspect-ratio:1/0.5625"
   loading="eager"
   decoding="async"
-  width="768"
-  height="432"
+  width="1080"
+  height="720"
 />
 <div class="text-centered">
   <h2>{{ title }}</h2>
diff --git a/src/pages/errors/broken.html b/src/pages/errors/broken.html
index 6ba2ff80..cfbd3189 100644
--- a/src/pages/errors/broken.html
+++ b/src/pages/errors/broken.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/broken.jpg
 ---
 <img
   srcset="
-    https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=256 256w,
-    https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=512 512w,
-    https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=1024 1024w,
-    https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=2048 2048w
+    https://cdn.coryd.dev/assets/broken.jpg?class=bannersm 256w,
+    https://cdn.coryd.dev/assets/broken.jpg?class=bannermd 512w,
+    https://cdn.coryd.dev/assets/broken.jpg?class=bannerbase 1024w,
+    https://cdn.coryd.dev/assets/broken.jpg?class=bannerlg 2048w
   "
   sizes="(max-width: 450px) 256px,
     (max-width: 850px) 512px,
     (max-width: 1000px) 1024px,
     2048px"
-  src="https://cdn.coryd.dev/assets/broken.jpg?aspect_ratio=1:.5625&width=2048"
+  src="https://cdn.coryd.dev/assets/broken.jpg?class=bannerlg"
   alt="{{ alt }}"
   class="image-banner"
   style="aspect-ratio:1/0.5625"
   loading="eager"
   decoding="async"
-  width="768"
-  height="432"
+  width="1080"
+  height="720"
 />
 <div class="text-centered">
   <h2>{{ title }}</h2>
diff --git a/src/pages/errors/not-allowed.html b/src/pages/errors/not-allowed.html
index 55f6584f..ccfb4188 100644
--- a/src/pages/errors/not-allowed.html
+++ b/src/pages/errors/not-allowed.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/not-allowed.jpg
 ---
 <img
   srcset="
-    https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=256 256w,
-    https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=512 512w,
-    https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=1024 1024w,
-    https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=2048 2048w
+    https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannersm 256w,
+    https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannermd 512w,
+    https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannerbase 1024w,
+    https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannerlg 2048w
   "
   sizes="(max-width: 450px) 256px,
     (max-width: 850px) 512px,
     (max-width: 1000px) 1024px,
     2048px"
-  src="https://cdn.coryd.dev/assets/not-allowed.jpg?aspect_ratio=1:.5625&width=2048"
+  src="https://cdn.coryd.dev/assets/not-allowed.jpg?class=bannerlg"
   alt="{{ alt }}"
   class="image-banner"
   style="aspect-ratio:1/0.5625"
   loading="eager"
   decoding="async"
-  width="768"
-  height="432"
+  width="1080"
+  height="720"
 />
 <div class="text-centered">
   <h2>{{ title }}</h2>
diff --git a/src/pages/errors/rate-limit.html b/src/pages/errors/rate-limit.html
index c0f3876d..c159b33c 100644
--- a/src/pages/errors/rate-limit.html
+++ b/src/pages/errors/rate-limit.html
@@ -7,23 +7,23 @@ image: https://cdn.coryd.dev/assets/stop.jpg
 ---
 <img
   srcset="
-    https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=256 256w,
-    https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=512 512w,
-    https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=1024 1024w,
-    https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=2048 2048w
+    https://cdn.coryd.dev/assets/stop.jpg?class=bannersm 256w,
+    https://cdn.coryd.dev/assets/stop.jpg?class=bannermd 512w,
+    https://cdn.coryd.dev/assets/stop.jpg?class=bannerbase 1024w,
+    https://cdn.coryd.dev/assets/stop.jpg?class=bannerlg 2048w
   "
   sizes="(max-width: 450px) 256px,
     (max-width: 850px) 512px,
     (max-width: 1000px) 1024px,
     2048px"
-  src="https://cdn.coryd.dev/assets/stop.jpg?aspect_ratio=1:.5625&width=2048"
+  src="https://cdn.coryd.dev/assets/stop.jpg?class=bannerlg"
   alt="{{ alt }}"
   class="image-banner"
   style="aspect-ratio:1/0.5625"
   loading="eager"
   decoding="async"
-  width="768"
-  height="432"
+  width="1080"
+  height="720"
 />
 <div class="text-centered">
   <h2>{{ title }}</h2>
diff --git a/src/pages/main/about.md b/src/pages/main/about.md
index 14fe4d34..69f44a26 100644
--- a/src/pages/main/about.md
+++ b/src/pages/main/about.md
@@ -11,16 +11,16 @@ permalink: /about.html
   {%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
   <img
     srcset="
-      https://cdn.coryd.dev/assets/avatar-transparent.png?width=200&h=200&aspect_ratio=1:1 200w,
-      https://cdn.coryd.dev/assets/avatar-transparent.png?width=400&h=400&aspect_ratio=1:1 400w,
-      https://cdn.coryd.dev/assets/avatar-transparent.png?width=800&h=800&aspect_ratio=1:1 800w,
-      https://cdn.coryd.dev/assets/avatar-transparent.png?width=1200&h=1200&aspect_ratio=1:1 1200w
+      https://cdn.coryd.dev/assets/avatar-transparent.png?class=squaresm 200w,
+      https://cdn.coryd.dev/assets/avatar-transparent.png?class=squaremd 400w,
+      https://cdn.coryd.dev/assets/avatar-transparent.png?class=squarebase 800w,
+      https://cdn.coryd.dev/assets/avatar-transparent.png?class=squarelg 1200w
     "
     sizes="(max-width: 450px) 200px,
       (max-width: 850px) 400px,
       (max-width: 1000px) 800px,
       1200px"
-    src="https://cdn.coryd.dev/assets/avatar-transparent.png?width=1200&h=1200&aspect_ratio=1:1"
+    src="https://cdn.coryd.dev/assets/avatar-transparent.png?class=squarelg"
     alt="{{ about_alt }}"
     loading="eager"
     decoding="async"
diff --git a/src/pages/main/books/index.html b/src/pages/main/books/index.html
index 76f74025..5243d52b 100644
--- a/src/pages/main/books/index.html
+++ b/src/pages/main/books/index.html
@@ -19,21 +19,21 @@ schema: books
   <a href="{{ book.url }}">
     <img
       srcset="
-        https://cdn.coryd.dev{{ book.image }}?width=203&aspect_ratio=.65:1 203w,
-        https://cdn.coryd.dev{{ book.image }}?width=406&aspect_ratio=.65:1 406w,
-        https://cdn.coryd.dev{{ book.image }}?width=812&aspect_ratio=.65:1 812w,
-        https://cdn.coryd.dev{{ book.image }}?width=1624&aspect_ratio=.65:1 1624w
+        https://cdn.coryd.dev{{ book.image }}?class=verticalsm 200w,
+        https://cdn.coryd.dev{{ book.image }}?class=verticalmd 400w,
+        https://cdn.coryd.dev{{ book.image }}?class=verticalbase 800w,
+        https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w
       "
-      sizes="(max-width: 450px) 203px,
-        (max-width: 850px) 406px,
-        (max-width: 1000px) 812px,
-        1624px"
-      src="https://cdn.coryd.dev{{ book.image }}?width=1624&aspect_ratio=.65:1"
+      sizes="(max-width: 450px) 200px,
+        (max-width: 850px) 400px,
+        (max-width: 1000px) 800px,
+        1200px"
+      src="https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w"
       alt="{{ alt }}"
       loading="eager"
       decoding="async"
-      width="203"
-      height="309"
+      width="200"
+      height="307"
     />
   </a>
   <div class="book-meta">
diff --git a/src/pages/main/watching/movie.html b/src/pages/main/watching/movie.html
index 01763d58..93264440 100644
--- a/src/pages/main/watching/movie.html
+++ b/src/pages/main/watching/movie.html
@@ -14,22 +14,22 @@ schema: movie
 <article class="watching-focus">
   <img
     srcset="
-      https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=256 256w,
-      https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=512 512w,
-      https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=1024 1024w,
-      https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048 2048w
+      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm 256w,
+      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd 512w,
+      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase 1024w,
+      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg 2048w
     "
     sizes="(max-width: 450px) 256px,
       (max-width: 850px) 512px,
       (max-width: 1000px) 1024px,
       2048px"
-    src="https://cdn.coryd.dev{{ movie.backdrop }}?aspect_ratio=1:.5625&width=2048"
+    src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg"
     alt="{{ alt }}"
     class="image-banner"
     loading="eager"
     decoding="async"
-    width="768"
-    height="432"
+    width="1080"
+    height="720"
   />
   <div class="watching-meta">
     <p class="title"><strong>{{ movie.title }}</strong></p>
diff --git a/src/pages/main/watching/show.html b/src/pages/main/watching/show.html
index 404765e3..e0aa37b5 100644
--- a/src/pages/main/watching/show.html
+++ b/src/pages/main/watching/show.html
@@ -15,22 +15,22 @@ schema: show
 <article class="watching-focus">
   <img
     srcset="
-      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=256 256w,
-      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=512 512w,
-      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=1024 1024w,
-      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=2048 2048w
+      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannersm 256w,
+      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannermd 512w,
+      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannerbase 1024w,
+      https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannerlg 2048w
     "
     sizes="(max-width: 450px) 256px,
       (max-width: 850px) 512px,
       (max-width: 1000px) 1024px,
       2048px"
-    src="https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?aspect_ratio=1:.5625&width=2048"
+    src="https://cdn.coryd.dev/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg?class=bannerlg"
     alt="{{ alt }}"
     class="image-banner"
     loading="eager"
     decoding="async"
-    width="768"
-    height="432"
+    width="1080"
+    height="720"
   />
   <div class="watching-meta">
     <p class="title"><strong>{{ show.title }}</strong></p>