WEBP画像の作成など何枚でも楽々自動変換
| 2021/08/21最近のサイトは画像のリサイズや
変換作業が大幅に増加。
WEBサイト用の画像、最近はブラウザが標準でWEBPに対応するようになりWEBPを使う機会も増えてきました。
当サイトでもWEBPを使用しています。
ただし、旧iOSのように一部WEBPが対応していない環境もあるためJPGも残さざるをえず現状WEBPとJPGの2種類を使用しています。
また、画像のサイズも3種類使用しています。
・スマホ用に横幅640px、
・iPadなどの中型サイズ用に横幅832px、
・PC用に横幅1472px。
オリジナル画像自体は今後のモニターの大型化も見込んで2000px以上で作ってます。
というわけで一つのイメージにつき最低でも6種類必要になります。
実はこれ以外にもサムネイル用などもあるため最終的には10種類ほどが必要になります。
これらの大量の画像を作成する場合はphotoshopのアクションでバッチ化することが多いと思います。が、現状photoshopでWEBP変換は別名保存でないと使用できません。速度の面でも遅いし、また、いちいちソフトを起動しないといけない(これがまた時間がかかる)などいろいろ面倒です。
この問題、ImageMagickを使うことで楽々解消です。
ImageMagickは便利だけど
コマンドラインが面倒
ImageMagickを使うと画像の変換だけなら10枚くらいだと数秒で完了します。WEBPにも対応しています。
一度でもImageMagickを使うとphotoshopには戻れません。
しかしmageMagickというとコマンドラインでいちいちディレクトリを指定したりなど面倒くさい、てのがありますね。
でもバッチファイルを使えばコマンドラインを使わずに簡単にImageMagickを使えます。
変換専用のディレクトリを作りそこにバッチファイルを設置して必要な時にダブルクリック。
これだけで数秒後には設定したディレクトリに欲しい画像が自動で作成されています。コマンドラインを入れる必要はありません。
もちろんImageMagickを使うためにはインストールする必要があります。
インストールは非常に簡単なのでググってもらえば解説サイトがいくらでもヒットすると思います。
あるいはオフィシャルサイトでもダウンロードとインストール方法が解説されています。英語ですが翻訳すれば問題ありません。
ちなみに当サイトで使用しているバージョンは、ImageMagick 7.0.10です。
当スタジオで使用している
バッチファイルのコードを紹介
通常の画像変換に使用するプログラムは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の公式サイト内mogrify解説ページImageMagickの公式サイト内コマンドライン解説ページ
『大量の画像をIMAGEMAGICKで自動変換』関連のお薦め
このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら