BetterImage: A New Image Optimization Tool
A React tool to make application development easier
“A picture is worth a thousand words”
If you want to make a good-looking website, is a bit of fancy CSS and HTML enough? Most of us would answer that question with a resounding NO. We want pictures, and lots of them! Whether we’re looking at a large e-commerce website, or a simple blog post, our eyes are naturally drawn to the photos embedded in the lines of text. Images can help illustrate an idea, provide a bit of comic relief, or give visual details about a product we’re considering buying.
Images are great, but all those cute kitten memes can add up to a big problem. We want lots of images, but we also want websites that load quickly, even (or especially!) on our phones. We don’t want to burn through all our data, or have the text we’re reading suddenly jump off-screen as a large photo of the beach suddenly renders.
As web developers and software engineers, we want to give our audiences what they want. If you are familiar with NextJS, you might know about the terrific image optimization features that were included in the recent release of version 10. Since NextJS is a framework that can be used on both the frontend and the backend of React applications, it’s capable of performing a wide range of manipulations, including converting an image to a web-friendly (WebP) format, loading images on an as-needed-basis for users (lazy-loading), and more.
If you’re already using NextJS, that might be the way to go. But what if you want the image optimization features, inline styling, and simplicity of a React component, without the hassle of having to include a new framework?
Introducing… BetterImage!
BetterImage is an open-source tool that we built to mimic many of these image optimization features easily and conveniently in a React frontend. It converts images to the optimized WebP format, which is 30% smaller than JPEG images, without sacrificing quality. This improves the rendering speed, as well as SEO and Accessibility scores on Google Lighthouse compared to the standard <img> tag. The BetterImage component also streamlines the CSS formatting by including the most popular manipulations directly into the component itself. BetterImage takes the properties and abstracts away the manipulations and imports, allowing you to focus more on the rest of your application. BetterImage is also compatible with both Class-based and functional components, so you can incorporate it no matter which flavor of React you’re using. The incorporated fallback image, as well as height and width CSS dimensions, prevent Cumulative Layout Shift (CLS) — a metric which will soon be used by Google when assessing and ranking websites.
It’s still in the Beta stage, with more features and an NPM package in development. If you’d like to check the BetterImage component, have questions, or want to contribute to this open source project, please visit the BetterImage Github and website!
Contributors: Anderson Koh, Christelle Desire, Isaac Kittila, and Shirin Davis.
