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
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.
// 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>
// 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
npm i --save-dev gulp-xv-webp-html
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")
var webpHTML = require('gulp-xv-webp-html');
function html() {
return src('./source/*.html')
.pipe(webpHTML())
.pipe(gulp.dest('./destHTML/'))
});
exports.html = html;
var webpHTML = require('gulp-xv-webp-html');
gulp.task("webpHTML", function(){
return gulp.src(['./sourceHTML/**/*.html'])
.pipe(webpHTML())
.pipe(gulp.dest('./destHTML/'))})
var webpHTML = require('gulp-xv-webp-html');
gulp.task("webpHTML", function(){
return gulp.src(['./sourceHTML/**/*.html'])
.pipe(webpHTML(['.jpg', '.svg']))
.pipe(gulp.dest('./destHTML/'))})
Follow link for live view: View live 2D map
Hope you liked this project, don't forget to give it a star ⭐.
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
📺 Latest my YouTube Videos
- AirDrop Missing on macOS Sequoia? Easy Fix for Finder and AirDrop Issues!
- Review UGREEN HiTune H6 Pro Earbuds 2024 Best Black Friday Deal: Hi-Res Wireless Headphones ANC LDAC
- ⚒️ How to Fix Drawer Slides with Ball Bearings – Easy DIY Guide. Lifetime guarantee
- 🔥 Lifehack Of Open a Sealed Tube. Did You Know?
- 💰 UAH 10 coins 2024 Ukraine’s New Medical Forces Coin. What is the price of the coin?
Author Vitalii Tereshchuk. © 2021, MIT license. Or welcome to my YouTube channel