Git Product home page Git Product 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

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

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']
                 }
             ]
         ]
     }
 })   

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 :))?

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.