gulp-xv-webp-html.js

GULP extension for support WEBP images and replace original image tag in HTML

in other words: replace <img> to <picture> for supports webp

Support file extensions: .jpg, .png, .gif, .jpeg, .avif, .svg, .tiff

NPM package home page

This NodeJS package is a nice addition to my HTML-template with live update and support SCSS.

P.S.: I wrote this npm-package because others similar had errors and sometimes didn't work correctly with the input data.

Output Example

Example #1

// Input
<img class="lazyload" src="/images/Image.jpg" width="100" height="100">

// Output
<picture>
    <source srcset="/images/Image.webp" type="image/webp">
    <source srcset="/images/Image.jpg" type="image/jpeg">
    <img class="lazyload" src="images/Image.jpg" width="100" height="100">
</picture>

Example #2

// Input
<img src="/images/Image.svg" width="100" height="100">

// Output
<picture>
    <source srcset="images/Image.webp" type="image/webp">
    <source srcset="images/Image.svg" type="image/svg+xml">
    <img src="images/Image.svg" width="100" height="100">
</picture>

Also, more practical of use you can find in my other project Gulp-xv-HTML-Template

Install

npm i --save-dev gulp-xv-webp-html

Usage

Given a package.json file that has some dependencies within:

{
  "dependencies": {
    "plugin-error": "^1.0.0",
    "through2": "^4.0.2"
  }
}

Adding this into your Gulpfile.js:

const gulp = require('gulp')
const webpHTML = require("gulp-xv-webp-html")

Example #1

var webpHTML = require('gulp-xv-webp-html');

function html() {
    return  src('./source/*.html')
            .pipe(webpHTML())
            .pipe(gulp.dest('./destHTML/'))
});

exports.html = html;

Example #2

var webpHTML = require('gulp-xv-webp-html');

gulp.task("webpHTML", function(){
    return gulp.src(['./sourceHTML/**/*.html'])
           .pipe(webpHTML())
           .pipe(gulp.dest('./destHTML/'))})

Example #3

var webpHTML = require('gulp-xv-webp-html');

gulp.task("webpHTML", function(){
    return gulp.src(['./sourceHTML/**/*.html'])
           .pipe(webpHTML(['.jpg', '.svg']))
           .pipe(gulp.dest('./destHTML/'))})

Visualization of npm dependency

Follow link for live view: View live 2D map

Liked it?

Hope you liked this project, don't forget to give it a star ⭐.

Donation & Sponsors

I’ll continue to work and improve the script features regardless of the outcome of funding, because it's rewarding to see that people are using it and it does the job for them. Still I would appreciate your support in covering some of the expenses with the domain hosting and programming hours which are taken from my family time.

Donate any amount for my projects

Other

📺 Latest my YouTube Videos

•  Fix Mouse Toggle on Firestick | Fire TV Lite with macOS Apple
• iPhone iOS Photography Tips & Tricks | Photo Camera mode start to make video
• iOS Emoji Trick Super Function from Apple iOS
• 💡 Photoshop Open ARW. How to open ARW files in Adobe Photoshop 2023 or 2024
• Lifehacks. Detergent Bottle. Don't throw away your shampoo bottle #shorts #shortvideo

➡️ more videos...

License

Author Vitalii Tereshchuk. © 2021, MIT license. Or welcome to my YouTube channel