{"id":21412614,"url":"https://github.com/mightyimage/next-mighty-image","last_synced_at":"2026-05-17T21:10:42.988Z","repository":{"id":148838832,"uuid":"620789243","full_name":"mightyimage/next-mighty-image","owner":"mightyimage","description":"A Next.js component for Mighty Images","archived":false,"fork":false,"pushed_at":"2023-03-30T13:02:16.000Z","size":102,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-26T03:49:34.438Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mightyimage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-29T11:29:26.000Z","updated_at":"2023-03-29T13:20:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"e9519b7f-d9ac-4286-9f2a-d48f09c6f151","html_url":"https://github.com/mightyimage/next-mighty-image","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mightyimage/next-mighty-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyimage%2Fnext-mighty-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyimage%2Fnext-mighty-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyimage%2Fnext-mighty-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyimage%2Fnext-mighty-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mightyimage","download_url":"https://codeload.github.com/mightyimage/next-mighty-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyimage%2Fnext-mighty-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33155543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T18:14:47.016Z","updated_at":"2026-05-17T21:10:42.962Z","avatar_url":"https://github.com/mightyimage.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-mighty-image\n[![npm version](https://badge.fury.io/js/next-mighty-image.svg)](https://badge.fury.io/js/next-mighty-image)\n\nA Next.js component for [Mighty Image](https://www.mightyimage.io)\n\n## Features\n- Lazy loading\n- Supports all mighty image tranformations\n- Add labels to images\n- Define different sizes based on screensizes\n- Apply custom CSS classes\n\n## How to use\n1. Install the package via npm `npm i next-mighty-image@latest`\n\n2. 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\n\n3. Add `\u003cMightyImage /\u003e` components with `src`, `alt`, `width` and `height` properties\n\n````\n            \u003cdiv className=\"relative \"\u003e\n                    \u003cMightyImage\n                      src={/products/red-chair-2022.png}\n                      alt={\"A product shot of a red chair\"}\n                      height={500}\n                      width={500}\n                    /\u003e\n            \u003c/div\u003e\n````\n\n4. Try it out by running your project with `next dev`\n\n## Properties\nFollowing properties are supported. \n`src`, `alt`, `width` and `height` are mandatory\n\n````\n{\n    src: string,\n    alt: string,\n    width: number,\n    height: number,\n    tranformations: { \n            quality: number, \n            greyscale: boolean, \n            sepia: boolean, \n            boxfit: string,         // 'cover','contain', 'fill', 'inside', 'outside',\n            gravity: string,        // 'top','right top','right','right bottom','bottom','left bottom','left','left top',\n            croptop: number, \n            cropleft: number, \n            smartcrop: boolean, \n            format: string,         // 'jpeg', 'png', 'webp'\n            progressive: boolean, \n    },\n  sizes: {\n    sm: { w: number, h: number },\n    md: { w: number, h: number },\n    lg: { w: number, h: number },\n  },\n  label: {\n    text: string,\n    top: number,\n    left: number,\n    color: string,      // Hex of a RGBA color without #\n    width: number,\n    height: number,\n  };\n  className: string, \n  onClick: any, \n  loading: string,      // 'lazy', 'eager'\n}\n  ````\n\n## Sizing breakpoints\n| Size | Breakpoint |\n| ----------- | ----------- |\n| sm | viewport width \u003c= 768px | \n| md |  viewport width \u003c= 1200px |\n| lg | viewport width \u003e 1200px |\n\n## Examples\n\n### Lazy loading, breakpoint sizeing and conversion to Webp\n\n````\n  \u003cMightyImage\n                src={/products/red-chair-2022.png}\n                alt={\"A product shot of a red chair\"}\n                height={500}\n                width={500}\n                loading={'lazy'}\n                tranformations={{\n                  quality: 100,\n                  boxfit: 'contain',\n                  format: 'webp',\n                }}\n                sizes={{\n                  sm: { w: 200, h: 300 },\n                  md: { w: 150, h: 230 },\n                  lg: { w: 300, h: 455 },\n                }}\n              /\u003e\n````\n### Lazy loading, breakpoint sizeing and conversion to Webp\n\n````\n  \u003cMightyImage\n                src={/products/red-chair-2022.png}\n                alt={\"A product shot of a red chair\"}\n                height={500}\n                width={500}\n                sizes={{\n                  sm: { w: 200, h: 300 },\n                  md: { w: 150, h: 230 },\n                  lg: { w: 300, h: 455 },\n                }}\n                label={{\n                  text: '© Mighty Image',\n                  left: 20,\n                  top: 20,\n                  width: 60,\n                  height: 30,\n                  color: 'F2F2F2',\n                }}\n              /\u003e\n````","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmightyimage%2Fnext-mighty-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmightyimage%2Fnext-mighty-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmightyimage%2Fnext-mighty-image/lists"}