How to optimise images with Next.js
April 3, 2023
In this post we introduce our Mighty Image Next.js component. This extension to the HTML img element provides some much needed performance optimisation for the modern web.
Our Next.js Image component, next-mighty-image, is an extension of the HTML <img> element.
The extension provides built-in performance optimisation that helps improve web page scores and fully utilise the power of mighty image’s API.
Some features of the component are
- Lazy loading: Only load images when they are in the viewport
- Define image sizes based on viewport breakpoints
- Automated image optimisation to Webp
- Easily apply Mighty Image transformations such as filters, labels, …
How to use the component
- Install the package via npm: npm i next-mighty-image@latest
- Add an environment variable: MIGHTY_IMAGE_ID=**YOUR_ACCOUNT_ID** This ID can be found in the Mighty Image dashboard for your account
- Add <MightyImage /> components with src, alt, width and height properties
For a full list of properties you can have a look at our next-mighty-image repo.
Ready to superpower your images?
