{"id":15643070,"url":"https://github.com/cyrilwanner/react-optimized-image","last_synced_at":"2025-04-13T00:52:14.360Z","repository":{"id":42735149,"uuid":"271640018","full_name":"cyrilwanner/react-optimized-image","owner":"cyrilwanner","description":"Easy to use React components for optimized-images-loader / next-optimized-images.","archived":false,"fork":false,"pushed_at":"2022-12-11T15:32:09.000Z","size":422,"stargazers_count":62,"open_issues_count":28,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T18:52:25.224Z","etag":null,"topics":["image","optimization","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cyrilwanner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-11T20:24:16.000Z","updated_at":"2024-09-11T18:03:02.000Z","dependencies_parsed_at":"2023-01-27T02:00:34.139Z","dependency_job_id":null,"html_url":"https://github.com/cyrilwanner/react-optimized-image","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Freact-optimized-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Freact-optimized-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Freact-optimized-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Freact-optimized-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyrilwanner","download_url":"https://codeload.github.com/cyrilwanner/react-optimized-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650435,"owners_count":21139672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","optimization","react"],"created_at":"2024-10-03T11:58:48.116Z","updated_at":"2025-04-13T00:52:14.334Z","avatar_url":"https://github.com/cyrilwanner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-optimized-image [![npm version](https://badgen.net/npm/v/react-optimized-image)](https://www.npmjs.com/package/react-optimized-image) [![license](https://badgen.net/github/license/cyrilwanner/react-optimized-image)](https://github.com/cyrilwanner/react-optimized-image/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/react-optimized-image)](https://www.npmjs.com/package/react-optimized-image)\n\nFeatures:\n- **Optimize** images using WebAssembly (runs in every environment)\n- **React components** for different use-cases (responsive images, WebP conversion, lazy loading placeholders, image manipulation, ...)\n- **Build cache for images** for faster builds\n- **Convert to WebP** automatically during a webpack build\n- **Inline** small images automatically\n- ...\n\n## Table of contents\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Image components](#image-components)\n- [Global image config](#global-image-config)\n- [License](#license)\n\n## Requirements\n\nThis image components requires [optimized-images-loader](https://github.com/cyrilwanner/optimized-images-loader) to already be installed and configured.\n\nIf you are using Next.js, you can use the [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) plugin instead for easier configuration.\n\n## Installation\n\n```\nnpm install react-optimized-image\n```\n\nAdd the `react-optimized-image/plugin` babel plugin to your `.babelrc` file.\nIf you don't yet have a `.babelrc` file, create one with the following content:\n\n```json\n{\n  \"plugins\": [\"react-optimized-image/plugin\"]\n}\n```\n\n## Usage\n\nYou can now import or require your images directly in your react components:\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport Header from './images/header.jpg';\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    {/* with import statement ..*/}\n    \u003cImg src={Header} /\u003e\n\n    {/* ..or an inline require */}\n    \u003cImg src={require('./images/my-small-image.png')} /\u003e\n  \u003c/div\u003e\n);\n\n/**\n * Results in:\n *\n * \u003cdiv\u003e\n *   \u003cimg src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" /\u003e\n *   \u003cimg src=\"data:image/png;base64,...\" /\u003e\n * \u003c/div\u003e\n */\n```\n\n### Image components\n\nFor easier use and full typescript support, this plugin provides some image components.\n\n* [`Img`](#img)\n* [`Svg`](#svg)\n\n#### Img\n\nThe `Img` component can be used to include a normal image. Additionally, it can create a WebP fallback and provide different sizes for different viewports.\n\n##### Usage\n\n```javascript\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003ch1\u003eNormal optimized image\u003c/h1\u003e\n    \u003cImg src={MyImage} /\u003e\n\n    \u003ch1\u003eImage will be resized to 400px width\u003c/h1\u003e\n    \u003cImg src={MyImage} sizes={[400]} /\u003e\n\n    \u003ch1\u003eA WebP image will be served in two sizes: 400px and 800px\u003c/h1\u003e\n    \u003ch2\u003eAs a fallback, a jpeg image will be provided (also in both sizes)\u003c/h2\u003e\n    \u003cImg src={MyImage} webp sizes={[400, 800]} /\u003e\n  \u003c/\u003e\n);\n\n/**\n * Results in:\n *\n * \u003ch1\u003eNormal optimized image\u003c/h1\u003e\n * \u003cimg src=\"/_next/static/chunks/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg\" /\u003e\n *\n * \u003ch1\u003eImage will be resized to 400px width\u003c/h1\u003e\n * \u003cimg src=\"/_next/static/chunks/images/my-image-572812a2b04ed76f93f05bf57563c35d.jpg\" /\u003e\n *\n * \u003ch1\u003eA WebP image will be served in two sizes: 400px and 800px\u003c/h1\u003e\n * \u003ch2\u003eAs a fallback, a jpeg image will be provided (also in both sizes)\u003c/h2\u003e\n * \u003cpicture\u003e\n *  \u003csource type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-0cc3dc9faff2e36867d4db3de15a7b32.webp\" media=\"(max-width: 400px)\"\u003e\n *  \u003csource type=\"image/webp\" srcset=\"/_next/static/chunks/images/image-08ce4cc7914a4d75ca48e9ba0d5c65da.webp\" media=\"(min-width: 401px)\"\u003e\n *  \u003csource type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-132d7f8860bcb758e97e54686fa0e240.jpg\" media=\"(max-width: 400px)\"\u003e\n *  \u003csource type=\"image/jpeg\" srcset=\"/_next/static/chunks/images/image-9df4a476716a33461114a459e64301df.jpg\" media=\"(min-width: 401px)\"\u003e\n *  \u003cimg src=\"/_next/static/chunks/images/image-0f5726efb3915365a877921f93f004cd.jpg\"\u003e\u003c/picture\u003e\n * \u003c/picture\u003e\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| webp | | `boolean` | If true, the image will get converted to WebP. For browsers which don't support WebP, an image in the original format will be served. |\n| sizes | | `number[]` | Resize the image to the given width. If only one size is present, an `\u003cimg\u003e` tag will get generated, otherwise a `\u003cpicture\u003e` tag for multiple sizes. |\n| densities | | `number[]` | **Default:** `[1]`\u003cbr\u003eSpecifies the supported pixel densities. For example, to generate images for retina displays, set this value to `[1, 2]`. |\n| breakpoints | | `number[]` | Specifies the breakpoints used to decide which image size to use (when the `size` property is present). If no breakpoints are specified, they will automatically be set to match the image sizes which is good for full-width images but result in too big images in other cases.\u003cbr\u003eThe breakpoints should have the same order as the image sizes.\u003cbr\u003eExample for this query: ```sizes={[400, 800, 1200]} breakpoints={[600, 1000]}```\u003cbr\u003eFor widths 0px-600px the 400px image will be used, for 601px-1000px the 800px image will be used and for everything larger than 1001px, the 1200px image will be used. |\n| inline | | `boolean` | If true, the image will get forced to an inline data-uri (e.g. `data:image/png;base64,...`). |\n| url | | `boolean` | If true, the image will get forced to be referenced with an url, even if it is a small image and would get inlined by default. |\n| original | | `boolean` | If true, the image will not get optimized (but still resized if the `sizes` property is present). |\n| type | | `string` | So you don't have to repeat yourself by setting the same sizes or other properties on many images, specify the image type which equals to one in your [global image config](#global-image-config). |\n| *anything else* | | `ImgHTMLAttributes` | All other properties will be directly passed to the `\u003cimg\u003e` tag. So it would for example be possible to use native lazy-loading with `loading=\"lazy\"`. |\n\n#### Svg\n\nThe `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`](#img) component which will reference it by the URL.\n\n##### Usage\n\n```javascript\nimport { Svg } from 'react-optimized-image';\nimport Icon from './icons/my-icon.svg';\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003ch1\u003eSVG will be directly included in the HTML\u003c/h1\u003e\n    \u003cSvg src={Icon} className=\"fill-red\" /\u003e\n  \u003c/\u003e\n);\n\n/**\n * Results in:\n *\n * \u003cspan\u003e\u003csvg class=\"fill-red\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"280\" height=\"330\"\u003e\u003cg\u003e\u003cpath\u003e...\u003c/path\u003e\u003c/g\u003e\u003c/svg\u003e\u003c/span\u003e\n */\n```\n\n##### Properties\n\n| Prop | Required | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| src | **yes** | `string` | Source image. |\n| className | | `string` | Class to apply to the `\u003csvg\u003e` tag. |\n\n## Global image config\n\nThe `images.config.js` file contains default image optimization options and is located in the **root** of your project.\n\nAvailable options:\n| Option | Type | Description |\n| :--- | :------: | :---------- |\n| default | `ImgProps` | Properties specified within the `default` key will get applied to **all** usages of the [`Img`](#img) components.\u003cbr\u003eAll properties of the [`Img`](#img) component can be set. For example, to convert **all** your images to WebP, set `{ webp: true }`. |\n| types | `Record\u003cstring, ImgProps\u003e` | 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`](#img) component. The options specified in the `default` key will also get applied here if they are not overwritten. |\n\n#### Example\n\n```javascript\n// images.config.js\n\nmodule.exports = {\n  default: {\n    webp: true,\n  },\n  types: {\n    thumbnail: {\n      sizes: [200, 400],\n      breakpoints: [800],\n      webp: false,\n    },\n  },\n};\n```\n\nThis 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.\n\n```javascript\nimport React from 'react';\nimport Img from 'react-optimized-image';\nimport MyImage from './images/my-image.jpg';\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    {/* This will get converted into a WebP image (while still providing a fallback image). */}\n    \u003cImg src={MyImage} /\u003e\n\n    {/* This will be provided in to sizes (200, 400) but not get converted to WebP. */}\n    \u003cImg src={MyImage} type=\"thumbnail\" /\u003e\n  \u003c/div\u003e\n);\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/react-optimized-image/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrilwanner%2Freact-optimized-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyrilwanner%2Freact-optimized-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrilwanner%2Freact-optimized-image/lists"}