TristanMouchet / laravel-mix-simple-image-processing

A simple laravel mix plugin to copy/minify/resize images in your projects.

Laravel Mix - Simple Image Processing

A simple laravel mix plugin to copy/minify/resize images in your projects.

Installation & Usage

Installation of the npm package:

npm install --save-dev laravel-mix-simple-image-processing

Usage, in your webpack.mix.js:

let mix = require('laravel-mix')

require('laravel-mix-simple-image-processing')

mix.imgs({
    source: 'resources/images',
    destination: 'public/images',
    // ... other optional parameters
})

Executing the module (the following exemple is for a "development" environnement):

npm run dev

Note: when running npm run watch the module is only executed once at the beginning.

Options

Here is the list of available options when passing an object to the mix.imgs() method:

Option	Type	Default value	Description
disable	Boolean	false	Wether or not to disable the execution of the plugin, can be used to disable the execution on specific environnements.
source	String	'resources/images'	Path to the folder containing the images that will be used as input of the processing functions (images in sub-folders are also included).
destination	String	'public/images'	Path to the folder where the images will be saved (with source-like sub-folders).
processOriginalImage	Boolean	true	Wether or not to copy the original (full-sized) pictures in the destination folder. The full-sized pictures will be optimized in the destination folder. This option is useful if you only want to generate WebP files without copying the original files (by setting it to false).
webp	Boolean	false	Wether or not to generate WebP images. An image with the WebP format will be generated for each picture processed in the destination folder (including for all thumbnails if thumbnailsWebp is not specified).
thumbnailsSizes	Array[Int]	[]	A list of maximum-width (in pixel) thumbnail to generate. E.g. [300, 600] would generate 2 thumbnails for each image processed, one with a 300px width and one with a 600px width. The height of the images are calculated proportionally. The plugin will emit a warning for each value superior at the width of the source image.
thumbnailsSuffix	String	'@'	Suffix to be used for thumbnail names, the thumbnail names are based on the template {img-name}{suffix}{width}.{img-extension}, for example image.jpg could generate a thumbnail named [e-mail].
thumbnailsWebp	Boolean	false	Wether or not to generate thumbnails with a WebP extension. If not specified, will take the value of the webp parameter.
thumbnailsWebpOnly	Boolean	false	Wether or not to keep thumbnails with their original extensions (when thumbnailsWebp is true).
smallerThumbnailsOnly	Boolean	false	Whether or not to resize images to sizes below their native width.
imageminPngquantOptions	Object	{ quality: [0.3, 0.5] }	Options to pass to the imageminPngquant plugin.
imageminWebpOptions	Object	{ quality: 50 }	Options to pass to the imageminWebp plugin.

Exemples

Basic exemple (copy/optimize images from source to destination folder):

mix.imgs({
    source: 'resources/images/photos',
    destination: 'public/images/photos',
})

Process images in all environnements EXCEPT for 'production':

mix.imgs({
    disable: process.env.NODE_ENV === 'production',
    // ...
})

Generate thumbnails without the full-sized source images:

mix.imgs({
    source: 'resources/images/photos',
    destination: 'public/images/photos/thumbnails',
    processOriginalImage: false, // Do not copy the original (full-sized) images over.
    thumbnailsSizes: [300, 600], // Generate thumbnails with 300px and 600px width.
})

Only generate WebP files (without images with their original extensions):

mix.imgs({
    source: 'resources/images/photos',
    destination: 'public/images/photos',
    processOriginalImage: false, // Do not copy the original (full-sized) images over.
    webp: true,
})

Only generate thumbnails with WebP formats:

mix.imgs({
    source: 'resources/images/photos',
    destination: 'public/images/webp-thumbnails',
    processOriginalImage: false,
    thumbnailsSizes: [300, 600],
    thumbnailsWebp: true,
    thumbnailsWebpOnly: true,
})

Other

This plugin was originally inspired by the laravel-mix-image-resizer (which didn't seem to be maintained).