Studio Happyvalley

大量の画像を
IMAGE
MAGICKで
自動変換

image: 大量の画像をIMAGEMAGICKで自動変換
Easy Convert Images

WEBP画像の作成など何枚でも楽々自動変換

 | 2021/08/21

最近のサイトは画像のリサイズや
変換作業が大幅に増加。

WEBサイト用の画像、最近はブラウザが標準でWEBPに対応するようになりWEBPを使う機会も増えてきました。
当サイトでもWEBPを使用しています。
ただし、旧iOSのように一部WEBPが対応していない環境もあるためJPGも残さざるをえず現状WEBPとJPGの2種類を使用しています。
また、画像のサイズも3種類使用しています。
・スマホ用に横幅640px、
・iPadなどの中型サイズ用に横幅832px、
・PC用に横幅1472px。
オリジナル画像自体は今後のモニターの大型化も見込んで2000px以上で作ってます。
というわけで一つのイメージにつき最低でも6種類必要になります。

https://studio-happyvalley.com/wp/wp-content/uploads/needimages.png

実はこれ以外にもサムネイル用などもあるため最終的には10種類ほどが必要になります。
これらの大量の画像を作成する場合はphotoshopのアクションでバッチ化することが多いと思います。が、現状photoshopでWEBP変換は別名保存でないと使用できません。速度の面でも遅いし、また、いちいちソフトを起動しないといけない(これがまた時間がかかる)などいろいろ面倒です。
この問題、ImageMagickを使うことで楽々解消です。

ImageMagickは便利だけど
コマンドラインが面倒

ImageMagickを使うと画像の変換だけなら10枚くらいだと数秒で完了します。WEBPにも対応しています。
一度でもImageMagickを使うとphotoshopには戻れません。
しかしmageMagickというとコマンドラインでいちいちディレクトリを指定したりなど面倒くさい、てのがありますね。
でもバッチファイルを使えばコマンドラインを使わずに簡単にImageMagickを使えます。
変換専用のディレクトリを作りそこにバッチファイルを設置して必要な時にダブルクリック。
これだけで数秒後には設定したディレクトリに欲しい画像が自動で作成されています。コマンドラインを入れる必要はありません。

https://studio-happyvalley.com/wp/wp-content/uploads/Image-8-1.png

もちろんImageMagickを使うためにはインストールする必要があります。
インストールは非常に簡単なのでググってもらえば解説サイトがいくらでもヒットすると思います。
あるいはオフィシャルサイトでもダウンロードとインストール方法が解説されています。英語ですが翻訳すれば問題ありません。
ちなみに当サイトで使用しているバージョンは、ImageMagick 7.0.10です。

公式サイトインストール解説:https://imagemagick.org/script/download.php

当スタジオで使用している
バッチファイルのコードを紹介

通常の画像変換に使用するプログラムはmogrify。必要なオプション一覧を下記に。
バッチファイルなので「%」の前に「%」を追加してます。

1. フォーマット変換
※webp変換:-format webp

2.リサイズ
縦横どちらかの長い方を基準。短い方はなりゆき。
※640の場合:-resize 640x640

3. 品質 ※75に設定:-quality 75

4. ファイル名変換
※元のファイル名の前後に『keyvisual_』『_374』を追加:
-set filename:f keyvisual_%%t_374 %%[filename:f].jpg

5. 保存先ディレクトリ設定
※オリジナルを残し『D:\_MOD』に保存
-path D:\_MOD

webpに変換するだけなら上の1、3、5のみでOK.こんな感じ。

mogrify -path D:\_MOD -quality 75  -format webp *.jpg *.png *webp *psd

上記のコマンドの意味は、『同じディレクトリ内の「*.jpg *.png *webp *psd」ファイルに対してWEBPに変換し品質は75『D:\_MOD』へ保存しろ!』という意味になります。
これを『2.Convert:all⇒webp.bat』などの任意の名前でバッチファイルとして保存すれば完了。
専用ディレクトリに変換したい画像を好きなだけ放り込んでバッチファイルをダブルクリックすればあっという間に指定ディレクトに変換した画像が書き出されます。

『大量の画像をIMAGEMAGICKで自動変換』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition