Roadmap

v1.0.0

sizes, formats and quality are set via global config file.

Config file:

{
  "image": {
    "formats": ["AVIF", "WebP"],
    "sizes": {
      "0": "414", // screens from 0px to 414px will have image of 414px
      "414": "768", // screens from 414px to 768px will have image of 768px
      "768": "1024", // screens from 768px to 1024px will have image of 1024px
      "1024": "1200", // screens from 1024px to 1200px will have image of 1200px
      "1200": "1920" // screens from 1200px to ∞px will have image of 1920px
    },
    "quality": 70,
  },
  "video": {}, // future stuff
  "audio": {} // future stuff
}

Component usage:

<Image src="/path/to/image.png" />

v1.1.0

formats can be overwritten on component directly.

<Image
  src="/path/to/image.png"
  formats={["WebP", "AVIF"]}
/>

v1.2.0

sizes can be overwritten with width and height.

<Image
  src="/path/to/image.png"
  formats={["WebP", "AVIF"]}
  sizes={{
    "0": {
      width: 300,
      height: 150
    },
    "375": {
      width: 200,
      height: 150
    },
    "768": {
      width: 768,
      height: 150
    },
  }}
/>

v1.3.0

fit and position can be set to fill, contain or cover the image. cover will actually crop the image. See object-fit reference.

<Image
  src="/path/to/image.png"
  formats={["WebP", "AVIF"]}
  fit="crop"
  position="center top"
  sizes={{
    "0": {
      width: 375,
      height: 100,
      fit: "cover",
      position: "top left",
    },
    "375": {
      width: 768,
      height: 200,
      fit: "contain",
    },
    "768": {
      width: 768,
      height: 150
    },
  }}
/>

v1.4.0

Resolutions and much more.

v2.0.0

Light syntax to set sizes.

<Image
  src="/path/to/image.png"
  sizes={{
    "0": "375x150 / cover / center top",
    "375": "800x350 / cover / center top",
  }}
/>