TopLinux > 2013年10月
2013年10月31日

PNG画像を最適化するツール「OptiPNG」

October 31,2013 12:55 AM
Tag:[, ]
Permalink

PNG画像を最適化するツール「OptiPNG」について紹介します。

OptiPNG
OptiPNG

1.OptiPNGとは

OptiPNGとはタイトルに記したとおり、PNG画像を最適化するためのツールで、内部情報を失わずに画像ファイルをより小さなサイズに再圧縮してくれます。

Googleの「PageSpeed Insights」に「Optimize Images」という章がありますが、OptiPNGはその中でも推奨されています。

Optimize Images
Optimize Images

その他、BMP/GIF/PNMおよびTIFFといった形式についても最適化されたPNGに変換する機能を有します。

MacやWindowsで利用することもできますが、Linuxにインストールしてコマンドラインから実行すれば、サーバ上の画像を一気に最適化できるというメリットがあります。

ここではさくらのVPS(CentOS)にインストールする手順で紹介します。

WindowsについてはOptiPNGのページからバイナリをダウンロードできます。

optipngのコマンドオプションについてはLinux/Windows/Mac共通ですが、オプションについては多岐にわたるため別エントリーしたいと思います。

2.インストール

OptiPNGをインストールするには、TeraTermなどのターミナルを開いて以下のコマンドを実行するだけです。

$ sudo yum install optipng

イントール時のログを掲載しておきます。途中で「y」を入力する箇所があります。

[hoge@wwwxxxxxx ~]$ sudo yum install optipng
[sudo] password for hoge:
Loaded plugins: fastestmirror, priorities, security
Determining fastest mirrors
epel/metalink                                                      | 6.2 kB     00:00
 * base: www.ftp.ne.jp
 * epel: ftp.kddilabs.jp
 * extras: www.ftp.ne.jp
 * updates: www.ftp.ne.jp
base                                                               | 3.7 kB     00:00
base/primary_db                                                    | 4.4 MB     00:00
epel                                                               | 4.2 kB     00:00
epel/primary_db                                                    | 5.6 MB     00:00
extras                                                             | 3.4 kB     00:00
extras/primary_db                                                  |  18 kB     00:00
updates                                                            | 3.4 kB     00:00
updates/primary_db                                                 | 5.1 MB     00:00
79 packages excluded due to repository priority protections
Setting up Install Process
Resolving Dependencies
--> Running transaction check
---> Package optipng.x86_64 0:0.6.4-1.el6 will be installed
--> Finished Dependency Resolution
 
Dependencies Resolved
 
==========================================================================================
 Package             Arch               Version                    Repository        Size
==========================================================================================
Installing:
 optipng             x86_64             0.6.4-1.el6                epel              82 k
 
Transaction Summary
==========================================================================================
Install       1 Package(s)
 
Total download size: 82 k
Installed size: 181 k
Is this ok [y/N]: y ←「y」を入力
Downloading Packages:
optipng-0.6.4-1.el6.x86_64.rpm                                     |  82 kB     00:00
Running rpm_check_debug
Running Transaction Test
Transaction Test Succeeded
Running Transaction
  Installing : optipng-0.6.4-1.el6.x86_64                                             1/1
  Verifying  : optipng-0.6.4-1.el6.x86_64                                             1/1
 
Installed:
  optipng.x86_64 0:0.6.4-1.el6
 
Complete!

このツールはlibpngとzlibを利用します。

3.optipngのバージョン確認

optipngに「-version」をつけて起動してみます。

% optipng -version

以下出力メッセージです。

OptiPNG 0.6.4: Advanced PNG optimizer.
Copyright (C) 2001-2010 Cosmin Truta.
 
This program is open-source software. See LICENSE for more details.
 
Portions of this software are based in part on the work of:
  Jean-loup Gailly and Mark Adler (zlib)
  Glenn Randers-Pehrson and the PNG Development Group (libpng)
  Miyasaka Masaru (BMP support)
  David Koblas (GIF support)
 
Using libpng version 1.2.49 and zlib version 1.2.3

エントリー投稿時点では0.6.4がインストールされていることが分かります。

また、optipngが利用するlibpngとzlibのバージョンも表示されます。

4.PNGファイルの最適化

サーバ上にある「test.png」というファイルを最適化してみます。このファイルのサイズは約134KBです。

