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.
// Input
<img src="/images/catalogImage.jpg" alt="<?php echo 'Image'; ?>">
// Output
<picture>
<source srcset="/images/catalogImage.avif" type="image/avif">
<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>
-
.jpg
,.jpeg
,.jfif
,.pjpeg
,.pjp
-
.png
,.apng
.gif
.svg
.webp
.bmp
-
.ico
,.cur
-
.tif
,.tiff
.avif
npm i --save-dev gulp-avif-webp-retina-html
let avifWebpHtml = require('gulp-avif-webp-retina-html');
gulp.task('html',function(){
gulp.src('./assets/**/*.html')
.pipe(avifWebpHtml())
.pipe(gulp.dest('./public/'))
});
// OR
gulp.task('html',function(){
gulp.src('./assets/**/*.html')
.pipe(avifWebpHtml({
extensions: ['jpg', 'jpeg', 'png', 'gif'],
retina: {
1: '',
2: '@2x',
3: '@3x',
4: '@4x'
},
checkExists: true,
noAvif: false,
noWebp: false,
publicPath: '.'
}))
.pipe(gulp.dest('./public/'))
});
Type: string[]
Default: ['jpg', 'jpeg', 'png', 'gif']
Pass an array of extensions to specify files to process.
Type: object
Default: {}
Pass an object with name patterns for retina images. For example, {1: '', 2: '@2x'}.
Type: boolean
Default: false
If true, only files that exist in the directory, specified by the src
attribute, will be added to the <picture>
tag.
Type: string
Default: .
Public path where to check for image files specified in src
attribute.
Type: boolean
Default: false
If true, disables generate <source>
tag with avif images.
Type: boolean
Default: false
If true, disables generate <source>
tag with webp images.
Type: boolean
Default: false
If true, adds a <noscript>
tag with a fallback image inside if using lazy loading of images with disabled JavaScript.
Doesn't modify <img>
elements which are already inside <picture>