ImageMagick」タグアーカイブ

ImageMagickのconvertコマンドでサムネイル画像を作成

ImageMagickのconvertコマンドを使って画像をresize & cropする方法を調べてみました。

オリジナルの画像(src.jpg)

アスペクトを維持して画像全体が含まれるようにリサイズ

$ convert -resize 200x200 -gravity Center -extent 200x200 src.jpg dst.jpg

CSSのbackground-size:containのような感じです。-gravity Centerはリサイズ後の配置に影響します。NorthWest/North/NorthEast/West/Center/East/SouthWest/South/SouthEastが使えます。

アスペクトを無視してリサイズ

$ convert -resize 200x200! -extent 200x200 src.jpg dst.jpg

アスペクトを維持して余白がないようにリサイズ

$ convert -resize 200x200^ -gravity Center -extent 200x200 src.jpg dst.jpg

CSSのbackground-size:coverのような感じです。切り取る部分を変更したい場合は-gravity Centerの部分を変更してみてください。

Windows環境で200x200^がうまく動作しない場合は200x200^^を試してみるとうまく動作する場合もあるみたいです。

ImageMagickのconvertを使ってfaviconを作成するコマンド

ImageMagickのconvertを使ってfaviconを作成したい場合は次のようなコマンドを実行すると良いそうです。

$ convert source.png -define icon:auto-resize favicon.ico

16×16、24×24、32×32、40×40、48×48、64×64、96×96、128×128、192×192、256×256のマルチアイコンとなるようです。含めるサイズを指定したい場合は

$ convert source.png -define icon:auto-resize=64,48,32,16 favicon.ico

のような感じで実行します。

HTMLのヘッダーへの書き方

favicon.icoの場合は指定する必要はありませんが、ファイル名やパスを変更したい場合はHTMLのヘッダーに

<link rel="shortcut icon" href="/path/to/icon.ico">

のような記述を追加すると良いようです。

リンク

[SOLVED] PNG to ICO while preserving transparency – ImageMagick
http://www.imagemagick.org/discourse-server/viewtopic.php?t=26252

html – Favicon: .ico or .png / correct tags? – Stack Overflow
https://stackoverflow.com/questions/6121725/favicon-ico-or-png-correct-tags