Under the Hood of BetterImage
A React tool to make application development easier
Images are a necessary part of most applications and websites, and yet most websites do not currently use the most browser-friendly formats or styles. This slows down sites and frustrates users. BetterImage is a new React tool that enhances the image optimization and editing experience by providing a single component that unifies format conversion and in-line CSS styling techniques, making it simple and easy to get the best look and performance from images in a React application. The format conversion is to WebP, which is a newer format developed specifically for images on the internet. WebP files are 30% smaller than JPEG files with no discernible quality loss.
Google Lighthouse tests show that the BetterImage component was able to improve the performance of loading an image from an overall score of 53 to 63 over using a standard img-tag. The inclusion of a fallback image and CSS height and width specifications also helped improve the Accessibility and SEO scores, and minimize Cumulative Layout Shift (CLS).
Other frameworks like Next.JS provide great image optimization, and our team wanted to take those advantages and mimic them in React, without the need for another framework. We created the “BetterImage” component, an open-source solution which allows the developer to input styling directly into the React code, in string format. The styling is all optional and can be removed if not needed.
What happens underneath the hood? Those props are being passed down to the BetterImage component, which will abstract the information to manipulate the image. There is no need to import the image in the React component, just pass the relative path as the source and BetterImage will dynamically import the converted image as the new source. BetterImage converts the source file to WebP with an API call to an external NPM package, and stores the newly converted image to a local folder. This will help to render the image even faster after the first manipulation. All the other features are applied to the image as needed and are always flexible to use.
To get started with our BetterImage component, we invite you to use our code on Github, which is currently in Beta status. If you’d like to check it out, have questions, or would like to contribute to this open source project, please visit our Github and our website!
Contributors: Anderson Koh, Christelle Desire, Isaac Kittila, and Shirin Davis.
