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
andsrcset
? They are essentially generated using the same process - resize.
Usage
Use as a Babel macro
import Reshoot from "reshoot/macro"; const Page = <div> <Reshoot ="./image.jpg" = = /> </div>; ; ↓ ↓ ↓ ↓ ↓ ↓ import Image from "reshoot/macro"; const Page = <div> <Image ="/public/preview.jpg" ="./fallback.jpg" ="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" ="(min-width: 320px) 320px, 100%" /> </div>; ;
Credits
Based on pveyes/raw.macro.
License
MIT