IMGTAGGEN

Image Tag Generator

A CLI tool for generating a responsive image tag with support for AVIF and WebP formats. It will also calculate image ratio.

It is recommended to use this script in conjunction with bimgc.

Installation

npm i -g imgtaggen
imgtaggen --version
cd path/to/your/project

Options

imgtaggen [args]

Options	Description	Default
--noavif	Do not generate an AVIF image tag	[boolean] [default: false]
--nowebp	Do not generate a WEBP image tag	[boolean] [default: false]
--noclipboard	Do not copy the image tag to the clipboard	[boolean] [default: false]
--version	Show version number
--help	Show help

Usages

Add an image path with imgtaggen command.

imgtaggen public/images/imgtaggen.png

This will copy the following to your clipboard.

<picture>
  <source
    type="image/avif"
    srcset="public/images/imgtaggen-100.avif?width=100 100w, public/images/imgtaggen-200.avif?width=200 200w, public/images/imgtaggen-400.avif?width=400 400w, public/images/imgtaggen-800.avif?width=800 800w" />
  <source
    type="image/webp"
    srcset="public/images/imgtaggen-100.webp?width=100 100w, public/images/imgtaggen-200.webp?width=200 200w, public/images/imgtaggen-400.webp?width=400 400w, public/images/imgtaggen-800.webp?width=800 800w" />
  <img
    src="public/images/imgtaggen.png"
    srcset="public/images/imgtaggen-100.png?width=100 100w, public/images/imgtaggen-200.png?width=200 200w, public/images/imgtaggen-400.png?width=400 400w, public/images/imgtaggen-800.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 1.791044776119403"
    loading="lazy"
    decoding="async"
    alt="My awesome image"
  />
</picture>

You just need to paster it and modify the alt text and sizes values to match your requirements.

Sizes

The default outputs are 100, 200, 400, and 800. To specify a different set of outputs, use the -s or --sizes option.

imgtaggen public/images/imgtaggen.png -s 100 200

Output:

<picture>
  <source
    type="image/avif"
    srcset="public/images/imgtaggen-100.avif?width=100 100w, public/images/imgtaggen-200.avif?width=200 200w" />
  <source
    type="image/webp"
    srcset="public/images/imgtaggen-100.webp?width=100 100w, public/images/imgtaggen-200.webp?width=200 200w" />
  <img
    src="public/images/imgtaggen.png"
    srcset="public/images/imgtaggen-100.png?width=100 100w, public/images/imgtaggen-200.png?width=200 200w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 1.791044776119403"
    loading="lazy"
    decoding="async"
    alt="My awesome image"
  />
</picture>

alt option

The default alt text is "My awesome image", and you can use the -a or --alt option to specify a different alt text.

imgtaggen public/images/imgtaggen.png -a 'My alt text'

Output:

<picture>
  <source
    type="image/avif"
    srcset="public/images/imgtaggen-100.avif?width=100 100w, public/images/imgtaggen-200.avif?width=200 200w, public/images/imgtaggen-400.avif?width=400 400w, public/images/imgtaggen-800.avif?width=800 800w" />
  <source
    type="image/webp"
    srcset="public/images/imgtaggen-100.webp?width=100 100w, public/images/imgtaggen-200.webp?width=200 200w, public/images/imgtaggen-400.webp?width=400 400w, public/images/imgtaggen-800.webp?width=800 800w" />
  <img
    src="public/images/imgtaggen.png"
    srcset="public/images/imgtaggen-100.png?width=100 100w, public/images/imgtaggen-200.png?width=200 200w, public/images/imgtaggen-400.png?width=400 400w, public/images/imgtaggen-800.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 1.791044776119403"
    loading="lazy"
    decoding="async"
    alt="My alt text"
  />
</picture>

No avif block

The option --noavif will not output avif block.

imgtaggen public/images/imgtaggen.png --noavif

Output:

<picture>
  <source
    type="image/webp"
    srcset="public/images/imgtaggen-100.webp?width=100 100w, public/images/imgtaggen-200.webp?width=200 200w, public/images/imgtaggen-400.webp?width=400 400w, public/images/imgtaggen-800.webp?width=800 800w" />
  <img
    src="public/images/imgtaggen.png"
    srcset="public/images/imgtaggen-100.png?width=100 100w, public/images/imgtaggen-200.png?width=200 200w, public/images/imgtaggen-400.png?width=400 400w, public/images/imgtaggen-800.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 1.791044776119403"
    loading="lazy"
    decoding="async"
    alt="My awesome image"
  />
</picture>

No webp block

The option --nowebp will not output avif block.

imgtaggen public/images/imgtaggen.png --nowebp

Output:

<picture>
  <source
    type="image/avif"
    srcset="public/images/imgtaggen-100.avif?width=100 100w, public/images/imgtaggen-200.avif?width=200 200w, public/images/imgtaggen-400.avif?width=400 400w, public/images/imgtaggen-800.avif?width=800 800w" />
  <img
    src="public/images/imgtaggen.png"
    srcset="public/images/imgtaggen-100.png?width=100 100w, public/images/imgtaggen-200.png?width=200 200w, public/images/imgtaggen-400.png?width=400 400w, public/images/imgtaggen-800.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 1.791044776119403"
    loading="lazy"
    decoding="async"
    alt="My awesome image"
  />
</picture>

No webp & no avif

imgtaggen public/images/imgtaggen.png --nowebp --noavif

Output:

<picture>
  <img
    src="public/images/imgtaggen.png"
    srcset="public/images/imgtaggen-100.png?width=100 100w, public/images/imgtaggen-200.png?width=200 200w, public/images/imgtaggen-400.png?width=400 400w, public/images/imgtaggen-800.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 1.791044776119403"
    loading="lazy"
    decoding="async"
    alt="My awesome image"
  />
</picture>

No clipboard

The option--noclipboard will display the output in the terminal instead of copying it to the clipboard.

imgtaggen public/images/imgtaggen.png --noclipboard

This command outputs the following on your terminal.

Generating image tag...
noavif: false
nowebp: false
noclipboard: true
sizes: [ 100, 200, 400, 800 ]
input file: public/images/imgtaggen.png
<picture>
  <source
    type="image/avif"
    srcset="public/images/imgtaggen-100.avif?width=100 100w, public/images/imgtaggen-200.avif?width=200 200w, public/images/imgtaggen-400.avif?width=400 400w, public/images/imgtaggen-800.avif?width=800 800w" />
  <source
    type="image/webp"
    srcset="public/images/imgtaggen-100.webp?width=100 100w, public/images/imgtaggen-200.webp?width=200 200w, public/images/imgtaggen-400.webp?width=400 400w, public/images/imgtaggen-800.webp?width=800 800w" />
  <img
    src="public/images/imgtaggen.png"
    srcset="public/images/imgtaggen-100.png?width=100 100w, public/images/imgtaggen-200.png?width=200 200w, public/images/imgtaggen-400.png?width=400 400w, public/images/imgtaggen-800.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 1.791044776119403"
    loading="lazy"
    decoding="async"
    alt="My awesome image"
  />
</picture>

Use this with bimgc

bimgc is a CLI tool for converting PNG and JPG images to AVIF and WebP format with various sizes and saves them in a specified output directory. The output images are named based on the input file and include information about their size and format.

Use bimgc in conjunction with imgtaggen.

Reference

• Read more about Optimal Images in HTML
• Find out more about Batch Image Converter: bimgc

PWA: Fast & Offline

The docs website can be downloaded and installed on your device for offline access as a Progressive Web App.

To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".