Strapi Optimized Image

Retrieve optimized image from Strapi.

Quick Start

Install

npm i --save-exact @hyperjumptech/strapi-optimized-image

Usage

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.