5
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

コマンドラインから大量のpngとjpgを圧縮する

ウェブサイトで画像を使用する時に、
サイズの重い画像を軽量化することはよくあると思います。

TinyPNG

でも、このwebサービスでは以下のような問題がありました、

・web版だとアップロードした画像の行方(データを抜き取られてる可能性もなきにしもあらず)
・無料版だと、1ファイルづつアップロードするのが面倒
・大量のファイルをディレクトリを維持したまま一括で処理したい。

という思いがありました。


一番良いのは、ツールを買ってしまうことです。
ケチってもいいことはありません。
金で解決出来るものはどんどんしてしまいましょう!

ただ、エンジニアの端くれということもあり、
これからもそこそこ使いそうな処理なので、PC内で自分で自動化してしまおうということで、調べてみました。

調べたところ、以下のライブラリを使うのが良さそうです。

ライブラリ

pngquant (png用)

https://pngquant.org/
(tinypngの内部処理にも使われているらしい)

インストール

brew install pngquant

使い方 (他にもオプション有り)

pngquant --ext .png --force -v .test.png (圧縮 / 出力ファイル名そのまま / 強制上書)
pngquant --ext .png --force -v *.png (圧縮 / 出力ファイル名そのまま / 強制上書 / カレントのjpg全部)

jpegoptim (jpg用)

インストール

brew install jpegoptim

使い方 (他にもオプション有り)

jpegoptim test.jpg (圧縮)
jpegoptim test.jpg test2.jpg (圧縮 / 複数)
jpegoptim --strip-all test.jpg (圧縮/メタ全部消す)
jpegoptim --strip-all --max=90 test.jpg (圧縮 /90% / メタ全部消す)
jpegoptim --strip-all --max=90 *.jpg (圧縮 /90% / メタ全部消す / カレントのjpg全部)

使いやすいようにカスタマイズ

ここまでの情報はネット上にたくさん出てくるのですが、

再帰ディレクトリ的に処理をする

という方法がなかなかうまくいきませんでした。

例えば、

pngquant --ext .png --force -v img/*/*.png

img/aaa.png → NG
img/hoge/bbb.png → OK

この書き方だと、部分的に無視されてしまいます。


pngquant --ext .png --force -v img/*.png img/*/*.png img/*/*/*.png

img/aaa.png → OK
img/hoge/bbb.png → OK
img/hoge/huga/ccc.png → OK

この書き方だと、一見良さそうですが、もっと階層がある場合にカバーできません。
そして、特定のパターンの階層にファイルが無いとエラーになってしまいました。


色々調べた結果が、こちら。

find . -name '*.png' -exec pngquant --ext .png --force -v {} \;

xargsの方が速いらしい
https://qiita.com/legitwhiz/items/e609537fb6226081f5b5

find . -name '*.png' | xargs pngquant --ext .png --force -v

npm scriptsに使いやすいようにまとめておく

これで、pngとjpgがディレクトリそのままで圧縮される。
大量のファイルだと止まるかもしれない(未検証)。

  "scripts": {
    "optim": "npm run optim:png && npm run optim:jpg",
    "optim:png": "find . -name '*.png' | xargs pngquant --ext .png --force -v",
    "optim:jpg": "find . -name '*.jpg' | xargs jpegoptim --strip-all --max=90",
  },
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?