アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

ImageMagickでいろいろなサムネイル画像作成に挑戦

最近、MacBook AirではなくてMacBookを購入してMac生活をエンジョイ中の笹亀です。
長年使用していたWindowsからの乗り換えのため、非常に慣れない日々を過ごしてきましたが、徐々にMacの環境にも慣れてきました^^

さて、PHPで画像処理を行うといえば、GDライブラリが有名です。
GDでも画像に対して処理を加えてサムネイルなどの作成が容易に行えます。
その他にも、PHPのエクステンションとして「imagick」という画像ライブラリも用意されており、画像処理に関しては結構充実しております。

今回は、GDやimagickをPHPから使用するのではなくImageMagickをCL(コマンドライン)で操作して様々な画像の処理を行ってみたいと思います。
画像の処理を行うImageMagickのコマンドはたくさんありますが、今回は「convert」コマンドのみを使用して作成していきます。

まずは基本的な使用方法です。

■フォーマットの変換
画像のフォーマットを変換できます。
拡張子から画像のフォーマットを判別して、jpgファイルをpngファイルにフォーマットを変換しています。


convert pa_01.jpg pa_01.png


■画像サイズの変換方法
resizeオプションとサイズを指定して画像サイズを変更することができます。
縦横比は自動的に適切な比率で調整してくれるのが特徴です。


convert pa_01.jpg -resize 200x200 pa_01_resize.jpg



サイズの後ろに「!」を付けると、縦横比は無視してサイズ変換されます。


convert pa_01.jpg -resize 300x200! pa_01_resize1.jpg



自動調整をしてくれるのを知らないで、自分が実装したときには自前でリサイズのサイズを求めてサムネイルを作成していました;;

■最大色数の指定方法
colorsオプションで最大色数を指定できます。


convert pa_01.jpg -colors 50 -resize 200x200 pa_01_resize.jpg


通常、サイズが小さくなるとおもったのですが、今回試した場合は逆にサイズが増えました。
原因はなぞです。。
colorオプション指定なしの200x200:約15kb
colorオプション指定ありの200x200:約20kb

■アニメーションGIF作成
複数の画像を指定してアニメーションGIFを作成することができます。


convert -delay 100 pa_*_resize.jpg pa.gif


delayオプションを使用して画像の切り替え時間を指定します。
今回は100(1秒)ごとに切り替えるように設定しました。

※クリックするとアニメーションを確認できます。

■アニメーションGIFをリサイズする方法
アニメーションGIFのリサイズをきれいに行うことができます。
アニメーションの構成枚数が多い場合は画像サイズが大きくなってしまうのが弱点です。


convert pa.gif -coalesce -resize 100x100 -deconstruct pa_small.gif
coalesce:オプションは画像シーケンスをマージ
deconstruct:オプションは画像シーケンス要素ごとに分解


※クリックするとアニメーションを確認できます。

上記のまでのことが基本的によく使う方法になります。
そんな中で、私がよく使用する方法として下記の2つをご紹介します。

アニメーションGIFをリサイズするのはサイズが大きくなってしまい、
携帯サイトの場合だとあまり不向きなため、アニメーションの最初の画像をリサイズする方法を使用していました。アニメーションGIFの最初の画像を指定して1枚の画像のみをリサイズする方法を使用します。実行方法は下記のように行います。


convert pa.gif[0] -resize 300x300 pa_03_resize.jpg

[0]のようにシーケンス番号を指定でき、特定のアニメーションGIFの画像をリサイズできます。


さらにこのようなことも行いました。
特定の枠の画像(背景色を白)を作成して、リサイズした画像を重ねるなどの方法です。
用途は、小さい画像でもデザインを崩さないように固定枠をもうけることにより、検索などのサムネイル画像に使用できます。


convert pa_01.jpg -resize 100x100 -size 150x150 xc:red +swap -gravity center -composite pa_04_resize.jpg

今回は結果をわかりやすくするために、150x150の赤い枠を作成して、100x100でリサイズした画像を真ん中に貼付けています。
「+swap」「-composite」はImageMagickのバージョンが古いと使用できない場合がありますので注意してください。私の環境では(6.2.8)では使用できました。


このように、ImageMagickは便利でいろいろな画像処理を行うことができます。
PHPのGDライブラリで画像処理を行うより、多くのことが行えるはずです。
ひとつ残念なことは、英語のマニュアルがメインなので詳しいオプションがわかりにくいというところでしょうか。

偶然かわかりませんが、最近「imagick」エクステンションもバージョンアップされたので、この機会にぜひ、ImageMagickで画像処理を試してみてはいかがでしょうか。