nowfound

Life & fun · June 13, 2023

RW

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…

React/web component for responsive images on steroids launched on June 13, 2023 with 17 votes, #1,589 of 4,655 launches that month and more than 75% of that year's launches.

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.…

Does a similar job

all alternatives →

More life & fun this month

the category →

Source: Show HN post ↗ · launch text quoted in part

Launched alongside, June 2023

the whole month →
  • 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

  • Sivi AI▲938

    Generative AI to magically turn text to visual designs

    AI · 2023 · sivi.ai

  • Effortlessly publish on Twitter and LinkedIn, now with AI

    Growth · 2023 · typefully.com

  • Olvy 2.0▲826

    Analyze user feedback 10x faster with AI

    AI · 2023 · olvy.co

  • SlashPage▲755

    Create websites in seconds to build your first 1K community

    Growth · 2023 · slashpage.com

  • Easy to use AI-powered, drag-and-drop website, SAAS landing, directory, and blog builder for startups, mobile apps, and SaaS. 100% no code, no design skills needed.

    AI · 2023 · unicornplatform.com