Nimble Pet Microbes

    remix-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.3 • Public • Published

    Remix-Image

    👋 Intro

    A React component for responsive images in Remix.

    This library lets you:

    • Resize images to the minimum size needed for faster page loading
    • Convert images to more efficient file types for faster page loader
    • Apply transformations to images such as resize, crop, rotate, blur, and flip
    • Cache commonly requested assets for the best performance

    Turning:

    <Image
      src="https://i.imgur.com/5cQnAQC.png"
      responsive={[
        {
          size: { width: 100, height: 100 },
          maxWidth: 500,
        },
        {
          size: { width: 600, height: 600 },
        },
      ]}
      dprVariants={[1, 3]}
    />

    Into:

    <img
      src="/api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=600&height=600"
      srcset="/api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=100&height=100 100w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=600&height=600 600w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=300&height=300 300w, /api/image?src=https%3A%2F%2Fi.imgur.com%2F5cQnAQC.png&width=1800&height=1800 1800w"
      sizes="(max-width: 500px) 100px, 600px"
    >

    Where the responsive sizes provided through the props are turned into image URLs served by the local server that are cached for fast and performant loading.

    🚀 How to use

    Install

    To install this library and its peer deps, use one of the following commands:

    npm install -S remix-image @next-boost/hybrid-disk-cache
    yarn add remix-image @next-boost/hybrid-disk-cache

    Docs

    Install

    npm i remix-image

    DownloadsWeekly Downloads

    565

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    1.42 MB

    Total Files

    52

    Last publish

    Collaborators

    • josh-mcfarlin