More on SEO with Gulp and Images

#gulp #javascript #responsive #node

This is gonna expand on my last post about using Gulp for compressing css, javascript, and images by just diving into a little more depth about what we can do with images. Specifically, google page speed insights recommends that images be sized appropriately for serving. We can definitely resort to a Content Delivery Network (CDN) to serve and size our images appropriately, but we can also use some gulp plugins to do some of the things we want.

Responsive

If you'd followed along on the last post, then you'd have seen some basic image compression using Gulp with

gulp.task('imagemin', function() {
    return gulp.src(baseDir + '/assets/*')
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest(targetDir + 'public'))
})

This takes images found in a specific directory and pipes them through the gulp-imagemin package, with some options, and saves them into a new directory that the site can then serve.

If we want to properly serve the images in the correct resolution, then we need to properly crop them to work on the different viewports. Luckily, for us, there is gulp-responsive that can make several different cropped versions of our files so that we can serve them.

You first install gulp-responsive

npm i gulp-responsive --save-dev

Then we create a task

var responsive = require('gulp-responsive')

gulp.task('image-responsive', function() {
    return gulp.src(targetDir + 'public/*')
    .pipe(responsive({
        '*.png': [
            {
                width: 200,
                rename: { suffix: '-200px' }
            },
            {
                width: 500,
                rename: { suffix: '-500px' }
            },
            {
                width: 800,
                rename: { suffix: '-800px' }
            }
        ]
    }))
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest(targetDir + "public"))
})

This is just going to source our images in the directory and create a 200px, 500px, and 800px version for us, then optimize and store them in our target directory.

The tricky thing, however, is that we need to use the srcset attribute or picture tag in our html so that the browser knows which image to use to display.

In mine, for example, I have:

 <picture>
          <source srcset="./public/perlin-200px.png" media="(max-width: 200px">
          <source srcset="./public/perlin-500px.png" media="(max-width: 500px">
          <source srcset="./public/perlin-800px.png" media="(max-width: 800px">
          <img class="img-loading" src="./public/perlin.png" alt="Flowing line art">
        </picture>

I took this from Mozilla's picture tag docs here. The media attributes are acting like media queries where that source, if true, will be loaded into the img tag. Thereby sourcing the correct image for the viewport width.