diff --git a/.gitignore b/.gitignore index 00351cf..ac86c9f 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,9 @@ dist dist-ssr *.local +# Temporary files +public/assets/temp/* + # Editor directories and files .vscode/* !.vscode/extensions.json diff --git a/README.md b/README.md index e01e4a9..43436d1 100644 --- a/README.md +++ b/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: diff --git a/compress-images.js b/compress-images.js deleted file mode 100644 index 1dac2a2..0000000 --- a/compress-images.js +++ /dev/null @@ -1,21 +0,0 @@ -import imagemin from 'imagemin'; -import imageminMozjpeg from 'imagemin-mozjpeg'; - -(async () => { - let minificationResult = await imagemin( - ['./public/assets-raw-orig/*.jpg'], - { - destination: './public/assets', - plugins: [imageminMozjpeg({ quality: 80 })], - }, - ); - - console.log('Original images optimized by imagemin/mozjpeg'); - - minificationResult = await imagemin(['./public/assets-raw/*.jpg'], { - destination: './public/assets', - plugins: [imageminMozjpeg({ quality: 70 })], - }); - - console.log('Web images optimized by imagemin/mozjpeg'); -})(); diff --git a/convert-images.js b/convert-images.js index b094923..6905af2 100644 --- a/convert-images.js +++ b/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') diff --git a/public/assets-raw/apricots.jpg b/public/assets-raw/apricots.jpg index afd455f..6441ff6 100644 Binary files a/public/assets-raw/apricots.jpg and b/public/assets-raw/apricots.jpg differ diff --git a/public/assets-raw/bananas.jpg b/public/assets-raw/bananas.jpg index eb9ebd5..a85ae31 100644 Binary files a/public/assets-raw/bananas.jpg and b/public/assets-raw/bananas.jpg differ diff --git a/public/assets-raw/blueberry.jpg b/public/assets-raw/blueberry.jpg index e5880a9..bbe12a1 100644 Binary files a/public/assets-raw/blueberry.jpg and b/public/assets-raw/blueberry.jpg differ diff --git a/public/assets-raw/peaches.jpg b/public/assets-raw/peaches.jpg index 3140ae1..7511b82 100644 Binary files a/public/assets-raw/peaches.jpg and b/public/assets-raw/peaches.jpg differ diff --git a/public/assets/apples-green.jpg b/public/assets/apples-green.jpg index d8502e7..af01ba9 100644 Binary files a/public/assets/apples-green.jpg and b/public/assets/apples-green.jpg differ diff --git a/public/assets/apples-green.webp b/public/assets/apples-green.webp new file mode 100644 index 0000000..ca6c17a Binary files /dev/null and b/public/assets/apples-green.webp differ diff --git a/public/assets/apricots.jpg b/public/assets/apricots.jpg index 1b6d188..e449f24 100644 Binary files a/public/assets/apricots.jpg and b/public/assets/apricots.jpg differ diff --git a/public/assets/apricots.webp b/public/assets/apricots.webp new file mode 100644 index 0000000..15aff43 Binary files /dev/null and b/public/assets/apricots.webp differ diff --git a/public/assets/bananas.jpg b/public/assets/bananas.jpg index 1c4db12..19f4bb3 100644 Binary files a/public/assets/bananas.jpg and b/public/assets/bananas.jpg differ diff --git a/public/assets/bananas.webp b/public/assets/bananas.webp new file mode 100644 index 0000000..d862b52 Binary files /dev/null and b/public/assets/bananas.webp differ diff --git a/public/assets/blackberry.jpg b/public/assets/blackberry.jpg index 2524f2b..2ae2221 100644 Binary files a/public/assets/blackberry.jpg and b/public/assets/blackberry.jpg differ diff --git a/public/assets/blackberry.webp b/public/assets/blackberry.webp new file mode 100644 index 0000000..2c41d47 Binary files /dev/null and b/public/assets/blackberry.webp differ diff --git a/public/assets/blueberry.jpg b/public/assets/blueberry.jpg index 3376d21..84061dd 100644 Binary files a/public/assets/blueberry.jpg and b/public/assets/blueberry.jpg differ diff --git a/public/assets/blueberry.webp b/public/assets/blueberry.webp new file mode 100644 index 0000000..252ac69 Binary files /dev/null and b/public/assets/blueberry.webp differ diff --git a/public/assets/cherry.jpg b/public/assets/cherry.jpg index dfd57fe..ed510fe 100644 Binary files a/public/assets/cherry.jpg and b/public/assets/cherry.jpg differ diff --git a/public/assets/cherry.webp b/public/assets/cherry.webp new file mode 100644 index 0000000..b0eaac1 Binary files /dev/null and b/public/assets/cherry.webp differ diff --git a/public/assets/peaches.jpg b/public/assets/peaches.jpg index f026eab..4c4bc6e 100644 Binary files a/public/assets/peaches.jpg and b/public/assets/peaches.jpg differ diff --git a/public/assets/peaches.webp b/public/assets/peaches.webp new file mode 100644 index 0000000..a19ee59 Binary files /dev/null and b/public/assets/peaches.webp differ diff --git a/public/assets/pears-green.jpg b/public/assets/pears-green.jpg index 34920b2..9a58513 100644 Binary files a/public/assets/pears-green.jpg and b/public/assets/pears-green.jpg differ diff --git a/public/assets/pears-green.webp b/public/assets/pears-green.webp new file mode 100644 index 0000000..bfe84b8 Binary files /dev/null and b/public/assets/pears-green.webp differ diff --git a/public/assets/raspberry.jpg b/public/assets/raspberry.jpg index 12c8b8e..4b538d3 100644 Binary files a/public/assets/raspberry.jpg and b/public/assets/raspberry.jpg differ diff --git a/public/assets/raspberry.webp b/public/assets/raspberry.webp new file mode 100644 index 0000000..daa264b Binary files /dev/null and b/public/assets/raspberry.webp differ diff --git a/public/assets/sour-cherry.jpg b/public/assets/sour-cherry.jpg index b5ac117..003f86f 100644 Binary files a/public/assets/sour-cherry.jpg and b/public/assets/sour-cherry.jpg differ diff --git a/public/assets/sour-cherry.webp b/public/assets/sour-cherry.webp new file mode 100644 index 0000000..337a071 Binary files /dev/null and b/public/assets/sour-cherry.webp differ diff --git a/public/assets/strawberry.jpg b/public/assets/strawberry.jpg index 51038e5..836e144 100644 Binary files a/public/assets/strawberry.jpg and b/public/assets/strawberry.jpg differ diff --git a/public/assets/strawberry.webp b/public/assets/strawberry.webp new file mode 100644 index 0000000..5d12d16 Binary files /dev/null and b/public/assets/strawberry.webp differ diff --git a/src/components/Picture/Picture.tsx b/src/components/Picture/Picture.tsx index d2af1a4..3908752 100644 --- a/src/components/Picture/Picture.tsx +++ b/src/components/Picture/Picture.tsx @@ -55,6 +55,7 @@ export const Picture: FunctionComponent = ({ > +