React/web component for responsive images on steroids
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 `` 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…
In plain words
This is a React component and web component that automatically displays the best cropping region for responsive images by reading Image Regions metadata embedded in JPEG and PNG files. Rather than manually creating multiple image crops for different screen sizes, the component selects the cropping region that best matches each container's aspect ratio. It eliminates the need to maintain hard-cropped image variants across devices, ensuring images always display appropriately regardless of container dimensions.
written from the facts on this page · September 2026
From the sources
In the maker’s words, at launch
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/
More life & fun this month
the category →- TL
Life & fun · 10d ago · louisabraham.github.io
Photosynthesis fires two of your iPhone
Life & fun · 28d ago · photosynthesis.camera
SoloUno▲310Take control of hair pulling, nail biting & skin picking
Life & fun · 28d ago · solouno.io
Scroll through all 43,252,003,274,489,856,000 reachable Rubik's Cube permutations.
Life & fun · 26d ago · everycube.alen.is
Hi HN, I built Eigendrum, a web tool that solves the 2D wave equation for arbitrary shapes so you can hear what they sound like as drums. How it works: * Solves -∇²u = λu using finite element analysis (Kφ = λMφ) on a triangle mesh. * Validated to <0.1% error against closed-form solutions for circles (Bessel zeros) and rectangles. * Sound model factors in strike location, Rayleigh damping, and mallet width. * Includes Kac drums I & II to demonstrate identical sound spectra from different geometries. * No frameworks, build steps, or dependencies. Repo and tests:…
Life & fun · 26d ago · baselashraf81.github.io
Launched alongside, June 2023
the whole month →- NI
Heya HN, I've been working on a reddit-like platform as my primary side project for the last few years. Doing a (very) soft launch today, mainly because I want to use it to encourage discussion of alternatives. How non.io works: 1. Free to browse, paid to interact. 2. Minimum subscription is $2 (though you can choose more). I take $1 to run the servers, everything left gets split evenly between everything you upvote that month. It's a simple model, but I hope it's a better one than the freemium model we've been relying on for the last few years. Fundamentally I feel like any ad-supported…
Commerce · 2023 · non.io
Typefully 2.0▲931Effortlessly publish on Twitter and LinkedIn, now with AI
Growth · 2023 · typefully.com
SlashPage▲760Create websites in seconds to build your first 1K community
Growth · 2023 · slashpage.com
