Create-react-app: Responsive images

[jacobp100]

I was wondering how you would handle images at different resolutions depending on screen size. There's now great browser support for <img srcset="…">, but I can't find anything in the documentation on how you would use this.

Has anybody managed to do this, or have any thoughts on how this would be achieved?

[iansu]

This is for issues specific to Create React App.

I'm not sure if you're question is React specific or just general HTML/CSS but there is a list of React resources here: https://facebook.github.io/react/community/support.html

[jacobp100]

This is related to CRA. If you import an image under 10kb, it’ll base64 it and include it in the JS/CSS source. Therefore if you try to do responsive images, you include every version in your code

[iansu]

I see. That was unclear from your original comment.

If you're using responsive images they are probably going to be larger than 10kb. In that case they won't be inlined, you'll just get the URL and the browser can download and render the appropriate image.

If any of the images are under 10kb then they'll be inlined. If more than one version is under 10kb then you will end up with multiple inlined versions. That still seems like the right behaviour though.

[jacobp100]

We were considering responsive raster icons, which would be less than 10kb. I really don’t think the right behaviour there is to inline every version.

Is it worth keeping this open so people can at least discuss approaches that might work?

[mvasin]

To me, using srcset means you drop a single high-res image somewhere in /src, and the build pipeline chops it into a set of images of various resolutions (so browser can pick at load time) and drops them in /build. That's how it works in Jekyll.

I don't think it's a feature too fringe; screen sizes vary widely and every web developer has to address this.

I'd love to see at least a hint in the docs on how to deal with it.