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.