- Notifications
You must be signed in to change notification settings - Fork27
PostCSS plugin and tiny JS script (131 bytes) to use WebP in CSS background
License
ai/webp-in-css
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
PostCSS plugin and tiny JS script (175 bytes) to useWebP in CSSbackground.
This tool will make your images25% smaller for Chrome, Firefox, and Edge.Safari will download the bigger JPEG/PNG image.
You addrequire('webp-in-css/polyfill') to your JS bundle and write CSS like:
.logo {width:30px;height:30px;background:url(/logo.png);}
The script will setwebp orno-webp class on<body>and PostCSS plugin will generate:
.logo {width:30px;height:30px;background:url(/logo.webp) no-repeat;}body.webp .logo {background-image:url(/logo.webp);}body.no-webp .logo,body.no-js .logo {background-image:url(/logo.png);}
If you want to useaddNoJs option, you need manually setno-js class on<body>.Polyfill will remove this class, if JS is enabled in the browser. Polyfill shouldbe inserted in the<head>, withoutasync ordefer attributes, before css.addNoJs option is enabled by default.
Step 1: Install tool:
npm install --save-dev postcss webp-in-css
Step 2: convert all your JPEG/PNG images to WebP bySquoosh.Set checkbox onLossless for PNG images and remove it for JPEG.
We recommendReduce palette for most of the PNG images.
Save WebP images in the same places of JPEG/PNG images:img/bg.png →img/bg.webp.
Step 3: use<picture> to insert WebP images in HTML:
- <img src="/screenshot.jpg" alt="Screenshot">+ <picture>+ <source srcset="/screenshot.webp" type="image/webp">+ <img src="/screenshot.jpg" alt="Screenshot">+ </picture>
Step 4: add JS script to your client-side JS bundle:
+ import 'webp-in-css/polyfill'Since JS script is very small (142 bytes), the best way for landingsis to inline it to HTML:
</head> <body>+ <script><%= readFile('node_modules/webp-in-css/polyfill.js') %></script>Note, that you need to put<script> inside<body>, not<head>.
Step 5: check do you use PostCSS already in your bundler.You can checkpostcss.config.js in the project root,"postcss" section inpackage.json orpostcss in bundle config.
If you don’t have it already, add PostCSS to your bundle:
- For webpack seepostcss-loader docs.
- For Parcel create
postcss.config.jsfile.It already has PostCSS support. - For Gulp checkgulp-postcss docs.
Step 6: Addwebp-in-css/plugin to PostCSS plugins:
module.exports = { plugins: [+ require('webp-in-css/plugin'), require('autoprefixer') ]}If you use CSS Modules in webpack addmodules: true option:
module.exports = { plugins: [- require('webp-in-css/plugin'),+ require('webp-in-css/plugin')({ modules: true }), require('autoprefixer') ]}We also recommend to put all images from CSS to preload content:
+ <link rel="preload" as="image" type="image/webp" href="/logo.webp"> <script><%= readFile('node_modules/webp-in-css/polyfill.js') %></script> </head>module.exports={plugins:[require('webp-in-css/plugin')({/* options */}),]}
modulesboolean: wrap classes to:global()to support CSS Modules.falseby default.webpClassstring: class name for browser with WebP support.noWebpClassstring: class name for browser without WebP support.addNoJsboolean: addno-jsclass to selector.trueby default.noJsClassstring: class name for browser without JS support.checkfunction: should return boolean if we need to change declaration,default:decl=>/\.(jpe?g|png)(?!(\.webp|.*[&?]format=webp))/i.test(decl.value)
renamefunction: get a new file name from old name,like(oldName: string) => string,thenurl(./image.png)→url(./image.png.webp).Often you will need to changecheckoption too.check:decl=>/\.jpg/.test(decl.value)&&!decl.value.includes("as=webp"),rename:url=>url.replace(".jpg",".jpg?as=webp")
About
PostCSS plugin and tiny JS script (131 bytes) to use WebP in CSS background
