![imgix logo](https://assets.imgix.net/sdk-imgix-logo.svg) `react-imgix` provides custom components for integrating [imgix](https://www.imgix.com/) into React sites and generating images server-side. [![npm version](https://img.shields.io/npm/v/react-imgix.svg)](https://www.npmjs.com/package/react-imgix) [![Build Status](https://circleci.com/gh/imgix/react-imgix.svg?style=shield)](https://circleci.com/gh/imgix/react-imgix) [![Downloads](https://img.shields.io/npm/dm/react-imgix.svg)](https://www.npmjs.com/package/react-imgix) [![License](https://img.shields.io/npm/l/react-imgix)](https://github.com/imgix/react-imgix/blob/main/LICENSE) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors-) [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimgix%2Freact-imgix.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimgix%2Freact-imgix?ref=badge_shield) --- - [Overview / Resources](#overview--resources) - [Installation](#installation) - [Usage](#usage) * [Examples](#examples) + [Basic Use Case](#basic-use-case) + [Server-Side Rendering](#server-side-rendering) + [Flexible Image Rendering](#flexible-image-rendering) + [Fixed Image Rendering (i.e. non-flexible)](#fixed-image-rendering-ie-non-flexible) + [Background Mode](#background-mode) + [Picture Support](#picture-support) + [ImgixProvider Component](#imgixprovider-component) * [Advanced Examples](#advanced-examples) + [General Advanced Usage](#general-advanced-usage) + [Passing Custom HTML Attributes](#passing-custom-html-attributes) + [Lazy Loading](#lazy-loading) + [Low Quality Image Placeholder Technique (LQIP)](#low-quality-image-placeholder-technique-lqip) + [Attaching Ref to DOM Elements](#attaching-ref-to-dom-elements) * [Props](#props) + [Shared Props (Imgix, Source)](#shared-props-imgix-source) + [Picture Props](#picture-props) + [Background Props](#background-props) * [Global Configuration](#global-configuration) + [Warnings](#warnings) - [Upgrade Guides](#upgrade-guides) * [8.x to 9.0](#8x-to-90) * [7.x to 8.0](#7x-to-80) - [Browser Support](#browser-support) - [Contributors](#contributors) - [Meta](#meta) ## Overview / Resources **Before you get started with react-imgix**, it's _highly recommended_ that you read Eric Portis' [seminal article on `srcset` and `sizes`](https://ericportis.com/posts/2014/srcset-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 `

_{Frederick Fogerty} 💻 📖 🚧 💬	_sherwinski 💻 📖 🚧 💬	_{Jason Eberle} 💻 📖 🚧 💬	_{Paul Straw} 🚧	_{Kelly Sutton} 🚧	_{Richard Bliss} 💻 ⚠️	_{Eric Koslow} 💻 📖
_{Baldur Helgason} 💻	_{jonathan schatz} 💻	_Theo 💻	_{Tanner Stirrat} 💻 🐛	_{Nicholas Suski} 💻	_voiceup 💻	_{Craig Kochis} 💻
_{Dennis Schaaf} 💻	_{Andy Kent} 💻	_{Gabby Losch} 💻	_{Stephen Cook} 💻 🐛	_{Eugene Nagorny} 📖	_{Samuel Giles} 📖	_{Espen Hovlandsdal} 📖
_{Daniel Farrell} 📖	_{Luiz Fernando da Silva Cieslak} 📖	_{Nick Gottlieb} 📖	_{Pierre Grimaud} 📖	_{Luis H. Ball Jr.} 💻

Blog Title

Blog Title

react-imgix

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past