https://github.com/mightyimage/next-mighty-image
A Next.js component for Mighty Images
https://github.com/mightyimage/next-mighty-image
Last synced: about 1 month ago
JSON representation
A Next.js component for Mighty Images
- Host: GitHub
- URL: https://github.com/mightyimage/next-mighty-image
- Owner: mightyimage
- License: mit
- Created: 2023-03-29T11:29:26.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-30T13:02:16.000Z (about 3 years ago)
- Last Synced: 2025-09-26T03:49:34.438Z (9 months ago)
- Language: TypeScript
- Size: 99.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-mighty-image
[](https://badge.fury.io/js/next-mighty-image)
A Next.js component for [Mighty Image](https://www.mightyimage.io)
## Features
- Lazy loading
- Supports all mighty image tranformations
- Add labels to images
- Define different sizes based on screensizes
- Apply custom CSS classes
## How to use
1. Install the package via npm `npm i next-mighty-image@latest`
2. Add an environment variable: `MIGHTY_IMAGE_ID=**YOUR_ACCOUNT_ID**`. This ID can be found in the [Mighty Image dashboard ](https://app.mightyimage.io) for your account
3. Add `` components with `src`, `alt`, `width` and `height` properties
````
````
4. Try it out by running your project with `next dev`
## Properties
Following properties are supported.
`src`, `alt`, `width` and `height` are mandatory
````
{
src: string,
alt: string,
width: number,
height: number,
tranformations: {
quality: number,
greyscale: boolean,
sepia: boolean,
boxfit: string, // 'cover','contain', 'fill', 'inside', 'outside',
gravity: string, // 'top','right top','right','right bottom','bottom','left bottom','left','left top',
croptop: number,
cropleft: number,
smartcrop: boolean,
format: string, // 'jpeg', 'png', 'webp'
progressive: boolean,
},
sizes: {
sm: { w: number, h: number },
md: { w: number, h: number },
lg: { w: number, h: number },
},
label: {
text: string,
top: number,
left: number,
color: string, // Hex of a RGBA color without #
width: number,
height: number,
};
className: string,
onClick: any,
loading: string, // 'lazy', 'eager'
}
````
## Sizing breakpoints
| Size | Breakpoint |
| ----------- | ----------- |
| sm | viewport width <= 768px |
| md | viewport width <= 1200px |
| lg | viewport width > 1200px |
## Examples
### Lazy loading, breakpoint sizeing and conversion to Webp
````
````
### Lazy loading, breakpoint sizeing and conversion to Webp
````
````