Add placeholder support?

[KyleAMathews]

Love the pure-js approach but also really like the placeholder image support in https://github.com/Levelmoney/resize-image-loader

Looks like JIMP can do the same resize + blur effect.

[jstcki]

I'd accept a pull request 😁

I wonder if it would be more sensible to add explicit placeholderSize and placeholderBlur options or to just a blur (or more a more general filter) option. For example

import responsiveImg from 'responsive?sizes[]=100&sizes[]=200&placeholderSize=20&placeholderBlur=40!img.jpg';

// responsiveImg.placeholder => base64 encoded image

vs.

import responsiveImg from 'responsive?sizes[]=100&sizes[]=200!img.jpg';
import placeholder from 'responsive?size=20&blur&base64!img.jpg';

[KyleAMathews]

I think having explicit syntax for it makes a lot of sense because it won't be obvious to a lot of users what are the filters required to recreate the effect. Perhaps even just have a hard coded placeholder option e.g.

import responsiveImg from 'responsive sizes[]=100&sizes[]=200&placeholder!img.jpg';

// responsiveImg.placeholder => base64 encoded image

[jstcki]

After reading a bit on these placeholders, I noticed that all this loader would have to do is create a really small sized version because the scaling up and blurring has to happen in the client. If we scale up and blur in the loader we don't really gain much in terms of file size.

resize-image-loader actually does this by encoding the placeholder image into an svg data URI with a blur filter 😮

[KyleAMathews]

Oh, that makes a lot of sense haha :-) yeah, what resize-image-loader does looks perfect. Create a tiny image and ship it to the browser as a svg data URI w/ blur.

Medium apparently uses Canvas for blurring and then has a CSS animation fade-in effect when the full-res image arrives https://jmperezperez.com/medium-image-progressive-loading-placeholder/

[jstcki]

I think how the placeholder image is actually loaded and scaled up should be up to the consumer. Some would prefer the svg, others the canvas-based approach, and maybe you'd even want different effects (pixellated instead of blur?).

So I'd say the way to go would be a placeholder option which generates a very small, low quality JPEG image and returns it in base64 encoding, but not more than that. What do you think?

[jstcki]

Added in v0.7.0 ✌️ via #16

[KyleAMathews]

Funny timing, just adding support for this to the graphql data layer writing for Gatsby :-) gatsbyjs/gatsby#420

Works really well! E.g. https://www.bricolage.io/how-create-custom-ical-exports-category-using-drupal-and-views/

[jstcki]

@KyleAMathews that looks interesting! I probably should give Gatsby another look 😉