Client 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: