React Component for displaying an image from Imgix

imgix for React

A React component that renders images using imgix. It uses the smallest images possible, and renders well on the server.

Before you get started with react-imgix, it's highly recommended that you read Eric Portis' seminal article on srcset and sizes. This article explains the history of responsive images in responsive design, why they're necessary, and how all these technologies work together to save bandwidth and provide a better experience for users. The primary goal of react-imgix is to make these tools easier for developers to implement, so having an understanding of how they work will significantly improve your react-imgix experience.

Below are some other articles that help explain responsive imagery, and how it can work alongside imgix:

Using imgix with <picture>. Discusses the differences between art direction and resolution switching, and provides examples of how to accomplish art direction with imgix.
Responsive Images with srcset and imgix. A look into how imgix can work with srcset and sizes to serve the right image.

Installation

NPM: npm install react-imgix
Yarn: yarn add react-imgix

This module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. If you are not using ES6 modules, you don't have to do anything

Usage

import Imgix from "react-imgix";

// in react component
<Imgix src={string} />;

Examples

Basic use case

For simply using as you would use an <img>, react-imgix can be used as follows:

import Imgix from "react-imgix";

<Imgix src="https://assets.imgix.net/examples/pione.jpg" sizes="100vw" />;

Please note: 100vw is an appropriate sizes value for a full-bleed image. If your image is not full-bleed, you should use a different value for sizes. Eric Portis' "Srcset and sizes" article goes into depth on how to use the sizes attribute.

This will generate HTML similar to the following:

<img
  src="https://assets.imgix.net/examples/pione.jpg?auto=format&amp;crop=faces&amp;fit=crop&amp;ixlib=react-7.2.0"
  sizes="100vw"
  srcset="
    https://assets.imgix.net/examples/pione.jpg?auto=format&amp;crop=faces&amp;fit=crop&amp;ixlib=react-7.2.0&amp;w=100 100w,
    https://assets.imgix.net/examples/pione.jpg?auto=format&amp;crop=faces&amp;fit=crop&amp;ixlib=react-7.2.0&amp;w=200 200w,
    ...
  "
/>

Since imgix can generate as many derivative resolutions as needed, react-imgix calculates them programmatically, using the dimensions you specify. All of this information has been placed into the srcset and sizes attributes.

Width and height known: If the width and height are known beforehand, it is recommended that they are set explicitly:

import Imgix from "react-imgix";

<Imgix
  src="https://assets.imgix.net/examples/pione.jpg"
  width={100} // This sets what resolution the component should load from the CDN and the size of the resulting image
  height={200}
/>;

NB: Since this library sets fit to crop by default, when just a width or height is set, the image will resize and maintain aspect ratio. When both are set, the image will be cropped to that size, maintaining pixel aspect ratio (i.e. edges are clipped in order to not stretch the photo). If this isn't desired, set fit to be another value (e.g. clip)

Server-side rendering

React-imgix also works well on the server. Since react-imgix uses srcset and sizes, it allows the browser to render the correctly sized image immediately after the page has loaded.

import Imgix from "react-imgix";

<Imgix src="https://assets.imgix.net/examples/pione.jpg" sizes="100vw" />;

If the width and height are known beforehand, it is recommended that they are set explicitly:

import Imgix from "react-imgix";

<Imgix
  src="https://assets.imgix.net/examples/pione.jpg"
  width={100} // This sets what resolution the component should load from the CDN and the size of the resulting image
  height={200}
/>;

Flexible image rendering

This component acts dynamically by default. The component will leverage srcset and sizes to render the right size image for its container. This is an example of this responsive behaviour.

sizes should be set properly for this to work well, and some styling should be used to set the size of the component rendered. Without sizes and correct styling the image might render at full-size.

./styles.css

.App {
  display: flex;
}

.App > img {
  margin: 10px auto;
  width: 10vw;
  height: 200px;
}

./app.css

import "./styles.css";

<div className="App">
  <Imgix
    src="https://assets.imgix.net/examples/pione.jpg"
    sizes="calc(10% - 10px)"
  />
</div>;

Aspect Ratio: A developer can pass a desired aspect ratio, which will be used when
generating srcsets to generate the correct height, according to the aspect ratio.

<div className="App">
  <Imgix
    src="https://assets.imgix.net/examples/pione.jpg"
    sizes="calc(10% - 10px)"
    imgixParams={{ ar: "16:9" }}
  />
</div>

The aspect ratio is specified in the format width:height. Either dimension can be an integer or a float. All of the following are valid: 16:9, 5:1, 1.92:1, 1:1.67.

