media.macro
Load images using a babel macro.
Features
- Works for images and videos
- Optimize.
- Keep lossless media in your project and optimize at compile time.
- Convert.
- Convert your media into other formats.
- Use WebP with PNG fallbacks.
- Create responsive sizes.
- Load media at the lowest resolution needed for crisp display.
- Gives you dimension information so you can avoid layout thrashing.
Usage
To use this you must install and configure babel-plugin-macros.
npm install media.macro
# or
yarn add media.macro
Input
import media from 'media.macro'
const MyImage = media('./my-image.png')
Output
const MyImage = {
height: 100,
width: 100,
// included if the file is an image
imgBase64: '...',
imgSrc: '...',
imgWebPSrc: '...',
imgSrcSet: '...',
imgWebPSrcSet: '...',
imgBase64: '...',
// included if the file is a video
videoSrc: '...',
videoPosterSrc: '...',
videoPosterWebPSrc: '...',
videoPosterBase64: '...',
}
Displaying the Image
This macro will work well with react-fast-image. This is optional though, you can consume the output however you want.
import FastImage from 'react-fast-image'
import media from 'media.macro'
const MyComponent = () => <FastImage {...media('./my-image.png')} />
Options
You can pass options to the media
macro.
Two important options are outputPath
and publicPath
.
These options determine where the output media files go in the file tree, and how to build the URL for them.
import media from 'media.macro'
const MyImage = media('./my-image.png', {
maxWidth: 1024,
toImgFormat: 'png',
toVideoFormat: 'mp4',
toVideoPosterFormat: 'png',
// For create-react-app these could be:
outputPath: 'public/static',
publicPath: 'static',
})
Global Options
Since you probably want the options set globally for this macro you can use babel-plugin-macros.config.js
to configure it as well.
This should be in the same directory as your .babelrc.js
file.
// babel-plugin-macros.config.js
module.exports = {
media: {
publicPath: 'static',
outputPath: 'public/static',
},
}