ImageMagickでいろいろなサムネイル画像作成に挑戦
- 2008/05/08
笹亀弘
最近、MacBook AirではなくてMacBookを購入してMac生活をエンジョイ中の笹亀です。
長年使用していたWindowsからの乗り換えのため、非常に慣れない日々を過ごしてきましたが、徐々にMacの環境にも慣れてきました^^
さて、PHPで画像処理を行うといえば、GDライブラリが有名です。
GDでも画像に対して処理を加えてサムネイルなどの作成が容易に行えます。
その他にも、PHPのエクステンションとして「imagick」という画像ライブラリも用意されており、画像処理に関しては結構充実しております。
今回は、GDやimagickをPHPから使用するのではなくImageMagickをCL(コマンドライン)で操作して様々な画像の処理を行ってみたいと思います。
画像の処理を行うImageMagickのコマンドはたくさんありますが、今回は「convert」コマンドのみを使用して作成していきます。
まずは基本的な使用方法です。
■フォーマットの変換
画像のフォーマットを変換できます。
拡張子から画像のフォーマットを判別して、jpgファイルをpngファイルにフォーマットを変換しています。
■画像サイズの変換方法
resizeオプションとサイズを指定して画像サイズを変更することができます。
縦横比は自動的に適切な比率で調整してくれるのが特徴です。

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

自動調整をしてくれるのを知らないで、自分が実装したときには自前でリサイズのサイズを求めてサムネイルを作成していました;;
■最大色数の指定方法
colorsオプションで最大色数を指定できます。
通常、サイズが小さくなるとおもったのですが、今回試した場合は逆にサイズが増えました。
原因はなぞです。。
colorオプション指定なしの200x200:約15kb
colorオプション指定ありの200x200:約20kb
■アニメーションGIF作成
複数の画像を指定してアニメーションGIFを作成することができます。
delayオプションを使用して画像の切り替え時間を指定します。
今回は100(1秒)ごとに切り替えるように設定しました。

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

※クリックするとアニメーションを確認できます。
上記のまでのことが基本的によく使う方法になります。
そんな中で、私がよく使用する方法として下記の2つをご紹介します。
アニメーションGIFをリサイズするのはサイズが大きくなってしまい、
携帯サイトの場合だとあまり不向きなため、アニメーションの最初の画像をリサイズする方法を使用していました。アニメーションGIFの最初の画像を指定して1枚の画像のみをリサイズする方法を使用します。実行方法は下記のように行います。

さらにこのようなことも行いました。
特定の枠の画像(背景色を白)を作成して、リサイズした画像を重ねるなどの方法です。
用途は、小さい画像でもデザインを崩さないように固定枠をもうけることにより、検索などのサムネイル画像に使用できます。
「+swap」「-composite」はImageMagickのバージョンが古いと使用できない場合がありますので注意してください。私の環境では(6.2.8)では使用できました。

このように、ImageMagickは便利でいろいろな画像処理を行うことができます。
PHPのGDライブラリで画像処理を行うより、多くのことが行えるはずです。
ひとつ残念なことは、英語のマニュアルがメインなので詳しいオプションがわかりにくいというところでしょうか。
偶然かわかりませんが、最近「imagick」エクステンションもバージョンアップされたので、この機会にぜひ、ImageMagickで画像処理を試してみてはいかがでしょうか。
長年使用していた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
さらにこのようなことも行いました。
特定の枠の画像(背景色を白)を作成して、リサイズした画像を重ねるなどの方法です。
用途は、小さい画像でもデザインを崩さないように固定枠をもうけることにより、検索などのサムネイル画像に使用できます。
- convert
pa_01.jpg -resize 100x100 -size 150x150 xc:red +swap -gravity center -composite pa_04_resize.jpg
「+swap」「-composite」はImageMagickのバージョンが古いと使用できない場合がありますので注意してください。私の環境では(6.2.8)では使用できました。
このように、ImageMagickは便利でいろいろな画像処理を行うことができます。
PHPのGDライブラリで画像処理を行うより、多くのことが行えるはずです。
ひとつ残念なことは、英語のマニュアルがメインなので詳しいオプションがわかりにくいというところでしょうか。
偶然かわかりませんが、最近「imagick」エクステンションもバージョンアップされたので、この機会にぜひ、ImageMagickで画像処理を試してみてはいかがでしょうか。
コメントフォーム
トラックバック
最近の記事
- もうすぐ健康診断があるんだ・・・ [2010年09月02日 : 阿部恵]
- Photoshopで壁紙を作りながら、基本的な使い方を覚える [2010年09月01日 : 鴨田健次]
- はじめての共同作業 Canvas編 (node.js + websocket) [2010年09月01日 : 中川善樹]
- 「PHP×Flex(後編)」PHPテクニカルセミナー(無料)第4弾の募集を開始しました!! [2010年08月26日 : 和田記光]
- 【HTML5】Canvasでお絵かきしてみた(前編) [2010年08月25日 : 橋本章史]
- MacにgroongaのMySQL用ストレージエンジン [2010年08月23日 : 笹亀弘]
- Appleのサイトで見たiPhone4をFireworksで描いてみました-1/2 [2010年08月19日 : 和田記光]
- iPad版の会社紹介を作ってみました [2010年08月19日 : 小林有佳]
- iPhoneアプリ開発開始時に気をつけるべきファイルの取り扱い (2) [2010年08月19日 : 亀本大地]
- symfonyセミナー動画無料公開! [2010年08月13日 : 岡本雄樹]



最近のコメント