9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

遅延読み込みなどが主流となった今も、ウェブアプリにおける画像ファイルの容量は無視しがたく、ここをしっかり抑えることはパフォーマンス改善策として依然有効です。
かねてよりSquooshTinyPNGJPEGminiなどブラウザから利用できるGUIツールには大変お世話になってきましたが、今回は昨今の開発環境にも組み込みやすいCLIのツールをご紹介します。

webp

WebP(ウェッピー)といえば、圧縮というよりそもそも「次世代画像フォーマット」と呼ばれるようなものですが、Can I useを見てもとっくに実用段階にきています。

つぎのように導入して、

brew install webp

つぎの感じでWebPに変換できます。

cwebp [BEFORE].png -o [AFTER].webp

余談ですが、これまで「ウェブピーではなくウェッピー」というGoogleの言葉を信じて、身を粉にして布教に努めてきましたが、あまり活動が実を結んでいる気がしません。
もうウェブピーで良い気がしてきています。

pngquant

PNG特化の「pngquant」。
ImageMagickのような汎用ツール(?)もありますが、比較するとやはり劣化が少ない気がします。

つぎのように導入して、

brew install pngquant

つぎの感じで圧縮できます。

pngquant --quality=80-90 [IMAGE].png

ちなみにオプションもめちゃめちゃあります

jpegoptim

ロスレス圧縮にも対応したjpegoptim
Compressor.ioの内部でも使用されていると(ずいぶん前に)話題になっていました。

つぎのように導入して、

brew install jpegoptim

つぎの感じで圧縮できます。

jpegoptim --strip-all --max=80 [IMAGE].jpg

こちらもオプションがめちゃめちゃあります

さいごに

信じがたいことに、2018年頃からずっと下書きにあってチラチラと(自分で)参考にしていた記事をようやく公開できました。
肩の荷がおりた思いです。

9
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?