lient has a bunch of static landing pages that are mobile-friendly and need to remain that way.
But what is to be done about srcset? Read on, oh reader, for the solution.
First, I created a gulp build task which makes a bunch of different sizes.
Install dependencies like this:
npm install -D gulp-load-plugins gulp-responsive sharp
The task looks like this:
var $ = require(‘gulp-load-plugins’)(); // used to load gulp-srcset
var themeRoot = ‘../docroot/sites/all/themes/mytheme’;
var imageInputDir = themeRoot + ‘/images-uncompressed’;
var imageOutputDir = themeRoot + ‘/images/srcset’;
gulp.task(‘images’, function() {
gulp.src(imageInputDir + ‘/*’)
.pipe($.responsive({
‘*’: [{
width: 100,
rename: { suffix: ‘-100w’ },
},
{
width: 150,
rename: { suffix: ‘-150w’ },
}, {
width: 200,
rename: { suffix: ‘-200w’ },
}, {
width: 250,
rename: { suffix: ‘-250w’ },
}, {
width: 320,
rename: { suffix: ‘-320w’ },
}, {
width: 400,
rename: { suffix: ‘-400w’ },
}, {
width: 500,
rename: { suffix: ‘-500w’ },
}, {
width: 675,
rename: { suffix: ‘-675w’ },
}, {
width: 850,
rename: { suffix: ‘-850w’ },
}, {
width: 1000,
rename: { suffix: ‘-1000w’ },
}, {
width: 1200,
rename: { suffix: ‘-1200w’ },
}, {
width: 1400,
rename: { suffix: ‘-1400w’ },
}, {
width: 1600,
rename: { suffix: ‘-1600w’ },
}, {
width: 1800,
rename: { suffix: ‘-1800w’ },
}, {
width: 2000,
rename: { suffix: ‘-2000w’ },
}, {
width: 2200,
rename: { suffix: ‘-2200w’ },
}, {
width: 2400,
rename: { suffix: ‘-2400w’ },
}, {
// Compress, strip metadata, and rename original image
rename: { suffix: ‘-original’ },
}],
}, {
// Global configuration for all images
// The output quality for JPEG, WebP and TIFF output formats
quality: 70,
// Use progressive (interlace) scan for JPEG and PNG output
progressive: true,
// Zlib compression level of PNG output format
compressionLevel: 6,
// Strip all metadata
withMetadata: false,
errorOnEnlargement: false,
}))
.pipe(gulp.dest(imageOutputDir));
});
This task is invoked like so: gulp images. It takes the source images, and creates a bunch of output images sized and upscaled where appropriate.
Once you have that, you can use the following srcset syntax from my other blog post, part 2.
References: