-
-
Save theStrangeAdventurer/466ee3feea0b2852c39ec63c763992c7 to your computer and use it in GitHub Desktop.
Recursive images optimization with multiple formats (JPG and WEBP) and multiple resolutions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gulp = require('gulp'); | |
var responsive = require('gulp-responsive'); | |
var gulp = require('gulp'); | |
var $ = require('gulp-load-plugins')(); | |
gulp.task('images', function () { | |
return gulp.src('src/images/**/*') | |
.pipe($.responsive({ | |
'**/*.{jpg,jpeg,png}': [ | |
{ | |
width: 150, | |
rename: { | |
suffix: '-150px', | |
extname: '.jpeg', | |
}, | |
format: 'jpeg', | |
}, | |
{ | |
width: 300, | |
rename: { | |
suffix: '-300px', | |
extname: '.jpeg', | |
}, | |
format: 'jpeg', | |
}, | |
{ | |
width: 600, | |
rename: { | |
suffix: '-600px', | |
extname: '.jpeg', | |
}, | |
format: 'jpeg', | |
}, | |
{ | |
width: 800, | |
rename: { | |
suffix: '-800px', | |
extname: '.jpeg', | |
}, | |
format: 'jpeg', | |
}, | |
{ | |
width: 1000, | |
rename: { | |
suffix: '', | |
extname: '.jpeg', | |
}, | |
format: 'jpeg', | |
}, | |
{ | |
width: 600, | |
rename: { | |
suffix: '-600px', | |
extname: '.webp', | |
}, | |
format: 'webp', | |
}, | |
{ | |
width: 800, | |
rename: { | |
suffix: '-800px', | |
extname: '.webp', | |
}, | |
format: 'webp', | |
}, | |
], | |
}, { | |
// Global configuration for all images | |
// The output quality for JPEG, WebP and TIFF output formats | |
quality: 80, | |
// Use progressive (interlace) scan for JPEG and PNG output | |
progressive: true, | |
// Strip all metadata | |
withMetadata: false, | |
// Do not emit the error when image is enlarged. | |
errorOnEnlargement: false, | |
})) | |
.pipe(gulp.dest('dist/images')); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment