gatsbyjs/gatsby

Support "traced placeholder" generation in gatsby-plugin-sharp

KyleAMathews opened this issue · 4 comments

KyleAMathews commented

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

s5o6zbl1icr_eftt

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!

benjaminhoffman commented

I think this has been merged yeah? Can close issue?

KyleAMathews commented

Indeed!

hackhat commented

This should be added to gatsby-remark-images to be consistent, otherwise some images will be blurred, others will have svg.

  • 👍6
abheist commented

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