遅延読み込みなどが主流となった今も、ウェブアプリにおける画像ファイルの容量は無視しがたく、ここをしっかり抑えることはパフォーマンス改善策として依然有効です。
かねてよりSquooshやTinyPNG、JPEGminiなどブラウザから利用できる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年頃からずっと下書きにあってチラチラと(自分で)参考にしていた記事をようやく公開できました。
肩の荷がおりた思いです。