Gulp_img_transform_to_picture NPM

gulp_img_transform_to_picture

Replace the <img> to <picture> within HTML files, support Webp and Avif formats.

Usage example

Gulpfile:

import gulp from 'gulp';
import gulp_img_transform_to_picture from 'gulp_img_transform_to_picture';

const gulp_function = () => {
    return gulp.src("./src/**/*.html")
        .pipe(gulp_img_transform_to_picture(Config)) // recomend to use before minify
        .pipe(gulp.dest("./dest/"))
}

Input:

<img src="filename.jpg" ...any_attributes>
<img src="filename.jpg" ...any_attributes data-ignore>

Output:

<picture>
    <source srcset="filename.avif" type="image/avif">
    <source srcset="filename.webp" type="image/webp">
    <img src="filename.jpg" ...any_attributes>
</picture>
<img src="filename.jpg" ...any_attributes data-ignore>

Options

display_contents

Type: booleanDefault: falseDescription: insert display: contents; as an inline style for \. Official documentation

extensions

Type:

type Extension = "avif" | "webp" | boolean;
interface Extensions<T> {
    [key: string]: T; // any custom formats
    png?: T;
    jpg?: T;
    jpeg?: T;
}

Default:

{
    png: "webp";
    jpg: true;
    jpeg: true;
}

Description: Configure behavior for different extensions. false disable transformation, true insert <source> for both Webp and Avif, "avif" or "webp" only specified one.

quotes

Type:"single" | "double"Default:"double"Description: Quotes type within HTML tags.

ignore_attr

Type:stringDefault:data-ignoreDescription: Ignores and not transform <img> with this attribute.

logger

Type:boolean | "error" | "success"Default:falseDescription: Logger outputs info about plugin's work (errors and statistics). false disable Logger, true logs both Errors and Statistics, "error" of "stats" only specified one.