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..40e0409 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 { @@ -8,11 +9,15 @@ module.exports = async ({ rel, src: uncheckedSrc, options, debug }) => { src = Buffer.from(uncheckedSrc); } + //Lighthouse makes it difficutl to tell which placeholders belong to which images, so this helps us know which one it belongs to + //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 }); - if (debug) console.log({ 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;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 }; }