https://github.com/hyperjumptech/strapi-optimized-image
Retrieve optimized image from Strapi
https://github.com/hyperjumptech/strapi-optimized-image
cms image optimization strapi
Last synced: 3 months ago
JSON representation
Retrieve optimized image from Strapi
- Host: GitHub
- URL: https://github.com/hyperjumptech/strapi-optimized-image
- Owner: hyperjumptech
- License: mit
- Created: 2024-09-10T09:06:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-10T10:49:21.000Z (over 1 year ago)
- Last Synced: 2025-11-23T07:22:57.372Z (6 months ago)
- Topics: cms, image, optimization, strapi
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@hyperjumptech/strapi-optimized-image
- Size: 132 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Strapi Optimized Image
Retrieve optimized image from [Strapi](https://strapi.io/).
## Quick Start
### Install
```sh
npm i --save-exact @hyperjumptech/strapi-optimized-image
```
### Usage
```typescript
import {
PreferredSize,
strapiOptimizedImage,
} from "@hyperjumptech/strapi-optimized-image";
const formats = {
thumbnail: {
height: 180,
url: "https://example.com/logo_thumbnail.svg",
width: 320,
},
small: {
height: 225,
url: "https://example.com/logo_small.svg",
width: 400,
},
large: {
height: 900,
url: "https://example.com/logo_large.svg",
width: 1600,
},
};
const { height, src, width } = strapiOptimizedImage({
image: {
formats,
height: 720,
url: "https://example.com/logo.svg",
width: 1280,
},
fallback: "smaller",
preferredSize: PreferredSize.Medium,
});
console.log({ height, src, width });
// { height: 225, src: "https://example.com/logo_small.svg", width: 400 }
```
| Props | Default Value | Description | Example |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| image | `undefined` | The image object structure from the Strapi API response | `{ formats, height: 100, url: "/uploads/logo.svg", width: 100 }` |
| fallback | "original" | Uses the original size of the image if set to `"original"`. Tries to find a smaller image if set to `"smaller"`. | `"original" / "smaller"` |
| preferredSize | "large" | Attempts to use the preferred size. If unavailable, it will use the original or a smaller image, depending on the fallback value. | `"thumbnail" / "small" / "medium" / "large"` |
## License
The MIT License.