Request to add [Optimized Image/Picture] component

Is your feature request related to a problem? Please describe.

Images are the heaviest part of a website. Lazyloading is rather hard to implement and the picture/srcset syntax is all over the place and confusing for new devs. Webp is an amazing solution for this but its barely used because it’s not yet stable in every browser.

Taking care of this issue would greatly improve web accessibility for people on slow networks.

Describe the solution you’d like

An improvement to the Image component that would address all of these issues, similar to gatsby-images. Users would still need to convert and provide the images themselves but

• lazyloading
• webp fallbacks
• responsive sizes are made easy.

A nice and flexible api could look like this:

<Image
	loading='lazy' // default behavior
    placeholder='img-xxs.jpg' // blured version of this is gonna be shown while the image loads
	src='img-md.jpg' // the default source and fallback
    sizes={['/img-sm.jpg', '/img-md.jpg','/img-lg.jpg']} // responsive array like styled-system that can take multiple sources
	webp={['/img-sm.webp', '/img-md.webp','/img-lg.webp']}
/>

Most keys are optional so sth like this is possible

<Image src='img-md.jpg' webp='img-md.webp' />

This integrates well with pretty much every common image optimization service like Cloudinary that provide flexible links for every size.

Describe alternatives you’ve considered

I thought about porting gatsby-image out of gatsby but the api is very specific to their image sharp configuration.

[grsoares21]

Sad to see this has gone stale, 😕. It was exactly what I was looking for.

Anyone with plans of doing a PR for this?

[subhendukundu]

I see two problems with the Image component too.

1. If the image is too big, its shows a broken image until the whole image is loaded. So I guess the proposed isLazy or adding a loading icon would be great.
2. fallbackSrc take a string which is great but I think we should provide an ability to add a passing custom component too. So that it’s possible to pass SVG to make it more personalized.

Is anyone working on this? Otherwise, I would like to pick it up.