Support "traced placeholder" generation in gatsby-plugin-sharp
KyleAMathews opened this issue · comments
Ran across on Twitter this really cool demo of a generating outlines of images and using them as placeholders while loading the image:
https://twitter.com/mikaelainalem/status/918213244954861569
It'd be fun if we could build this into our image processing pipeline
Following this thread which suggested using a unix tool named potrace. There's also a little-used JS port of potrace.
If anyone wants to experiment with this, it'd be a really cool addition to Gatsby!
I think this has been merged yeah? Can close issue?
Indeed!
This should be added to gatsby-remark-images to be consistent, otherwise some images will be blurred, others will have svg.
It's breaking for large images!
12:57:59 AM:
12:57:59 AM: - index.js:15 Jimp.call
12:57:59 AM: [repo]/[@jimp]/utils/src/index.js:15:13
12:57:59 AM:
12:57:59 AM: - index.js:1223 Jimp.apply [as scanQuiet]
12:57:59 AM: [repo]/[@jimp]/core/src/index.js:1223:23
12:57:59 AM:
12:57:59 AM: - index.js:1144 Jimp.<computed> [as scan]
12:57:59 AM: [repo]/[@jimp]/core/src/index.js:1144:23
12:57:59 AM:
12:57:59 AM: - Potrace.js:1005 Potrace._processLoadedImage
12:57:59 AM: [repo]/[potrace]/lib/Potrace.js:1005:11
12:57:59 AM:
12:57:59 AM: - Potrace.js:1048 Jimp.<anonymous>
12:57:59 AM: [repo]/[potrace]/lib/Potrace.js:1048:14
12:57:59 AM:
12:57:59 AM: - index.js:223 Timeout._onTimeout
12:57:59 AM: [repo]/[@jimp]/core/src/index.js:223:9
12:57:59 AM:
12:57:59 AM: - timers.js:557 listOnTimeout
12:57:59 AM: internal/timers.js:557:17
12:57:59 AM:
12:57:59 AM: - timers.js:500 processTimers
12:57:59 AM: internal/timers.js:500:7