Replace the <img>
to <picture>
within HTML files, support Webp and Avif formats.
- 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