From f5060ca4fb295337cf1470ab50823b8beb686aa6 Mon Sep 17 00:00:00 2001 From: Michael Pope Date: Thu, 9 Dec 2021 15:55:30 -0800 Subject: [PATCH 1/3] Added Base64 Image ID to help with Lighthouse. Lighthouse sometimes dislikes ElderJS's base64 placeholder pictures. Usually, it lets you know that the placeholder needs to be resized. Unfortunately, Lighthouse doesn't help you identify the image well. Which means on pages with lots of pictures, this is a pain. Having an ID embedded in the data URL fixes this. It does make pages slightly larger, but I feel the tradeoff is worth it. --- packages/images/package-lock.json | 7 ++++++- packages/images/package.json | 1 + packages/images/workers/placeholder.js | 9 +++++++-- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/images/package-lock.json b/packages/images/package-lock.json index 09316ba..14382ee 100644 --- a/packages/images/package-lock.json +++ b/packages/images/package-lock.json @@ -1,6 +1,6 @@ { "name": "@elderjs/plugin-images", - "version": "1.3.3", + "version": "1.3.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1059,6 +1059,11 @@ "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==" }, + "nanoid": { + "version": "3.1.30", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", + "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==" + }, "napi-build-utils": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz", diff --git a/packages/images/package.json b/packages/images/package.json index 4d98972..2eda668 100644 --- a/packages/images/package.json +++ b/packages/images/package.json @@ -38,6 +38,7 @@ "fs-extra": "^9.0.1", "glob": "^7.1.6", "mini-svg-data-uri": "^1.2.3", + "nanoid": "^3.1.30", "potrace": "^2.1.8", "sharp": "^0.26.0", "svgo": "^1.3.2", diff --git a/packages/images/workers/placeholder.js b/packages/images/workers/placeholder.js index fcc0867..07212e8 100644 --- a/packages/images/workers/placeholder.js +++ b/packages/images/workers/placeholder.js @@ -1,4 +1,5 @@ const sharp = require('sharp'); +const { nanoid } = require('nanoid') module.exports = async ({ rel, src: uncheckedSrc, options, debug }) => { try { @@ -10,9 +11,13 @@ module.exports = async ({ rel, src: uncheckedSrc, options, debug }) => { const place = await sharp(src).resize(options.resize).jpeg(options.jpeg).toBuffer({ resolveWithObject: false }); - if (debug) console.log({ rel, placeholder: `data:image/jpeg;base64,${place.toString('base64')}`, error: null }); + //Lighthouse makes it difficutl to tell which placeholders belong to which images, so this helps us know which one it belongs to + //We Stick it in the base64 image encoded URL in a place where it does not interfere with the image. + const id_string = `id:${nanoid()};`; - return { rel, placeholder: `data:image/jpeg;base64,${place.toString('base64')}`, error: null }; + if (debug) console.log({ rel, placeholder: `data:image/jpeg;${id_string}base64,${place.toString('base64')}`, error: null }); + + return { rel, placeholder: `data:image/jpeg;${id_string}base64,${place.toString('base64')}`, error: null }; } catch (e) { return { error: e }; } From 798474a1c0f2c69b3894b85a29eac306cc244966 Mon Sep 17 00:00:00 2001 From: Michael Pope Date: Thu, 9 Dec 2021 15:59:33 -0800 Subject: [PATCH 2/3] Formatted the git pull request more nicely. --- packages/images/workers/placeholder.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/images/workers/placeholder.js b/packages/images/workers/placeholder.js index 07212e8..3faac78 100644 --- a/packages/images/workers/placeholder.js +++ b/packages/images/workers/placeholder.js @@ -9,12 +9,12 @@ module.exports = async ({ rel, src: uncheckedSrc, options, debug }) => { src = Buffer.from(uncheckedSrc); } - const place = await sharp(src).resize(options.resize).jpeg(options.jpeg).toBuffer({ resolveWithObject: false }); - //Lighthouse makes it difficutl to tell which placeholders belong to which images, so this helps us know which one it belongs to //We Stick it in the base64 image encoded URL in a place where it does not interfere with the image. const id_string = `id:${nanoid()};`; + const place = await sharp(src).resize(options.resize).jpeg(options.jpeg).toBuffer({ resolveWithObject: false }); + if (debug) console.log({ rel, placeholder: `data:image/jpeg;${id_string}base64,${place.toString('base64')}`, error: null }); return { rel, placeholder: `data:image/jpeg;${id_string}base64,${place.toString('base64')}`, error: null }; From 3f3eb2343281825fcedfe50059700a7ab02935cc Mon Sep 17 00:00:00 2001 From: Michael Pope Date: Thu, 9 Dec 2021 16:32:17 -0800 Subject: [PATCH 3/3] Made a small extra note about truncated ids. --- packages/images/workers/placeholder.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/images/workers/placeholder.js b/packages/images/workers/placeholder.js index 3faac78..40e0409 100644 --- a/packages/images/workers/placeholder.js +++ b/packages/images/workers/placeholder.js @@ -1,5 +1,5 @@ const sharp = require('sharp'); -const { nanoid } = require('nanoid') +const { nanoid } = require('nanoid'); module.exports = async ({ rel, src: uncheckedSrc, options, debug }) => { try { @@ -10,7 +10,7 @@ module.exports = async ({ rel, src: uncheckedSrc, options, debug }) => { } //Lighthouse makes it difficutl to tell which placeholders belong to which images, so this helps us know which one it belongs to - //We Stick it in the base64 image encoded URL in a place where it does not interfere with the image. + //much of the time, the id will actually be truncated in the Lighthouse report, but the important part is that you have enough to identify the image const id_string = `id:${nanoid()};`; const place = await sharp(src).resize(options.resize).jpeg(options.jpeg).toBuffer({ resolveWithObject: false });