Giter Club home page Giter Club logo

laravel-mix-image-minimizer's Introduction

Laravel Mix Image Minimizer

Latest Version on NPM npm Software License

This extension adds support for image-minimizer-webpack-plugin to Laravel Mix.

Installation

Install the extension and the implementation of your choice. It's recommended to use squoosh since imagemin is not maintained anymore.

# 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:

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<Object> [{ 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

laravel-mix-image-minimizer's People

Contributors

chiiya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

laravel-mix-image-minimizer's Issues

Warning in "imageminMinify" when minifying jpeg file

Hi,

When I'm running mix production I'm getting the following warning:

WARNING in "imageminMinify" function do not support generate to "jpg" from "dist/images/web/Home_header.jpeg". Please use "imageminGenerate" function.

This is my implementation of the plugin:

mix.images( {
    webp: true,
    implementation: 'imagemin',
    patterns: [
        { from: "**/*", to: "dist/images", context: "assets/images" }
    ]
} )

Do you have a clue how this warning can be solved (apart from changing the original file to jpg :))?

minify svg with squoosh?

Hi is it possible to minify (clean, remove comments etc) SVGs with squoosh or will I have to switch to the imagemin version?

alternatively do you have a suggestion for working with svg's separately to squoosh?

thanks

update..
I was hoping to do something like this but it doesn't work... the svg's don't get minified

 .images({
     // jpg, png etc
     implementation: 'squoosh',
     webp: true,
 },
 {
     // svg
     implementation: 'imagemin',
     options: {
         plugins: [
             [
                 "imagemin-svgo", 
                 {
                     plugins: ['preset-default']
                 }
             ]
         ]
     }
 })   

Append webp extension to original filename

Hi,

Thanks for creating this plugin! I've got an request to improve the handling of webp images. I'm using webp images in combination with a rewrite in htaccess. To make this work the webp extension needs to be appended to the original file name, including the original extension. Can you add an option for this?

I found this solution in another plugin: https://github.com/iampava/imagemin-webp-webpack-plugin#overrideextension, which might work great!

Thanks,
Jorn

How to use - Question about images optimisation

Hello there,

I have just discovered your repo, but I can make it work at 100% on my project. I think I miss something but I dont know what.

In my webpack.mix.js, I have:

// Laravel Mix
const mix = require('laravel-mix');

// https://www.npmjs.com/package/@chiiya/laravel-mix-image-minimizer
require('@chiiya/laravel-mix-image-minimizer');

// Options for Laravel Mix
// https://laravel-mix.com/docs/4.0/options
mix.options({
  postCss: [require('autoprefixer')],
  cssNano: {
    discardComments: {removeAll: true},
  }
}).setPublicPath('public');

mix.setResourceRoot('../..'); 

mix.images({
  implementation: 'squoosh',
  patterns: [{ from: "resources/assets/images", to: "assets/images" }],
  webp: true,
  webpOptions: { encodeOptions: { webp: { quality: 90 }}}
});

// ...

The images are copied from /resources/assets/images to /public/assets/images so no problem with this.
But, they have the same weight so I guess the images in /public/assets/images are not optimised/compressed after a npm run dev.

Any idea why?

Thank you for your help

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.