react-optimized-image

Features:

• Optimize images using WebAssembly (runs in every environment)
• React components for different use-cases (responsive images, WebP conversion, lazy loading placeholders, image manipulation, ...)
• Build cache for images for faster builds
• Convert to WebP automatically during a webpack build
• Inline small images automatically
• ...

Table of contents

• Requirements
• Installation
• Usage
  • Image components
• Global image config
• License

Requirements

This image components requires optimized-images-loader to already be installed and configured.

If you are using Next.js, you can use the next-optimized-images plugin instead for easier configuration.

Installation

npm install react-optimized-image

Add the react-optimized-image/plugin babel plugin to your .babelrc file. If you don't yet have a .babelrc file, create one with the following content:

{
  "plugins": ["react-optimized-image/plugin"]
}

Usage

You can now import or require your images directly in your react components:

import React from 'react';
import Img from 'react-optimized-image';
import Header from './images/header.jpg';

export default () => (
  <div>
    {/* with import statement ..*/}
    <Img src={Header} />

    {/* ..or an inline require */}
    <Img src={require('./images/my-small-image.png')} />
  </div>
);

/**
 * Results in:
 *
 * <div>
 *   <img src="/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 *   <img src="data:image/png;base64,..." />
 * </div>
 */

Image components

For easier use and full typescript support, this plugin provides some image components.

• Img
• Svg

Img

The Img component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.

Usage

import Img from 'react-optimized-image';
import MyImage from './images/my-image.jpg';

export default () => (
  <>
    <h1>Normal optimized image</h1>
    <Img src={MyImage} />

    <h1>Image will be resized to 400px width</h1>
    <Img src={MyImage} sizes={[400]} />

    <h1>A WebP image will be served in two sizes: 400px and 800px</h1>
    <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>
    <Img src={MyImage} webp sizes={[400, 800]} />
  </>
);

/**
 * Results in:
 *
 * <h1>Normal optimized image</h1>
 * <img src="/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 *
 * <h1>Image will be resized to 400px width</h1>
 * <img src="/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg" />
 *
 * <h1>A WebP image will be served in two sizes: 400px and 800px</h1>
 * <h2>As a fallback, a jpeg image will be provided (also in both sizes)</h2>
 * <picture>
 *  <source type="image/webp" srcset="/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp" media="(max-width: 400px)">
 *  <source type="image/webp" srcset="/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp" media="(min-width: 401px)">
 *  <source type="image/jpeg" srcset="/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg" media="(max-width: 400px)">
 *  <source type="image/jpeg" srcset="/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg" media="(min-width: 401px)">
 *  <img src="/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg"></picture>
 * </picture>
 */

Properties

Svg

The Svg includes an svg file directly into the HTML so it can be styled by CSS. If you don't want to include them directly in the HTML, you can also use svg images together with the Img component which will reference it by the URL.

Usage

import { Svg } from 'react-optimized-image';
import Icon from './icons/my-icon.svg';

export default () => (
  <>
    <h1>SVG will be directly included in the HTML</h1>
    <Svg src={Icon} className="fill-red" />
  </>
);

/**
 * Results in:
 *
 * <span><svg class="fill-red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="280" height="330"><g><path>...</path></g></svg></span>
 */

Properties

Global image config

The images.config.js file contains default image optimization options and is located in the root of your project.

Available options: | Option | Type | Description | | :--- | :------: | :---------- | | default | ImgProps | Properties specified within the default key will get applied to all usages of the Img components.
All properties of the Img component can be set. For example, to convert all your images to WebP, set { webp: true }. | | types | Record<string, ImgProps> | Instead of specifying options for all images with the default key, you can create as many image types as you want. Those can also contain all properties of the Img component. The options specified in the default key will also get applied here if they are not overwritten. |

Example

// images.config.js

module.exports = {
  default: {
    webp: true,
  },
  types: {
    thumbnail: {
      sizes: [200, 400],
      breakpoints: [800],
      webp: false,
    },
  },
};

This will convert all images to WebP. The images with the thumbnail type will be generated in two sizes (200, 400) but not converted to WebP. If webp: false would not be present, it would get inherited from the default key.

import React from 'react';
import Img from 'react-optimized-image';
import MyImage from './images/my-image.jpg';

export default () => (
  <div>
    {/* This will get converted into a WebP image (while still providing a fallback image). */}
    <Img src={MyImage} />

    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}
    <Img src={MyImage} type="thumbnail" />
  </div>
);

License

Licensed under the MIT license.

© Copyright Cyril Wanner