Create webp variants for all assets.

Create a unified image compression script.

Update gitignore

.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# Temporary files
+public/assets/temp/*
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

README.md

@@ -38,22 +38,16 @@ This project uses images from unsplash as well as original images.
 
 -   Original images must be high quality 1000x1000 pixels JPEGS.
 -   Original images are stored in `public/assets-raw-orig/`
--   They are then compressed for production with mozjpeg and sharp, to create jpg and webp assets.
+-   Original images are then compressed for production with mozjpeg and sharp, to create jpg and webp assets.
+-   Unsplash images are resized and cropped to 1000x1000, and the compressed with mozjpeg and sharp.
+-   Unsplash images are stored in `public/assets-raw/`
 
 Whenever new images are added run:
 
 ```
-node compress-images.js
 node convert-images.js
 ```
 
--   Unsplash images are currently manually resized to 1000x1000, and the compressed.
--   Unsplash images are stored in `public/assets-raw/`
-
-```
-node compress-images.js
-```
-
 ## Future plans
 
 Further more, there are plans to grow this into a generic intrument for making language courses through writing lessons in json-style configs. However, the following issues must be adressed to achieve this:

convert-images.js

@@ -1,45 +1,79 @@
 import sharp from 'sharp';
 import { globby } from 'globby';
-// import imagemin from 'imagemin';
-// import imageminMozjpeg from 'imagemin-mozjpeg';
+import imagemin from 'imagemin';
+import imageminMozjpeg from 'imagemin-mozjpeg';
 
-// const TARGET_WIDTH = 1000;
-// const TARGET_HEIGHT = 1000;
-// const TARGET_QUALITY_UNSPLASH = 70;
+const TARGET_WIDTH = 1000;
+const TARGET_HEIGHT = 1000;
+const TARGET_QUALITY_UNSPLASH = 70;
 const TARGET_QUALITY_ORIG = 80;
 
-const images = await globby(['public/assets-raw-orig/**.jpg']);
-
-await Promise.all(
-    images.map(async (image) => {
-        return await sharp(image)
-            .webp({ quality: TARGET_QUALITY_ORIG })
-            .toFile(
-                image
-                    .replace('/assets-raw-orig/', '/assets/')
-                    .replace('.jpg', '.webp'),
-            );
-    }),
-);
-
-console.log('Converted original images to webp:', images);
-
-// const unsplashImages = await globby(['public/assets-raw/**.jpg']);
-
-// await Promise.all(
-//     unsplashImages.map(async (image) => {
-//         return await sharp(image)
-//             .webp({ quality: TARGET_QUALITY_UNSPLASH })
-//             .toFile(
-//                 image
-//                     .replace('/assets-raw/', '/assets/')
-//                     .replace('.jpg', '.webp')
-//             );
-//     }),
-// );
-
-// console.log('Converted unsplash images to webp:', images);
+// 1. Compress JPGS with imagemin
+// 2. Convert JPGS to WEBP with sharp
+async function prepareOriginalImages() {
+    const images = await globby(['public/assets-raw-orig/**.jpg']);
 
+    await Promise.all(
+        images.map(async (image) => {
+            return await sharp(image)
+                .webp({ quality: TARGET_QUALITY_ORIG })
+                .toFile(
+                    image
+                        .replace('/assets-raw-orig/', '/assets/')
+                        .replace('.jpg', '.webp'),
+                );
+        }),
+    );
+
+    await Promise.all(
+        images.map(async (image) => {
+            return imagemin([image], {
+                destination: './public/assets/',
+                plugins: [imageminMozjpeg({ quality: TARGET_QUALITY_ORIG })],
+            });
+        }),
+    );
+
+    console.log('Converted original images to webp:', images);
+}
+
+// 1. Crop & Resize JPGS with sharp, Compress JPGS with imagemin
+// 2. Crop & Resize & Convert JPGS to WEBP with sharp
+
+async function prepareUnsplashImages() {
+    const unsplashImages = await globby(['public/assets-raw/**.jpg']);
+
+    await Promise.all(
+        unsplashImages.map(async (image) => {
+            await sharp(image)
+                .resize({ width: TARGET_WIDTH, height: TARGET_HEIGHT })
+                .toFile(image.replace('/assets-raw/', '/assets/temp/'));
+
+            await imagemin([image.replace('/assets-raw/', '/assets/temp/')], {
+                destination: './public/assets/',
+                plugins: [
+                    imageminMozjpeg({ quality: TARGET_QUALITY_UNSPLASH }),
+                ],
+            });
+
+            return await sharp(image)
+                .resize({ width: TARGET_WIDTH, height: TARGET_HEIGHT })
+                .webp({ quality: TARGET_QUALITY_UNSPLASH })
+                .toFile(
+                    image
+                        .replace('/assets-raw/', '/assets/')
+                        .replace('.jpg', '.webp'),
+                );
+        }),
+    );
+
+    console.log('Converted unsplash images to webp:', unsplashImages);
+}
+
+await prepareOriginalImages();
+await prepareUnsplashImages();
+
+// Experiments
 // Example for a single image
 // WEBP
 // await sharp('public/assets-raw/blueberry-copy.jpg')

src/components/Picture/Picture.tsx

@@ -55,6 +55,7 @@ export const Picture: FunctionComponent<PictureProps> = ({
         >
             <picture>
                 <source srcSet={`assets/${image}.webp`} type="image/webp" />
+                <source srcSet={`assets/${image}.jpg`} type="image/jpg" />
                 <Image
                     src={`assets/${image}.jpg`}
                     alt={image}