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

• Usage example
• Options
• Last changes
• Contacts

• 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>

Type: boolean
Default: false
Description: insert display: contents; as an inline style for <picture>. Official documentation

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.

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

Type:string
Default:data-ignore
Description: Ignores and not transform <img> with this attribute.

Type:boolean | "error" | "success"
Default:false
Description: 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.

Patch 3.2.0:

• Fix Config type issue.
• Add minification by Terser.
• Add warning if file's extension unsupported.
• Change Config.Quotes defining.
• Small optimizations.

Patch 3.1.0:

• Fix issues with default config values.
• Added ignore feature. Now able to ignore tags with special ignore attribute.
• Added Logger, outputs info about plugin's work (errors and statistics)

You can see full changelogs and source code at GitHub repository

If you notice any bug, or you want to suggest an idea, please contact me.

• Telegram: @Blatisgense (best way)
• Discord: blatisgense
• Email: lavr.marudenko@gmail.com