Fixed image rendering (i.e. non-flexible)

If the fluid, dynamic nature explained above is not desired, the width and height can be set explicitly.

import Imgix from "react-imgix";

<Imgix
  src="https://assets.imgix.net/examples/pione.jpg"
  width={100} // This sets what resolution the component should load from the CDN and the size of the resulting image
  height={200}
/>;

Lazy Loading

If you'd like to lazy load images, we recommend using lazysizes. In order to use react-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard src, srcset, and sizes by changing some configuration settings:

<Imgix
  className="lazyload"
  src="..."
  sizes="..."
  attributeConfig={{
    src: "data-src",
    srcSet: "data-srcset",
    sizes: "data-sizes"
  }}
/>

The same configuration is available for <Source /> components

NB: It is recommended to use the attribute change plugin in order to capture changes in the data-* attributes. Without this, changing the props to this library will have no effect on the rendered image.

Low Quality Image Placeholder Technique (LQIP)

If you'd like to use LQIP images, like before, we recommend using lazysizes. In order to use react-imgix with lazysizes, you can simply tell it to generate lazysizes-compatible attributes instead of the standard src, srcset, and sizes by changing some configuration settings, and placing the fallback image src in the htmlAttributes:

<Imgix
  className="lazyload"
  src="..."
  sizes="..."
  attributeConfig={{
    src: "data-src",
    srcSet: "data-srcset",
    sizes: "data-sizes"
  }}
  htmlAttributes={{
    src: "..." // low quality image here
  }}
/>

NB: If the props of the image are changed after the first load, the low quality image will replace the high quality image. In this case, the src attribute may have to be set by modifying the DOM directly, or the lazysizes API may have to be called manually after the props are changed. In any case, this behaviour is not supported by the library maintainers, so use at your own risk.

Picture support

Using the element you can create responsive images:

import Imgix, { Picture, Source } from "react-imgix";

<Picture>
  <Source
    src={src}
    width={400}
    htmlAttributes={{ media: "(min-width: 768px)" }}
  />
  <Source
    src={src}
    width={200}
    htmlAttributes={{ media: "(min-width: 320px)" }}
  />
  <Imgix src={src} width={100} />
</Picture>;

In order to reduce the duplication in props, JSX supports object spread for props:

import Imgix, { Picture, Source } from 'react-imgix'

const commonProps = {
  src: 'https://...',
  imgixParams: {
    fit: 'crop',
    crop: 'faces'
  }
}

<Picture>
  <Source
    {...commonProps}
    width={400}
    htmlAttributes={{ media: "(min-width: 768px)" }}
  />
  <Source
    {...commonProps}
    width={200}
    htmlAttributes={{ media: "(min-width: 320px)" }}
  />
  <Imgix src={src} width={100} />
</Picture>

A warning is displayed when no fallback image is passed. This warning can be disabled in special circumstances. To disable this warning, look in the warnings section.

Attaching ref to `<img />`, etc.

A ref passed to react-imgix using <Imgix ref={handleRef}> will attach the ref to the Imgix instance, rather than the DOM element. It is possible to attach a ref to the DOM element that is rendered using htmlAttributes:

<Imgix htmlAttributes={{ ref: handleRef }}>

This works for Source and Picture elements as well.

Background mode

Images can be rendered as a background behind children by using <Background />. The component will measure the natural size of the container as determined by the CSS on the page, and will render an optimal image for those dimensions.

Example:

// In CSS
.blog-title {
  width: 100vw;
  height: calc(100vw - 100px);
}

// In Component (React)
import { Background } from 'react-imgix'

<Background src="https://.../image.png" className="blog-title">
  <h2>Blog Title</h2>
</Background>

This component shares a lot of props that are used in the main component, such as imgixParams, and htmlAttributes.

As the component has to measure the element in the DOM, it will mount it first and then re-render with an image as the background image. Thus, this technique doesn't work very well with server rendering. If you'd like for this to work well with server rendering, you'll have to set a width and height manually.

Set width and height:

Setting the width and/or height explicitly is recommended if you already know these beforehand. This will save the component from having to do two render passes, and it will render a background image immediately.

This is accomplished by passing w and h as props to imgixParams.

<Background
  src="https://.../image.png"
  imgixParams={{ w: 1920, h: 500 }}
  className="blog-title"
>
  <h2>Blog Title</h2>
</Background>

Custom URLS

This library exposes a pure function, buildURL, for generating full imgix urls given a base url and some parameters.

import { buildURL } from "react-imgix";

buildURL("http://yourdomain.imgix.net/image.png", { w: 450, h: 100 }); // => http://yourdomain.imgix.net/image.png?auto=format&w=450&h=100&ixlib=react-x.x.x

