图片压缩工具-Optimizt

 

Optimizt是一款开源的命令行图片压缩工具,支持对 PNG, JPEG, GIF 和 SVG 等多种图片类型的压缩,并可将光栅图像转为 WebP 格式。遵守MIT开源协议。

使用命令:

    --avif — 转为成 AVIF 格式
    --webp — 转换 WebP 格式.
    -l, --lossless — 无损压缩.
    -v, --verbose — 显示额外信息
    -V, --version — 显示工具版本.
    -h, --help — 显示帮助.

https://github.com/funbox/optimizt

---------------------------------------------

Optimizt is a CLI tool that helps you prepare images during frontend development.

It can compress PNG, JPEG, GIF and SVG lossy and lossless and create AVIF and WebP versions for raster images.

Rationale

As frontend developers we have to care about pictures: compress PNG & JPEG, remove useless parts of SVG, create AVIF and WebP for modern browsers, etc. One day we got tired of using a bunch of apps for that, and created one tool that does everything we want.

Usage

Install the tool:

npm i -g @funboxteam/optimizt

Optimize!

optimizt path/to/picture.jpg

Command line flags

  • --avif — create AVIF versions for the passed paths instead of compressing them.
  • --webp — create WebP versions for the passed paths instead of compressing them.
  • -f, --force — force create AVIF and WebP even if output file size increased or file already exists.
  • -l, --lossless — optimize losslessly instead of lossily.
  • -v, --verbose — show additional info, e.g. skipped files.
  • -c, --config — use this configuration, overriding default config options if present.
  • -o, --output — write result to provided directory.
  • -V, --version — show tool version.
  • -h, --help — show help.

Examples

# one image optimization
optimizt path/to/picture.jpg

# list of images optimization losslessly
optimizt --lossless path/to/picture.jpg path/to/another/picture.png

# recursive AVIF creation in the passed directory
optimizt --avif path/to/directory

# recursive WebP creation in the passed directory
optimizt --webp path/to/directory

# recursive JPEG optimization in the current directory
find . -iname \*.jpg -exec optimizt {} +

Differences between Lossy and Lossless

Lossy (by default)

Allows you to obtain the final image with a balance between a high level of compression and a minimum level of visual distortion.

Lossless (--lossless flag)

When creating AVIF and WebP versions, optimizations are applied that do not affect the visual quality of the images.

PNG, JPEG, and GIF optimization uses settings that maximize the visual quality of the image at the expense of the final file size.

When processing SVG files, the settings for Lossy and Lossless modes are identical.

Configuration

JPEG, PNG, WebP, and AVIF processing is done using sharp library, while SVG is processed using svgo utility.

For optimizing GIFs, gifsicle is used, and for converting to WebP, gif2webp is used.

💡 Lossless mode uses Guetzli encoder to optimize JPEG, which allows to get a high level of compression and still have a good visual quality. But you should keep in mind that if you optimize the file again, the size may decrease at the expense of degrading the visual quality of the image.

The default settings are located in .optimiztrc.js, the file contains a list of supported parameters and their brief description.

To disable any of the parameters, you should use false for the value.

When running with the --config path/to/.optimiztrc.js flag, the settings from the specified configuration file will be used for image processing.

When running normally, without the --config flag, a recursive search for the .optimiztrc.js file will be performed starting from the current directory and up to the root of the file system. If the file is not found, the default settings will be applied.

Integrations

External Tool in WebStorm, PhpStorm, etc

Tasks in Visual Studio Code

Plugin for Sublime Text 3

Workflow for GitHub Actions

Create optimizt.yml file in the .github/workflows directory of your repository.

Insert the following code into optimizt.yml:

name: optimizt

on:
  # Triggers the workflow on push events but only for the “main” branch
  # and only when there's JPEG/PNG in the commmit
  push:
    branches:
      - main
    paths:
      - "**.jpe?g"
      - "**.png"
  
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  convert:
    runs-on: ubuntu-latest

    steps:
      # Install Node.js to avoid EACCESS errors upon install packages
      - uses: actions/setup-node@v2
        with:
          node-version: 14

      - name: Install Optimizt
        run: npm install --global @funboxteam/optimizt

      - uses: actions/checkout@v2
        with:
          persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token
          fetch-depth: 0 # get all commits (only the last one fetched by default)

      - name: Run Optimizt
        run: optimizt --verbose --force --avif --webp .

      - name: Commit changes
        run: |
          git add -A
          git config --local user.email "actions@github.com"
          git config --local user.name "github-actions[bot]"
          git diff --quiet && git diff --staged --quiet \
            || git commit -am "Create WebP & AVIF versions"

      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: ${{ github.ref }}

This workflow will find all JPEG and PNG files in pushed commits and add the AVIF and WebP versions via a new commit.

More examples you can find in the workflows directory.

Troubleshooting

“spawn guetzli ENOENT”, etc

Make sure that the ignore-scripts option is not active.

See #9.

“pkg-config: command not found”, “fatal error: 'png.h' file not found”, etc

Some operating systems may lack of required libraries and utils, so you need to install them.

Example (on macOS via Homebrew):

brew install pkg-config libpng

from

https://github.com/funbox/optimizt