デザイン制作のフェーズが完了したら、コーディングのフェーズに入りますよね。
そしてひと通りコーディングに完成のメドが立った時。
仕上げの段階で、画像の容量を圧縮すること、あると思います。
案件によっては、最初にまとめてやっちゃう場合もあると思いますが、そこはお好みで。
そんな時、皆さんはどんなツールを使用しているでしょうか。
私はPNG画像を圧縮する場合、ずっと長いこと「ImageAlpha」というアプリを使用していました。
が、今年になり、MacOS 12(macOS Monterey)にOSをアップデートしたところ、ついに「ImageAlpha」が動作しなくなってしまいました。
（PNG画像の圧縮に関しては、良い結果が得られて重宝していたアプリでした…）
さてどうしようか、と思っていたところ。
見事に期待を満たしてくれるアプリが存在していました。本日は、そのアプリについてのお話です。
もはや画像圧縮ツールの決定版と言っても過言ではないかもしれません。「squoosh」
「squoosh」。
GoogleChromeLabs 制作の、素晴らしい画像圧縮アプリと出会いました。
(squooshの読みは、スクーシュだとかなんだとか、諸説あります)
百聞は一見にしかず。
とにかく、ご自身で使ってみるのが早いです。
squoosh
↑こちらの公式サイトにアクセスして、
容量圧縮したい画像をドロップするだけ。
また、ローカルで使用したい場合は、Chromeでアクセスすると
PWA(Progressive Web Apps…Webサイトまるごとアプリとして使えるやつです)としても使用が可能です。
アドレスバーにインストールアイコンが表示されるので、それをクリック→インストールすればデスクトップアプリとして使用できます。
GoogleChromeチームが制作しているだけあって、
見た目もばっちり Material Design の要素が随所に感じられて良い感じです。
例えばカラーパレットや、snackbarの使い方、等々…
WebP書き出しにも対応！！対応画像は多岐に及びます
感動すら覚える画像圧縮app、
「squoosh」。
こちら、更に使い勝手が良いことに、
WebP形式での書き出しにも対応しています！
もはや至れり尽くせりですね。
2022年6月にIEの世界的な公式サポートが満了した現在。
WebP形式の画像を使わない手はありません。
squooshは、
そんなWebP変換の際にも役立ってくれる素晴らしいツールです。もう本当におすすめです。
複数画像の書き出しは、CLI経由で実行可能
素晴らしい画像圧縮app、
「squoosh」。
こちら、ブラウザやPWA上からは、1点ずつ画像のBefore/Afterを見比べながら、しっかりと画像の圧縮/書き出しが行えます。
ただ、Web制作の現場では、ともすると1点1点ずつの圧縮ではなく、
複数画像を一括変換したいケースも多々あるかと思います。
そんな時には、
Squoosh CLI を使用すると良いようです。
Squoosh CLIの使用方法は次のリンクの記事にて書いています！
優秀な画像圧縮ツール「Squoosh」で、複数の画像を一括変換&圧縮する方法
squooshの各公式ページ
squoosh.app公式
(↑ここにChromeでアクセスすると、PWAとしてデスクトップアプリの様に使用することも可能です)
Squoosh CLI
(↑コマンドラインから実行する場合はこちら)
この記事のまとめ
今回は、先日
MacOS 12(macOS Monterey)に自身のMacをアップデートしたところ、
ついにこれまで使っていた画像圧縮appが動作しなくなった事をきっかけに
巡り会えた素晴らしいapp、
「squoosh」
について記事を書いてみました。
記事の中段にも書きましたが、続編の記事もあります。
複数の画像を Squoosh CLI で書き出したい場合の使用方法を、次のリンクの記事にて書いています。
優秀な画像圧縮ツール「Squoosh」で、複数の画像を一括変換&圧縮する方法
今回の記事とあわせてご覧ください。
「squoosh」。
本当におすすめの画像圧縮appなので、ぜひ使ってみてください。
この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。