{"id":20572499,"url":"https://github.com/nucliweb/avif-in-css","last_synced_at":"2025-07-25T02:39:05.636Z","repository":{"id":46165492,"uuid":"319155634","full_name":"nucliweb/avif-in-css","owner":"nucliweb","description":"PostCSS plugin to use AVIF in CSS background","archived":false,"fork":false,"pushed_at":"2023-10-06T06:11:02.000Z","size":20,"stargazers_count":44,"open_issues_count":3,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-17T19:19:48.709Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/nucliweb.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-06T23:41:38.000Z","updated_at":"2024-10-01T01:17:33.000Z","dependencies_parsed_at":"2024-11-16T05:32:50.551Z","dependency_job_id":null,"html_url":"https://github.com/nucliweb/avif-in-css","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.08333333333333337,"last_synced_commit":"dffbf533291743e130d91222796f536ca5586d43"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nucliweb/avif-in-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Favif-in-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Favif-in-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Favif-in-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Favif-in-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nucliweb","download_url":"https://codeload.github.com/nucliweb/avif-in-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucliweb%2Favif-in-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266227045,"owners_count":23895746,"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":[],"created_at":"2024-11-16T05:20:52.140Z","updated_at":"2025-07-25T02:39:05.608Z","avatar_url":"https://github.com/nucliweb.png","language":"JavaScript","readme":"# AVIF in CSS\n\n\u003cimg src=\"https://github.com/nucliweb/avif-in-css/blob/main/assets/AV1.svg?raw=true\" align=\"right\"\n     alt=\"AVIF logo\" width=\"180\" height=\"100\"\u003e\n\n[PostCSS] plugin and a tiny JS script *(315B gzipped)* to use the [AVIF] image format for CSS background images.\n\nUse **AVIF** in [Supported Browsers](#supported-browsers) and fall back to the original image in other browsers.\n\nTake a look at the demo site [avif-in-css.netlify.app]\n\n## About AVIF\n\n\u003e AVIF offers significant compression gains vs. JPEG and WebP, with a recent Netflix study showing 50% savings vs. standard JPEG and \u003e 60% savings on 4:4:4 content\n\n## How works?\n\nYou add `require('avif-in-css')` to your JS bundle and write CSS like:\n\n```css\n.logo {\n  width: 80px;\n  height: 80px;\n  background-image: url(logo.jpg);\n}\n```\n\nThe script will set `avif` or `no-avif` class on `\u003cbody\u003e` and PostCSS plugin will generate:\n\n```css\n.logo {\n  width: 80px;\n  height: 80px;\n}\nbody.avif .logo {\n  background-image: url(logo.avif);\n}\nbody.no-avif .logo {\n  background-image: url(logo.jpg);\n}\n```\n\n## Usage\n### 1. Convert to AVIF\n\nConvert you images to AVIF format, you can use [Squoosh], [Avif.app], [Convertio.co], [avif.io] or any other tool. **Important**: This PostCSS plugin doesn't convert the images to AVIF format.\n\n### 2. Install `avif-in-css`\n\n```sh\nnpm install --save-dev avif-in-css\n```\n#### 2.1 Load the polyfill\n\nAdd the JS script to your client-side JS bundle:\n\n```diff js\n// CommonJS\n+ require('avif-in-css/polyfill.js')\n\n// ES6\n+ import 'avif-in-css/polyfill.js'\n```\n\nSince JS script is very small (315B gzipped), the best way for landings\nis to inline it to HTML:\n\n```diff html\n+   \u003cscript\u003e\u003c%= readFile('node_modules/AVIF-in-css') %\u003e\u003c/script\u003e\n  \u003c/head\u003e\n```\n\nYou can load the script via CDN:\n\n```diff html\n+   \u003cscript src=\"https://unpkg.com/avif-in-css/polyfill.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n```\n\n#### 2.2 Load the PostCSS plugin\n\nCheck do you use PostCSS already in your bundler. You can check `postcss.config.js` in the project root, `\"postcss\"` section in `package.json` or `postcss` in bundle config.\n\nIf you don’t have it already, add PostCSS to your bundle:\n\n* For webpack see [postcss-loader] docs.\n* For Parcel create `postcss.config.js` file.\n  It already has PostCSS support.\n#### Add `avif-in-css` to PostCSS plugins\n\n```diff js\nmodule.exports = {\n  plugins: [\n+   require('avif-in-css'),\n    require('autoprefixer')\n  ]\n}\n```\nIf you use CSS Modules in webpack add `modules: true` option:\n\n```diff js\nmodule.exports = {\n  plugins: [\n-   require(avif-in-css'),\n+   require(avif-in-css')({ modules: true }),\n    require('autoprefixer')\n  ]\n}\n```\n\n## PostCSS Options\n\n```js\nmodule.exports = {\n  plugins: [\n    require('avif-in-css')({ /* options */ }),\n  ]\n}\n```\n| Option | Description | Default Value | Type Value |\n| ------ | ----------- | ------------- | ---------- |\n| `modules` |  Wrap classes to `:global()` to support CSS Modules. | `false` | Boolean |\n| `avifClass` |  Class name for browser with AVIF support. | `avif` | String |\n| `noAvifClass` |  Class name for browser without AVIF support. | `no-avif` | String |\n| `rename` |  Get a new file name from old name, like `(oldName: string) =\u003e string`, then `url(./image.png)` → `url(./image.png.avif)`. | | Function |\n\n## Supported browsers\n\n* Chrome Desktop 85+\n* Firefox 63+ (with `media.av1.enabled` activated)\n* Firefox for Android 64+ (with `media.av1.enabled` and `media.av1.use-dav1d` activated)\n* Edge 18+ (with `AV1 Video Extension` installed)\n\n[PostCSS]: https://github.com/postcss/postcss\n[AVIF]: https://aomediacodec.github.io/av1-avif/\n[Squoosh]: https://squoosh.app/\n[Avif.app]: https://avif.app\n[Convertio.co]: https://convertio.co/avif-converter/\n[avif.io]: https://avif.io/\n[postcss-loader]: https://github.com/postcss/postcss-loader#usage\n[avif-in-css.netlify.app]: https://avif-in-css.netlify.app\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucliweb%2Favif-in-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnucliweb%2Favif-in-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucliweb%2Favif-in-css/lists"}