はじめに

PNGやGIFの圧縮は、ブログ記事やGitHubのPull Requestの実行画像貼り付けとかで割とあります。

自分はTinyPNGやiLoveIMGを利用していましたが、プラウザを開きファイルをアップロード・圧縮しダウンロードという手順が毎回面倒でした。
なので、alfred-imageminというPNG / JPEG / GIFを手軽に圧縮するAlfred Workflowを作ってみました。
（GIFでも使えるというのが嬉しいポイントです）

この記事ではalfred-imageminの概要と、仕組みを紹介します。

※ Alfred WorkflowはAlfredでAlfred Powerpackを導入済みの方のみ使える機能です。便利なWorkflowで作業効率爆上がりなので、未導入の方はぜひこの機会に！

インストール

以下コマンドでnpmからインストールできます（後述するAlfyで実現しています）。
npmインストールするだけでAlfredがWorkflow認識し、すぐに使えるようになります。

$ npm i -g alfred-imagemin

また、GitHubのリリースから直接imagemin.workflowファイルをダウンロードし、Alfredに取り込むことも可能です。

使い方

使い方はこちらの通りです。

1.圧縮したい画像をFinderで選択状態にする（複数選択でもOKです）
2. Alfredを開いてimageminと入力しEnterキーを押す
3.optimized_imagesフォルダに圧縮済み画像が生成される

最初の実行時には以下アクセス権の確認の項目が出るのでOKを押してください。
その後もう一度実行すれば使えるようになるはずです。
（もしそれで動かなかったらAlfredを再起動してみてください）

（Finderからの選択ファイルの取得に使います）

圧縮率・アウトプットディレクトリの調整

Alfred Workflowの環境変数で、画像ごとの細かい圧縮率の設定やアウトプットするディレクトリ名の変更も可能です。

仕組み

AlfyというNode.jsベースでAlfred Workflowを作れるツールを使っています。そして画像圧縮自体はnpmのimageminを利用しています。

https://github.com/sindresorhus/alfy

Alfyを使う利点は以下の通りです。

• Node.jsでWorkflowを作れる
• npmモジュールが使える
• npmに公開し、手軽にinstallできるようになる

何より、Bashスクリプト書かなくてよいというのが最高便利です。
もし需要あればAlfyの使い方も記事にします。

圧縮部分のコードはこんな感じ。
本当にimageminにFinderの選択ファイルを渡しているだけです。

constpath=require("path");constimagemin=require("imagemin");constimageminMozjpeg=require("imagemin-mozjpeg");constimageminPngquant=require("imagemin-pngquant");constimageminGifsicle=require("imagemin-gifsicle");constargv=process.argv[2];constfiles=argv.split("///");constoutDir=path.dirname(files[0]);constjpegQuality=process.env.JPEG_QUALITY?Number(process.env.JPEG_QUALITY):70;constpngMaxQuality=process.env.PNG_MAX_QUALITY?Number(process.env.PNG_MAX_QUALITY):0.6;constpngMinQuality=process.env.PNG_MIN_QUALITY?Number(process.env.PNG_MIN_QUALITY):0.5;constgifOptimizationLevel=process.env.GIF_OPTIMIZATION_LEVEL?Number(process.env.GIF_OPTIMIZATION_LEVEL):3;constoutputDir=process.env.OUTPUT_DIR?process.env.OUTPUT_DIR:"optimized_images";// minify imagesawaitimagemin(files,{destination:`${outDir.trim()}/${outputDir}`,plugins:[imageminMozjpeg({quality:jpegQuality}),imageminPngquant({quality:[pngMinQuality,pngMaxQuality]}),imageminGifsicle({optimizationLevel:gifOptimizationLevel}),],});console.log("Processing completed successfully.");console.log(`Optimized ${files.length} files.`);

終わりに

以上「最速で画像を圧縮するAlfred Workflowを作った」でした。
不具合などありまたら、気軽にGitHubリポジトリにissueやPull Requestを投げてください。
あと、もし使ってみて良かったらリポジトリにstar を貰えると嬉しいです。泣いて喜びます。

参考

ツール作った系の記事の書き方として参考にさせていただきました
（ツールも毎回便利に使わせてもらっています！）

• プロセスをあいまい検索してkillするツールをGoで作った - Qiita