Laravel Elixir Images Extension

Usage no npm install needed!

<script type="module">
  import laravelElixirImages from '';


Laravel Elixir Images

This Laravel Elixir extension makes resizing and optimizing images a breeze. It depends on gulp-responsive, which depends on sharp. Please make sure sharp is installed before attempting to install this extension.


Use it like this:

gulp images

The --production flag will engage image optimization in addition to resizing. Works with gulp watch, too.


First, pull in the extension through NPM.

npm install --save laravel-elixir-images

Next, add it to your Elixir-enhanced Gulpfile, like so:

var elixir = require('laravel-elixir');


elixir(function(mix) {

That's it! You're all set to go!


Assuming you write...

elixir(function(mix) {

...this will compile images in resources/assets/images to public/img.

If you'd like to set a different output directory, you may pass a second argument to the images() method, like so:

mix.images(null, 'public/images')

Finally, if you want to override the images plugin options, you may pass an object as the third argument.

mix.images(null, null, {});

// See options at:


You can specify different size settings like so:

mix.images('image.jpg', null, {
    sizes: [[], [1920], [1280, 720], [640, 480, 'west']]

The above code will generate four sizes of the original image.jpg:

  1. image.jpg, optimized-only
  2. image-1920.jpg, optimized and resized to 1920w
  3. image-1280x720.jpg, optimized, resized, and cropped to 1280x720
  4. image-640x480.jpg, optimized, resized, and cropped to 640x480, with a western crop gravity


You can use different optimizers instead of the default (lossless) ones:

mix.images('image.jpg', null, {
    optimizers: {
        jpg: require('imagemin-jpegoptim')

It's probably recommended that you use lossy optimizers; lossless ones are included for the sake of the POLA. Find more optimizers here.


You can change the options of the various image optimizers like so:

mix.images('image.jpg', null, {
    extensions: {
        jpg: {
            progressive: true,
            max: 50


You can turn off WebP output with the following option:

mix.images(null, null, {
    webp: false