Introduction

Nowadays images (e.g. JPEG, PNG) can contain regions in their metadata following this standard. Image Regions are useful for describing specific areas of the image (e.g. objects, people) or for indicating how the image should be cropped or rotated to best fit a given container. The Frameright webapp can be used to define such Image Regions and insert them in the metadata of a picture.

By using our open-source components and libraries you can make sure that the website your are building will automatically display the best fitting region based on the current size of the image container. No need to manually create various versions of the same image for different ratios anymore, to write the boilerplate code tying everything together, or to worry about all possible device sizes.

React component in action ▲ Source code

If you are developing a React web app, see our React component. Have a look at the Live demo or try it out directly on CodeSandbox.

If you are coding a website with any other UI frameworks (e.g. Vue, Solid or Angular) or with no framework at all, have a look at our web component. Try it out directly on CodeSandbox. You will need either our JavaScript library or our PHP library to parse the image metadata, either in the browser or server-side. Check out the Node.js tutorial or the PHP tutorial for that.

If you are building your website with WordPress, have a look at our WordPress plugin.

You can read more about Image Display Control and Frameright at frameright.io. Don't hesitate to reach out to us, e.g. via GitHub Discussions. Any kinds of contributions and feedback are welcome!