Sharp: Tips for implementing small blurred previews?

[wmertens]

Facebook Engineering posted this a while ago: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

How could I do the same with sharp? I imagine I'd resize the image, maybe apply blur to it (before or after resize?) and then grab the image from the buffer, as well as the image dimensions, and store these in the image database.

Then convert this to base64, and on the client side make a data url containing the default header, dimensions and image data. When using server-side rendering, these images could be embedded in the html (should compress well), and css could take care of the blur client side. => instant images

Does that sound reasonable? I just don't know what parts of the header need to be retained, and if blurring while resizing is a good idea.

I suppose this is more of a usage question than a feature request, so if I should be asking this elsewhere I apologize.

[papandreou]

Looks like the lqip webpack loader does exactly that using sharp. Showcase here: https://lqip-loader.firebaseapp.com/

[lovell]

In sharp, a blur operation will always occur after a resize, if any, a behaviour that matches what would be required here.

The Facebook "trick" is to have the client already hold a common JPEG header, including Huffman quantization tables, for a given JPEG percentage "quality". This fixed header can be removed from the data transferred by the server, then prepended to the incoming compressed pixel data on the client.

First thing I'd do would be to generate a few JPEG images of the same dimensions and quality and see how many bytes at the start are the same.

If you're using base64 then I can't not recommend https://github.com/lovell/64 :)

[lovell]

@wmertens Hope these answers helped, please feel free to re-open with more details if not.

[tomlokhorst]

I'm also looking into building small preview images.

It seems the Facebook "trick" doesn't work with sharp, because the Huffman tables are optimised when generating JPEGs. Therefor the headers for different JPEGs are different from each other.

Am I understanding this correctly?

[wmertens]

yes correct. Another cool approach is using svg previews, vectorizing
images. https://jmperezperez.com/svg-placeholders/

On Wed, Jun 20, 2018, 10:19 PM Tom Lokhorst [e-mail]
wrote:

I'm also looking into building small preview images.

It seems the Facebook "trick" doesn't work with sharp, because the Huffman
tables are optimised when generating JPEGs
http://sharp.pixelplumbing.com/en/stable/#optimal. Therefor the headers
for different JPEGs are different from each other.

Am I understanding this correctly?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/lovell/sharp/issues/846#issuecomment-398883207, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AADWll8y4yoQxwmbUk-o6EbGmkxY36jFks5t-q5ZgaJpZM4N7E75
.