Support responsive + preview images

[KyleAMathews]

Just had a brainstorm last night. Images in sites/blogs are great but can really slow down page load times particularly on mobile. A lot of sites, perhaps most notably Medium, have implemented a technique where they first load a placeholder image which is a very low resolution/blurred version of the final image. So if you have a 500px wide image you put in your blog post, they'll load first a ~25px wide version that they scale up to 500px width and blur it. Then when the page loads, they load the full resolution image.

So this is cool but hard to setup. But I think with a bit of Webpack/React/Markdown magic this could all be handled automatically. So you could write a post in Markdown and insert an image say ![my image](./way-cool-image.jpg) and this would get converted into a React component which first displays the placeholder image then loads the correct full resolution image on page load.

@herrstucki's React component/Webpack loader does 90% of the work https://github.com/herrstucki/responsive-loader I opened an issue for adding placeholder support dazuaz/responsive-loader#4 (comment)

The other task to make this work is to make it work with Markdown. One potential solution is to write a Markdown-it plugin which takes each image, runs it through the image loader, and then inserts the srcSet info. An even better solution (perhaps) would be to use something like https://andreypopp.github.io/reactdown/ so we could insert a React component which lazy loads images as you scroll down the page.

[jstcki]

For transforming Markdown with custom components, remark-react has a configuration option where you can map tags to components, e.g. {img: ResponsiveImage, a: Link}. And no more dangerouslySetInnerHTML!

[KyleAMathews]

Oh nice!! That'd make this a lot simpler. Actually, this is sounding very doable now w/o a lot more work :-)

[jemgold]

remark-react looks really nice, thanks @herrstucki :)

I did ~= the same thing by using marked in my markdown loader

[KyleAMathews]

This Facebook article is 💯 They're also powering this system through GraphQL 🔥

https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

[stereobooster]

It is also important to set image (other components) size as per AMP recomendation https://www.ampproject.org/docs/get_started/technical_overview.html#size-all-resources-statically

[KyleAMathews]

This is a super detailed/helpful post https://cloudfour.com/thinks/responsive-images-101-definitions/

[KyleAMathews]

A popular JS library that implements these techniques https://github.com/aFarkas/lazysizes

[KyleAMathews]

I've started working on an example site using these techniques on the 1.0 branch https://github.com/gatsbyjs/gatsby/tree/1.0/examples/image-gallery

[KyleAMathews]

For the blur affect — we'll probably want to do something like described in these articles https://jmperezperez.com/medium-image-progressive-loading-placeholder/ and https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

[KyleAMathews]

Annndddd got the progressive loading photos working https://sales-person-hare-28612.netlify.com/photo-1441986300917-64674-bd-600-d-8/

[KyleAMathews]

Commit: 3ced3e9

[javdl]

think this can be closed: https://www.gatsbyjs.org/packages/gatsby-remark-images/

[javdl]

By the way, is there a similar NPM package I can use in my React components? For example in an image slider where I want to use the blur up technique + srcset images?
This would do maybe, though it seems it's not used much... https://github.com/revolunet/react-srcset-image

[KyleAMathews]

think this can be closed

haha! Yes it can! Kinda forgot about this issue but it was the start which led to gatsby-remark-images :-)

I'm not familiar actually with a standalone React component. I'd love to build one for Gatsby actually that relies on the image processing capabilities here but haven't gotten to that yet.