OptiPNGをmacOSにインストールしてPNG画像を軽量化する方法

投稿者 : OSCA

[PR] "東野・岡村の旅猿"で登場したロケ地を紹介するファンサイト「あの場所へ行こう!」はこちら。

 PNG画像の画質をできるだけ落とさずにファイル自体のサイズを減らす「画像最適化」を行うソフトウェアに OptiPNG があります。 本稿では、OptiPNG を macOS にインストールしてPNG画像の最適化を行う方法を解説します。

PNG画像最適化とは?

 PNG画像最適化とは、画質や画像の幅・高さなどの情報を劣化させることなく、画像自体のファイルサイズを減らすことです。 WEBサイトに掲載している画像サイズを減らすことは、WEBサイトの表示速度を向上に繋がり、ユーザエクスペリエンスがより良いものになります。

OptiPNG とは?

 OptiPNG は、PNG画像最適化に特化したオープンソース・ソフトウェアです。 PNG, BMP, GIF, PNM, TIFF などの様々な画像ファイルから、最適化されたPNG画像を生成してくれます。
 OptiPNG は、Linux, MacOS, Windows などの様々なプラットフォームで利用できます。 本稿では macOS で利用する方法について解説します。

OptiPNG のインストール

 MacOS に OptiPNG をインストールするのは、パッケージ管理ソフトウェア Homebrew の brew コマンドでインストールするのが簡単です。 Homebrew の導入がまだの場合は、別稿「Mac の開発を便利にするパッケージ管理ソフト Homebrew のインストール手順」をご覧ください。

 OptiPNG は次の例のように brew install コマンドで optipng を指定すればインストールできます。

$ brew install optipng
==> Downloading https://homebrew.bintray.com/bottles/optipng-0.7.6_1.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring optipng-0.7.6_1.high_sierra.bottle.tar.gz
🍺 /usr/local/Cellar/optipng/0.7.6_1: 7 files, 139.9KB

 インストールが完了したら、念のため optipng -v コマンドでインストールした OptiPNG のバージョンを表示してみましょう。 次の例のようにバージョン番号が表示できればOKです。

$ optipng -v
OptiPNG version 0.7.6
(以下略)

簡単な利用方法

 OptiPNG の最も簡単な使い方は、optipng コマンドにファイル名だけを指定する方法です。 それだけでサイズを減らして同ファイル名で上書きしてくれます。 次の例の場合は、28.47% の容量を減らすことができました。

$ optipng image.png
** Processing: image.png
240x240 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 3x8 bits/pixel, RGB
Input IDAT size = 107055 bytes
Input file size = 107367 bytes
(略)
Output IDAT size = 76645 bytes (30410 bytes decrease)
Output file size = 76801 bytes (30566 bytes = 28.47% decrease)

 ディレクトリ内にあるファイルを全て最適化したい場合は、次のようにアスタリスク(*)でファイルを指定すれば良いでしょう。

$ optipng *.png

 ファイル名を変更してファイルを出力したい場合は、-out オプションで出力ファイル名を指定します。

$ optipng -out image_min.png image.png

おわりに

 本稿ではPNG画像最適化ソフトウェア OptiPNG の利用方法について解説しました。 WEBサイトの軽量化のためにぜひ利用してください。

Miscのトップへ戻る

著者 : OSCA

OSCA

Java, PHP 系のWEBエンジニア。 WEBエンジニア向けコミュニティ「WEBエンジニア勉強会」を主催。 個人として何か一つでも世の中の多くの人に使ってもらえるものを作ろうと日々奮闘中。
@engineer_osca