[hoge@wwwxxxxxx tmp]$ ls -l
total 132
-rw-r--r-- 1 hoge hoge 134411 Oct 23 01:00 test.png
[hoge@wwwxxxxxx tmp]$

最適化は次のようにファイル名を指定するだけです。最適化された内容は同じファイルに上書きします。

% optipng test.png

以下、実行時のログです。

[hoge@wwwxxxxxx tmp]$ optipng test.png
OptiPNG 0.6.4: Advanced PNG optimizer.
Copyright (C) 2001-2010 Cosmin Truta.
 
** Processing: test.png
470x271 pixels, 3x8 bits/pixel, RGB
Input IDAT size = 134232 bytes
Input file size = 134411 bytes
 
Trying:
  zc = 9  zm = 8  zs = 0  f = 0         IDAT size = 133510
  zc = 9  zm = 8  zs = 0  f = 5         IDAT size = 115521
  zc = 9  zm = 8  zs = 1  f = 5         IDAT size = 111629
  zc = 9  zm = 8  zs = 3  f = 5         IDAT size = 111532
 
Selecting parameters:
  zc = 9  zm = 8  zs = 3  f = 5         IDAT size = 111532
 
Output IDAT size = 111532 bytes (22700 bytes decrease)
Output file size = 111663 bytes (22748 bytes = 16.92% decrease)

ログをみると、サイズが一番小さくなる最適なパラメータを見つけ出して実行していることが分かります。

lsコマンドで表示するとファイルサイズが112KBに圧縮されています。

[hoge@wwwxxxxxx tmp]$ ls -l
total 112
-rw-rw-r-- 1 hoge hoge 111663 Oct 30 23:08 test.png

オプションなしで実行しても普通に最適化してくれていることが分かります。

5.PNGファイルをまとめて最適化する

カレントディレクトリ配下にあるPNGファイルをまとめて最適化するには、次のコマンドを実行するといいでしょう。

$ find . -name "*.png" -print | xargs optipng

findコマンドは指定したディレクトリ(ここではカレントディレクトリなので「.」)に対し、-nameで指定したファイルを全検索し、-printで標準出力します。

その出力をxargsコマンドでoptipngの引数とすることで、一括最適化が行えます。

次のような形式で指定してもいいのですが、コマンド実行時の引数の総バイト数には上限があり、エラーになる可能性があります。

% optipng `find . -name "*.png" -print`

6.参考サイト

参考サイトは以下です。ありがとうございました。

Comments [0] | Trackbacks [0]
2013年10月15日

改行コードの「^M」を削除する方法

October 15,2013 1:33 AM
Tag:[]
Permalink

改行コード「^M」を削除する方法を紹介します。

改行コード「^M」を削除

1.「^M」とは

「^M」は改行コードの「CR(復帰)」を指します。

「CR」はアスキーの制御コードです。

本題の前に、なぜ「^M」が「CR」を指すのか調べてみました。

まず「^」はCtrlキーを意味します。

次に、半角英文字の「M」は、ASCIIコードの10進数「77」が対応します。

つまり「^M」はCtrlキーを押しながら「M」を押下することを意味し、Ctrlキーを押下すると、同時に押下した文字のASCIIコードから「-64」されます。

つまり「M(77)」はCtrlキーを押下することで「13」になります。

「13」はASCII制御コード「CR」になります。

Wikipedia - ASCII

2.「^M」が表示されるケース

Windows上で作成したテキストファイルの改行コードは「CR+LF」なので、この改行コードのままLinuxに転送してvi等で開くと「^M」が表示されます。

またLinux上でも、typescriptの改行コードは「CR+LF」のため、scriptファイルをvi等で開くと「^M」が表示されます。

3.問題点

「^M」はCRなので、正規表現の「\r」が対応しますが、たとえばsedで

sed -e s/\r//

としても削除することができません。

というところでつまづいたので、以降で「^M」を削除する方法を紹介します。

4.sedで「^M」を削除する

sedで「^M」を削除するには次のようにします。

sed -e s/^M//

「^M」はキーボードで「^」と「M」を入力するのではなく、「Ctrl-v」と「Ctrl-m」を連続して入力します。

5.viで「^M」を削除する

viで「^M」を削除するには、「Esc」+「:」を入力したあと、次の文字を入力します。

%s/^M//g

3項と同様「^M」は「Ctrl-v」と「Ctrl-m」を連続して入力します。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3