As web developers and software engineers, we want to give people what they want. If you are familiar with NextJS , you should be familiar with the awesome image optimization feature included in the recently released version 10. NextJS is a framework that can be used in both the backend and frontend of React applications. It is capable of performing a wide range of manipulations, including converting images to web-friendly WebP format, uploading images as the user needs and much more.
If you are already working with NextJS, this is very helpful. But what if you want optimization functionality, inline styling, and the simplicity of a React component without the hurdles associated with the new framework?
— , . , , ( !) .
, BetterImage
BetterImage is an open source tool that mimics many of the optimization features in a simple and convenient way in React format. It converts the image to optimized WebP 30% smaller than JPEG without sacrificing quality. This improves the display, as well as SEO, accessibility on Google Lighthouse compared to the standard tag. It also streamlines CSS formatting, including the most popular manipulations out of the box. The component takes properties, abstracting manipulations and imports, allowing more focus on the application. BetterImage is compatible with class-based and functional components, so you can include it in your application no matter what flavoring you serve your React with. Enabling backup image,as well as height and width dimensions CSS prevents the aggregate layout shift metric from being applied when evaluating a site in Google Lighthouse.
Google Lighthouse results for standard tag (left) versus BetterImage results (right).
The component is still in beta, with new functionality and NPM packages in development. If you would like to try the component case or have questions, please visit Github and the website !
What's under the hood of BetterImage?
Lighthouse tests show that the component can improve image loading performance. Other frameworks like Next.JS give great optimizations. Our team wants to adopt this in React so that other frameworks are not needed. We created BetterImage so that developers can write styles directly in React code as a string. Styling is optional and may not be used at all.
BetterImage Component
What's under the hood? The properties are passed to the component, which then abstracts the information to manipulate the image. There is no need to import the image itself into the React component, only the relative path is needed and BetterImage will dynamically import the converted image. BetterImage converts the source file to WebP using an external NPM package API call and stores the converted image in a local folder. This will help render the image even faster after the first manipulation. All other functionality - always flexible - is applied as needed. For a preview of the component currently in beta, welcome to Github and the website !
Thanks for reading this little review!
