gulp-avif-webp-retina-html

1.0.0 • Public • Published

gulp-avif-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.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>

Supported extensions

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

Install

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

Usage

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/'))
});

Options

extensions

Type: string[]
Default: ['jpg', 'jpeg', 'png', 'gif']

Pass an array of extensions to specify files to process.

retina

Type: object
Default: {}

Pass an object with name patterns for retina images. For example, {1: '', 2: '@2x'}.

checkExists

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.

publicPath

Type: string
Default: .

Public path where to check for image files specified in src attribute.

noAvif

Type: boolean
Default: false

If true, disables generate <source> tag with avif images.

noWebp

Type: boolean
Default: false

If true, disables generate <source> tag with webp images.

noscriptFallback

Type: boolean
Default: false

If true, adds a <noscript> tag with a fallback image inside if using lazy loading of images with disabled JavaScript.

Features

Doesn't modify <img> elements which are already inside <picture>

Package Sidebar

Install

npm i gulp-avif-webp-retina-html

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

13.1 kB

Total Files

4

Last publish

Collaborators

  • sergeitsaplii