gulp_img_transform_to_picture

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

• Usage example
• Options
• Last changes
• Contacts

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 <picture>. 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.

Last changes

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

Contacts:

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

• Telegram: @Blatisgense (best way)
• Discord: blatisgense
• Email: [email protected]