Skip to content

Instantly share code, notes, and snippets.

@theStrangeAdventurer
Created February 28, 2019 22:59
Show Gist options
  • Save theStrangeAdventurer/466ee3feea0b2852c39ec63c763992c7 to your computer and use it in GitHub Desktop.
Save theStrangeAdventurer/466ee3feea0b2852c39ec63c763992c7 to your computer and use it in GitHub Desktop.
Recursive images optimization with multiple formats (JPG and WEBP) and multiple resolutions
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