The base url may also contain query parameters. These will be overriden by any parameters passed in with the second parameter.

The ixlib parameter may be disabled by: buildURL(<url>, <params>, { disableLibraryParam: true })

Props

Shared Props (Imgix, Source)

These props are shared among Imgix and Source Components

src :: string, required

Usually in the form: https://[your_domain].imgix.net/[image]. Don't include any parameters.

imgixParams :: object

Imgix params to add to the image src.

For example:

<Imgix imgixParams={{ mask: "ellipse" }} />

sizes :: string

Specified the developer's expected size of the image element when rendered on the page. Similar to width. E.g. 100vw, calc(50vw - 50px), 500px. Highly recommended when not passing width or height. Eric Portis' "Srcset and sizes" article goes into depth on how to use the sizes attribute.

className :: string

className applied to top level component. To set className on the image itself see htmlAttributes.

height :: number

Force images to be a certain height.

width :: number

Force images to be a certain width.

disableSrcSet :: bool, default = false

Disable generation of variable width src sets to enable responsiveness.

disableLibraryParam :: bool

By default this component adds a parameter to the generated url to help imgix with analytics and support for this library. This can be disabled by setting this prop to true.

htmlAttributes :: object

Any other attributes to add to the html node (example: alt, data-*, className).

onMounted :: func

Called on componentDidMount with the mounted DOM node as an argument.

attributeConfig :: object

Allows the src, srcset, and sizes attributes to be remapped to different HTML attributes. For example:

  attributeConfig={{
    src: 'data-src',
    srcSet: 'data-srcset',
    sizes: 'data-sizes'
  }}

This re-maps src to data-src, srcSet to data-srcset, etc.

Picture Props

className :: string

className applied to top level component. To set className on the image itself see htmlAttributes.

onMounted :: func

Called on componentDidMount with the mounted DOM node as an argument.

htmlAttributes :: object

Any other attributes to add to the html node (example: alt, data-*, className).

Background Props

src :: string, required

Usually in the form: https://[your_domain].imgix.net/[image]. Don't include any parameters.

imgixParams :: object

Imgix params to add to the image src. This is also how width and height can be explicitly set. For more information about this, see the "Background" section above.

For example:

<Background imgixParams={{ mask: "ellipse" }} />

className :: string

className applied to top level component. To set className on the image itself see htmlAttributes.

disableLibraryParam :: bool

By default this component adds a parameter to the generated url to help imgix with analytics and support for this library. This can be disabled by setting this prop to true.

htmlAttributes :: object

Any other attributes to add to the html node (example: alt, data-*, className).

Global Configuration

Warnings

This library triggers some warnings under certain situations to try aid developers in upgrading or to fail-fast. These can sometimes be incorrect due to the difficulty in detecting error situations. This is annoying, and so there is a way to turn them off. This is not recommended for beginners, but if you are using custom components or other advanced features, it is likely you will have to turn them off.

Warnings can be turned off with the public config API, PublicConfigAPI, which is exported at the top-level.

// in init script/application startup
import { PublicConfigAPI } from "react-imgix";

PublicConfigAPI.disableWarning('<warningName>');

//... rest of app startup
React.render(...);

Warnings can also be enabled with PublicConfigAPI.enableWarning('<warningName>')

The warnings available are:

`warningName`	Description
fallbackImage	Triggered when there is no `<img>` or `<Imgix>` at the end of the children when using `<Picture>`. A fallback image is crucial to ensure the image renders correctly when the browser cannot match against the sources provided
sizesAttribute	This library requires a `sizes` prop to be passed so that the images can render responsively. This should only turned off in very special circumstances.

imgix for React

Installation

Usage

Examples

Basic use case

Server-side rendering

Flexible image rendering

Fixed image rendering (i.e. non-flexible)

Lazy Loading

Low Quality Image Placeholder Technique (LQIP)

Picture support

Attaching ref to <img />, etc.

Background mode

Custom URLS

Props

Shared Props (Imgix, Source)

src :: string, required

imgixParams :: object

sizes :: string

className :: string

height :: number

width :: number

disableSrcSet :: bool, default = false

disableLibraryParam :: bool

htmlAttributes :: object

onMounted :: func

attributeConfig :: object

Picture Props

className :: string

onMounted :: func

htmlAttributes :: object

Background Props

src :: string, required

imgixParams :: object

className :: string

disableLibraryParam :: bool

htmlAttributes :: object

Global Configuration

Warnings

GitHub

Attaching ref to `<img />`, etc.