Create responsive images with gulp-sharp-responsive

Hello everyone, and welcome to this tutorial. Today I would like to introduce a new plugin for Gulp that I created to optimize images for our web browser users.

Introducting gulp-sharp-responsive

gulp-sharp-responsive is based on the Sharp NPM package, a fast image processing library, and aims to simplify this tedious task. Making images responsive and declined for differents format becomes simple because we only have to configure it and the rest is done automatically for us.

Context

For this tutorial, let's imagine we have the following folder:

.
├── src/
│   └── img/
│       └── lion.jpg
├── .gitignore
├── gulpfile.js
└── package.json

Let's say We want to output our lion.jpg image into the folder dist/img. We also would like to have images in differents sizes:

• 640 (mobile)
• 768 (tablet)
• 1024 (desktop)

And differents formats:

• jpeg
• webp
• avif

Using gulp-sharp-responsive

To this purpose, here is how you can use this library.

Installation

First, let's install Gulp and this plugin:

npm install --save-dev gulp gulp-sharp-responsive

Usage

Next, head on your gulpfile.js file and append this code:

// gulpfile.js
const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");

Then, let's write our "img" task:

// gulpfile.js
const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");

const img = () => src("src/img/*.jpg")
  .pipe(sharpResponsive({
    formats: [
      // jpeg
      { width: 640, format: "jpeg", rename: { suffix: "-sm" } },
      { width: 768, format: "jpeg", rename: { suffix: "-md" } },
      { width: 1024, format: "jpeg", rename: { suffix: "-lg" } },
      // webp
      { width: 640, format: "webp", rename: { suffix: "-sm" } },
      { width: 768, format: "webp", rename: { suffix: "-md" } },
      { width: 1024, format: "webp", rename: { suffix: "-lg" } },
      // avif
      { width: 640, format: "avif", rename: { suffix: "-sm" } },
      { width: 768, format: "avif", rename: { suffix: "-md" } },
      { width: 1024, format: "avif", rename: { suffix: "-lg" } },
    ]
  }))
  .pipe(dest("dist/img"));

Finally, let's expose this task so that we can use it through npm run img

// gulpfile.js
const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");

const img = () => src("src/img/*.jpg")
  .pipe(sharpResponsive({
    formats: [
      // jpeg
      { width: 640, format: "jpeg", rename: { suffix: "-sm" } },
      { width: 768, format: "jpeg", rename: { suffix: "-md" } },
      { width: 1024, format: "jpeg", rename: { suffix: "-lg" } },
      // webp
      { width: 640, format: "webp", rename: { suffix: "-sm" } },
      { width: 768, format: "webp", rename: { suffix: "-md" } },
      { width: 1024, format: "webp", rename: { suffix: "-lg" } },
      // avif
      { width: 640, format: "avif", rename: { suffix: "-sm" } },
      { width: 768, format: "avif", rename: { suffix: "-md" } },
      { width: 1024, format: "avif", rename: { suffix: "-lg" } },
    ]
  }))
  .pipe(dest("dist/img"));

module.exports = {
  img,
};

// package.json
{
  "scripts": {
    "img": "gulp img"
  }
}

Now, let's run this task once. In your terminal, run this command:

npm run img

You should see something printed in the console like this:

$ npm run img

> img     
> gulp img

[14:11:00] Using gulpfile /home/khalyomede/gulpfile.js
[14:11:01] Starting 'build'...
[14:11:01] Starting 'img'...
[14:11:02] Finished 'img' after 1.92 s
[14:11:02] Finished 'build' after 1.93 s

And if we inspect our folder tree this is what we should get now:

.
├── dist/
│   └── img/
│       ├── lions-lg.avif
│       ├── lions-lg.jpg
│       ├── lions-lg.webp
│       ├── lions-md.avif
│       ├── lions-md.jpg
│       ├── lions-md.webp
│       ├── lions-sm.avif
│       ├── lions-sm.jpg
│       └── lions-sm.webp
├── src/
│   └── img/
│       └── lion.jpg
├── .gitignore
├── gulpfile.js
└── package.json

Conclusion

Image responsiveness can be of a good use when you want to improve your web page speed using this HTML technique:

<picture>
  <!-- avif -->
  <source srcset="/img/lion-sm.avif" media="(max-width: 640px)" type="image/avif" />
  <source srcset="/img/lion-md.avif" media="(max-width: 768px)" type="image/avif" />
  <source srcset="/img/lion-lg.avif" media="(max-width: 1024px)" type="image/avif" />
  <!-- webp -->
  <source srcset="/img/lion-sm.webp" media="(max-width: 640px)" type="image/webp" />
  <source srcset="/img/lion-md.webp" media="(max-width: 768px)" type="image/webp" />
  <source srcset="/img/lion-lg.webp" media="(max-width: 1024px)" type="image/webp" />
  <!-- jpeg -->
  <source srcset="/img/lion-sm.jpeg" media="(max-width: 640px)" type="image/jpeg" />
  <source srcset="/img/lion-md.jpeg" media="(max-width: 768px)" type="image/jpeg" />
  <source srcset="/img/lion-lg.jpeg" media="(max-width: 1024px)" type="image/jpeg" />
  <!-- original -->
  <img src="/img/lion.jpeg" class="img-responsive" alt="A lion in the jungle." />
</picture>

This way, you are asking the browser:

• To load the most modern image first
• Load an image that fits the viewport width
• Fallback to the <img> if a browser doesn't support it

If you check the sizes of each files, we can see users will benefit from newest files format small sizes:

Image	Size	Weight
lion.jpg	Original	1 330 Ko
lions-lg.avif	1024px	52 Ko
lions-lg.jpg	1024px	141 Ko
lions-lg.webp	1024px	118 Ko
lions-md.avif	768px	30 Ko
lions-md.jpg	768px	81 Ko
lions-md.webp	768px	67 Ko
lions-sm.avif	640px	23 Ko
lions-sm.jpeg	640px	60 Ko
lions-sm.webp	640px	51 Ko

Learn more in this detail post:

Speed up your web page loading with WebP

Khalyomede ・ Feb 25 '19 ・ 3 min read

#webdev #html #image #performance

Thanks for reading this tutorial, I hope you enjoyed it as much as I enjoyed writting for Dev.to!

You can learn more about this library, like how to keep the original file in the output images and much more!

khalyomede / gulp-sharp-responsive

A gulp plugin to generate responsives images.

gulp-sharp-responsive

A gulp plugin to generate responsives images.

Summary

• About
• Features
• Installation
• Examples
• Options

About

I make web apps and I often need to generate images of multi formats and size from a single image. For example, an image "lion.jpeg", that is declined like this:

• lion-sm.jpeg
• lion-sm.webp
• lion-sm.avif
• lion-lg.jpeg
• lion-lg.webp
• lion-lg.avif

Sharp can do this, and since I use Gulp for my everyday tasks, I created a plugin to automatize this task.

Features

• Based on Sharp
• Takes options to generate images by sizes and format
• Supports theses formats
  • jpeg
  • png
  • gif
  • webp
  • avif
  • heif
  • tiff
• Can pass Sharp specific options to customize even more the image generation
• Written in TypeScript, so you get type hints for the options

Installation

In your terminal:

npm install --save-dev gulp-sharp-responsive

With Yarn:

yarn add --dev gulp-sharp-responsive

Examples

Sidenote: all the following example uses the TS version of gulpfile. This is why you will see…

View on GitHub

Happy optimizations!