npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

imgtaggen

v1.6.10

Published

A CLI tool for generating a responsive image tag with support for AVIF and WebP formats

Downloads

30

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

shinichiokadashinichiokada

Keywords

nodeimage-tag-generatorimage

Readme

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

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