♻️ Image optimisation to webp (#79)

<!-- describe the change, why is it needed and what does it accomplish
as per https://ssw.com.au/rules/write-a-good-pull-request/ -->

Fixes #75 

<!-- Add done video, screenshots as per
https://ssw.com.au/rules/record-a-quick-and-dirty-done-video/-->
Added a step in the build process to convert jpg/png to webp.
<img width="811" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/dc8e717f-bd98-4175-960b-24fcb8a0b242">
**Figure: Images now in webp format**

<!-- As per rule https://www.ssw.com.au/rules/over-the-shoulder-prs -->
<!-- Getting the PR merged is part of the task - Call someone to review
your changes to get them merged ASAP -->

docs/.gitignore

@@ -33,3 +33,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# next-image-export-optimizer
+/public/next-image-export-optimizer-hashes.json
+/public/nextImageExportOptimizer

docs/README.md

@@ -5,21 +5,26 @@
 
 ## Get Started
 
-Install the project's dependencies:
+### Install the project's dependencies:
 
 ```bash
 bun install
 ```
 
-Run the project locally:
-
+### Build the project:
 ```bash
-bun run dev
+bun run build
 ```
+Note - if an error comes up involving the [installation of the package sharp](https://github.com/lovell/sharp/issues/3511) while the next-image-export-optimizer is running, you'll need to postinstall sharp:
+```bash
+cd node_modules/sharp
+bun install
+```
+
+### Run the project locally:
 
-Build the project:
 ```bash
-bun run build
+bun run dev
 ```
 
 ## Local URLs

docs/next.config.js

@@ -2,7 +2,22 @@
 const nextConfig = {
   output: "export",
   images: {
-    unoptimized: true,
+    loader: "custom",
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  },
+  transpilePackages: ["next-image-export-optimizer"],
+  env: {
+    nextImageExportOptimizer_imageFolderPath: "public",
+    nextImageExportOptimizer_exportFolderPath: "out",
+    nextImageExportOptimizer_quality: 75,
+    nextImageExportOptimizer_storePicturesInWEBP: true,
+    nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
+
+    // If you do not want to use blurry placeholder images, then you can set
+    // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
+    // `placeholder="empty"` to all <ExportedImage> components.
+    nextImageExportOptimizer_generateAndUseBlurImages: true,
   },
 };
 

docs/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "bun run build && bun run start",
-    "build": "next build",
+    "build": "next build && next-image-export-optimizer",
     "start": "http-server ./out",
     "lint": "next lint"
   },
@@ -28,6 +28,8 @@
   },
   "devDependencies": {
     "bun-types": "^1.0.1",
-    "http-server": "^14.1.1"
+    "http-server": "^14.1.1",
+    "next-image-export-optimizer": "^1.8.5",
+    "sharp": "^0.32.6"
   }
 }

docs/src/app/marketingCard.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import ExportedImage from "next-image-export-optimizer";
 
 type MarketingCardTextProps = {
   title: string;
@@ -37,7 +37,7 @@ export default function MarketingCard({
         )}
         <div className="md:w-1/2 w-5/6 mb-10 md:mb-0">
           <a href={imgURL} target="_blank">
-            <Image
+            <ExportedImage
               className="object-cover object-center rounded bordered"
               alt="hero"
               src={imgURL}

docs/src/app/page.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import ExportedImage from "next-image-export-optimizer";
 import MarketingCard from "./marketingCard";
 import Footer from "./footer";
 
@@ -7,7 +7,7 @@ export default function Home() {
     <main className="flex min-h-screen flex-col items-center">
       <nav className="bggrey w-full h-24 p-4 flex justify-center">
         <div className="w-full">
-          <Image
+          <ExportedImage
             src="/sswdory-logo.png"
             alt="SSW Dory Logo"
             width={300}
@@ -25,7 +25,7 @@ export default function Home() {
               </h1>
             </div>
             <a href="https://github.com/SSWConsulting/SSW.Dory" target="_blank">
-              <Image
+              <ExportedImage
                 src="/github-mark.svg"
                 alt="Invertocat Logo"
                 width={100}