Show HN: React/web component for responsive images on steroids

17 points by lourot 3 years ago · 2 comments · 1 min read

Hey, OP here. This is hopefully interesting, especially for front-end developers. Nowadays images (JPEG, PNG, ...) can contain so-called Image Regions in their metadata [1] like cropping regions or regions of interest. So we've created a React component [2] that responsively displays the "best" cropping region, i.e. the one with the ratio closest to the current `<img>` element size. If you don't use React we have also built a web component. [3] With this approach you no longer have to worry about whether the size of your assets will match the ratio of their containers on all devices. The displayed image will always make sense and you don't need to maintain a bunch of hard crops anymore. Check out our demo [4] to see it in action. Feel free to ask us any questions, provide feedback, or contribute. We hope this will be useful to someone!

[1]: https://iptc.org/std/photometadata/specification/IPTC-PhotoM...

[2]: https://github.com/Frameright/react-image-display-control

[3]: https://github.com/Frameright/image-display-control-web-comp...

[4]: https://react.frameright.io/