media.macro

Load images using a babel macro.

Features

• Works for images and videos
  • We use sharp for images.
  • We use ffmpeg for 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',
    },
}

License

MIT