reshoot v0.0.1

Reshoot

All-in-one Babel macros that generates both lqip and HTML5 image srcset and returns them in a single object.

Motivation

You can use lqip-loader or lqip.macro for low quality image preview, and responsive-loader for generating srcset. But why do them separately when they can be done in one pass? This saves object

The reason why I make it as a Babel macros instead of a Webpack loader is because Babel completely replaces

Principles

This is not an ordinary library. It is designed with the following three principles.

• Minimal footprint

  library.size() === codeYouWouldHaveWritten.size()

  The code footprint of this library is equal to what you'd have written as if it doesn't exist. Features that you don't need are simply not included, not even a single byte.

• Minimal re-rendering

  The only time when the component is re-rendered.

• Minimal overhead

• Minimal config

  The library is shipped with default config. It works out of the box, while you can further customize it according to your need.

• Minimal redundancy

  Why process the same image twice for lqip and srcset? They are essentially generated using the same process - resize.

Usage

Use as a Babel macro

import Reshoot from "reshoot/macro";

const Page = () => (
  <div>
    <Reshoot
      src="./image.jpg"
      srcSet={[320, 480, 800]}
      sizes={'(min-width: 320px)': '320px', default: '100%'}
    />
  </div>
);

export default Page;

↓ ↓ ↓ ↓ ↓ ↓

import Image from "reshoot/macro";

const Page = () => (
  <div>
    <Image
      preSrc="/public/preview.jpg"
      src="./fallback.jpg"
      srcSet="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
      sizes="(min-width: 320px) 320px, 100%"
    />
  </div>
);

export default Page;

Credits

Based on pveyes/raw.macro.

License

MIT