Merge pull request #125 from whitep4nth3r/optimise-twitch-thumb-on-ho…

…mepage

Use Netlify image optimisation to optimise homepage Twitch thumbnail

netlify.toml

@@ -36,4 +36,7 @@
 [[redirects]]
   from = "/newsletter"
   to = "https://buttondown.email/weirdwidewebhole"
-  status = 301
+  status = 301
+
+[images]
+  remote_images = ["https://static-cdn.jtvnw.net/cf_vods/.*"]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mk2-p4nth3rblog",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "My website and blog.",
   "scripts": {
     "watch:sass": "sass --watch ./src/_sass:src/_css",

src/_components/responsiveImage.js

@@ -1,4 +1,8 @@
-function ResponsiveImage({ image }) {
+// Now transforms images from Contentful and third party images from Twitch using /.netlify/images/?url=
+
+function ResponsiveImage({ image, classOverride = null, loading = null }) {
+  const className = classOverride ? classOverride : "post__responsiveImage";
+  const loadingStrat = loading ? loading : "lazy";
   const { contentType } = image;
   // Inspect contentType to convert GIF to WebP and not AVIF
   // more info: https://twitter.com/whitep4nth3r/status/1460244790059188226
@@ -14,31 +18,43 @@ function ResponsiveImage({ image }) {
   const maxContainerSize = 600;
 
   // Note, this could be further optimised by considering padding inside the container
-  const sizes = `(max-width: ${maxContainerSize - 1}px) 100vw, ${maxContainerSize}px`;
+  const sizes = `(max-width: ${
+    maxContainerSize - 1
+  }px) 100vw, ${maxContainerSize}px`;
 
   function makeSrcSetArray(format) {
     const formatString = format === undefined ? "" : `&fm=${format}`;
 
-    return imageWidths.map((width) => `${image.url}?q=75&w=${width}${formatString} ${width}w`);
+    return imageWidths.map(
+      (width) => `${image.url}?q=75&w=${width}${formatString} ${width}w`,
+    );
   }
 
   function makeSrcSetString(format) {
     return makeSrcSetArray(format).join(", ");
   }
 
   return /* html */ `<picture>
-      ${!isGif ? `<source type="image/avif" srcSet="${makeSrcSetString("avif")}" sizes="${sizes}" />` : ""}
-      <source type="image/webp" srcSet="${makeSrcSetString("webp")}" sizes="${sizes}" />
+      ${
+        !isGif
+          ? `<source type="image/avif" srcSet="${makeSrcSetString(
+              "avif",
+            )}" sizes="${sizes}" />`
+          : ""
+      }
+      <source type="image/webp" srcSet="${makeSrcSetString(
+        "webp",
+      )}" sizes="${sizes}" />
       <img
         srcSet="${makeSrcSetString()}"
         sizes="${sizes}"
         src="${image.url}"
         alt="${image.description}"
-        loading="lazy"
+        loading="${loadingStrat}"
         decoding="async"
         width="${image.width}"
         height="${image.height}"
-        class="post__responsiveImage"
+        class="${className}"
       />
     </picture>`;
 }

src/_components/twitchInfo.js

@@ -1,4 +1,5 @@
 const PlayIcon = require("./svg/playIcon");
+const ResponsiveImage = require("./responsiveImage");
 
 function TwitchInfo({ isLive, vodData }) {
   return /* html */ `
@@ -16,13 +17,18 @@ function TwitchInfo({ isLive, vodData }) {
               ${vodData.subtitle} ${PlayIcon()}
             </p>
           </div>
-          <img
-            src="${vodData.thumbnail.url}"
-            alt="Stream screenshot. It's auto-generated so I can't give you any details, sorry!"
-            class="twitchInfo__thumbnail"
-            height="${vodData.thumbnail.height}"
-            width="${vodData.thumbnail.width}"
-          />
+          ${ResponsiveImage({
+            image: {
+              url: `/.netlify/images/?url=${vodData.thumbnail.url}`,
+              height: vodData.thumbnail.height,
+              width: vodData.thumbnail.width,
+              contentType: "image/jpeg",
+              description:
+                "Stream screenshot. It's auto-generated so I can't give you any details, sorry!",
+            },
+            classOverride: "twitchInfo__thumbnail",
+            loading: "eager",
+          })}
         </a>
       </div>`
       : /* html */ `<div id="twitch-embed" class="twitchInfo__embed"></div>

src/_sass/_twitch-info.scss

@@ -9,6 +9,12 @@
   display: block;
   height: 100%;
   width: 100%;
+
+  picture {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
 }
 
 .twitchInfo__link {