Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chiiya/laravel-mix-image-minimizer
Image minification for Laravel Mix
https://github.com/chiiya/laravel-mix-image-minimizer
imagemin images laravel-mix squoosh
Last synced: 14 days ago
JSON representation
Image minification for Laravel Mix
- Host: GitHub
- URL: https://github.com/chiiya/laravel-mix-image-minimizer
- Owner: chiiya
- License: mit
- Created: 2022-03-25T17:05:59.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-07-21T21:48:32.000Z (over 2 years ago)
- Last Synced: 2024-10-13T17:03:33.560Z (24 days ago)
- Topics: imagemin, images, laravel-mix, squoosh
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Laravel Mix Image Minimizer
[![Latest Version on NPM](https://img.shields.io/npm/v/@chiiya/laravel-mix-image-minimizer.svg?style=flat-square)](https://npmjs.com/package/@chiiya/laravel-mix-image-minimizer)
[![npm](https://img.shields.io/npm/dt/@chiiya/laravel-mix-image-minimizer.svg?style=flat-square)](https://www.npmjs.com/package/@chiiya/laravel-mix-image-minimizer)
[![Software License](https://img.shields.io/npm/l/@chiiya/laravel-mix-image-minimizer.svg?style=flat-square)](LICENSE)This extension adds support for [image-minimizer-webpack-plugin](https://webpack.js.org/plugins/image-minimizer-webpack-plugin/)
to [Laravel Mix](https://github.com/JeffreyWay/laravel-mix).## Installation
Install the extension and the [implementation of your choice](https://webpack.js.org/plugins/image-minimizer-webpack-plugin/).
It's recommended to use `squoosh` since imagemin [is not maintained anymore](https://github.com/imagemin/imagemin/issues/385).```bash
# Using squoosh
npm i -D @chiiya/laravel-mix-image-minimizer @squoosh/lib
# Using imagemin
npm i -D @chiiya/laravel-mix-image-minimizer imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin-webp
```## Usage
Require the extension inside your `webpack.mix.js` and use it like so:
```js
const mix = require('laravel-mix');
require('@chiiya/laravel-mix-image-minimizer');mix.images({
webp: true,
});
```## Options
| Name | Type | Default | Description |
|------------------|-----------------|------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------|
| `implementation` | `string` | `squoosh` | `squoosh` or `imagemin`, see `image-minimizer-webpack-plugin` docs |
| `patterns` | `Array` | `[{ from: "**/*", to: "images", context: "resources/images" }]` | `pattern` option as supported by the `copy-webpack-plugin` |
| `webp` | `Boolean` | `false` | If enabled, additional `webp` versions of all images will be generated |
| `options` | `Object` | `undefined` for `squoosh`, `{ plugins: ["imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo"] }` for `imagemin` | Custom configuration for `squoosh` or `imagemin` |
| `copyOptions` | `Object` | `{ patterns: options.patterns }` | Additional configuration for the `copy-webpack-plugin` |
| `webpOptions` | `Object` | `{ encodeOptions: { webp: { quality: 90 }}}` for `squoosh`, `{ plugins: ["imagemin-webp"] }` for `imagemin` | Custom `squoosh` or `imagemin` configuration for generating webp images |