Gulp-webp-retina-html NPM

gulp-webp-retina-html

This is a modified version of the plugin gulp-webp-html and gulp-webp-html-nosvg. Here was added support for retina images and PHP templates.

Example

// Input
<img src="/images/catalogImage.jpg" alt="<?php echo 'Image'; ?>">

// Output
<picture>
    <source srcset="/images/catalogImage.webp" type="image/webp">
    <source srcset="/images/catalogImage.jpg 1x, /images/catalogImage@2x.jpg 2x" type="image/jpeg">
    <img src="/images/catalogImage.jpg" alt="<?php echo 'Image'; ?>">
</picture>

Supported extensions

.jpg, .jpeg, .jfif, .pjpeg, .pjp
.png, .apng
.gif
.svg
.webp
.bmp
.ico, .cur
.tif, .tiff
.avif

Install

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

Usage

let webpHtml = require('gulp-webp-retina-html');

gulp.task('html',function(){
    gulp.src('./assets/**/*.html')
        .pipe(webpHtml())
        .pipe(gulp.dest('./public/'))
});

// OR

gulp.task('html',function(){
    gulp.src('./assets/**/*.html')
        .pipe(webpHtml({
            extensions: ['jpg', 'jpeg', 'png', 'gif'],
            retina: {
                1: '',
                2: '@2x',
                3: '@3x',
                4: '@4x'
            },
            checkExists: true,
            noWebp: false,
            publicPath: '.'
        }))
        .pipe(gulp.dest('./public/'))
});