https://github.com/mttankkeo/image-encode-loader
This webpack loader that uses Sharp to encode images into web-friendly formats like WebP and AVIF without any external dependencies.
https://github.com/mttankkeo/image-encode-loader
image-convert image-encode image-format sharp webpack webpack-loader
Last synced: about 2 months ago
JSON representation
This webpack loader that uses Sharp to encode images into web-friendly formats like WebP and AVIF without any external dependencies.
- Host: GitHub
- URL: https://github.com/mttankkeo/image-encode-loader
- Owner: MTtankkeo
- License: mit
- Created: 2024-09-03T00:24:17.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-05T21:50:26.000Z (9 months ago)
- Last Synced: 2025-03-13T20:18:10.224Z (3 months ago)
- Topics: image-convert, image-encode, image-format, sharp, webpack, webpack-loader
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/image-encode-loader
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Image Encode Webpack Loader
Version
v1.0.0-beta3
# Introduction
This webpack loader that uses [Sharp](https://sharp.pixelplumbing.com/) to encode images into web-friendly formats like WebP and AVIF without any external dependencies.
> See Also, If you want the change-log by version for this package. refer to [Change Log](CHANGELOG.md) for details.
> __Commonly supported formats__:
> webp, avif, tiff, heif, jpeg, png, gif
## Install by NPM
To install this package in your project, enter the following command.
> When you want to update this package, enter `npm update image-encode-loader --save` in the terminal to run it.
```
npm install image-encode-loader --save-dev
```
## How to apply this loader?
This example is based on Webpack 5. Additionally, this loader provides separate image output functionality.
```cjs
module.exports = {
module: {
rules: [
// To export the image assets files from `src/` to `dist/`.
// And by default, extensions are typical extensions supported by Chrome.
{
test: /\.(png|jpe?g|webp|avif|hei[cf]|gif|tiff)$/i,
use: [{
loader: "image-encode-loader",
options: {
// This format has the best compression rate at the moment.
format: "avif",
generator: {
filename: "images/[name].[ext]"
}
}
}],
}
]
},
}
```
## Usage
To get the final compiled path of an image in JS/JSX, the image should be imported as a module.
```jsx
import imagePath from "../asset/images/example.png";
function Example() {
return 
}
```