https://thejuraku.com/pc/?p=12311

画像をドラッグ&ドロップで任意のサイズに自動的にリサイズする

ImageMagickのロゴ

ウェブサイトを作ったり、更新作業をする時に google PageSpeed Insightsで計測している人は多いでしょう。「適切なサイズの画像」を最初から提供してくださいと言われてしまうことが多々あるかと思います。つまりテストしているウェブページに表示している画像のサイズが300x300pxなのに、読み込んでいる画像サイズが900x900pxだった場合、大きな画像を読み込まず予め画像サイズを300x300pxにしておき、それを最初から表示しろと言っているわけです。

このような指摘にページ内の画像を一度だけリサイズするのは問題有りませんが、イラストサイトなど画像が多いときに更新の度にこのような作業を画像エディターを開いてクリックや数値入力する作業をするのは非常に手間のかかる作業になります。

ImageMagickで自動リサイズ

ImageMagickを使って決まったサイズに自動的にリサイズすれば一つす1~2分程かかっていた作業が1秒で終わります。

https://imagemagick.org/ へ行き、画面上部のDownloadをクリックすれば自分が使用している環境のファイルがダウンロードできます。

私の場合はWindows x64なのでImageMagick-7.0.10-43-Q16-HDRI-x64-dll.exeをクリックしてダウンロード。

ダウンロードが終わったらそのままデフォルト値でインストール。

インストールが正常に終わったら下記を参照。

コマンドラインからのデスクトップへスクリプトの配置

私が必要としている事は毎回画像サイズを300x300pxへ900x900pxから変換する事なので下記の様にnotepadを開いて記します。

magick.exe mogrify -resize 300×300 %1

magick.exe は先程インストールしたソフト

mogrifyは画像のりサイズ、ブラー、クロップ、フリップ、などなどをするためにしているする因数です。

-resizeは今回リサイズしたいのでresizeと記します。

300×300は今回リサイズしたい画像の最終的な大きさを指定します。

%1は入力する画像ファイルです。

使用するテキストエディターは人それぞれですが、こちらではWindows史上、Windowsに付属したソフトの中で一番優れたソフトであるnotepad.exeを使って説明します。

notepadを開き、以下を記述

magick.exe mogrify -resize 300×300 %1

その後、任意の名前でデスクトップの好きなところに配置。

ファイル名を指定するときはブラケットで囲んでください。

例えば、

自動リサイズ300×300.cmd

という名前で保存したいときは

“自動リサイズ300×300.cmd”

という感じで囲んでから保存ボタンをクリック。

それをしないと

自動リサイズ300×300.cmd.txt

という名前保存されてしまいます。

リサイズしたいファイルをドラッグ&ドロップ

ここまでできたら自動的にリサイズしたいファイルを先程作成したデスクトップに配置したアイコンにドラッグ&ドロップの作業をするだけで画像のリサイズができます。

注意事項として変換したファイルは上書き保存されますので気をつけてください。

これで今まで

  1. 画像エディターを開く
  2. リサイズしたいファイルを開く
  3. リサイズするためにメニューからリサイズを選択
  4. 数値を入力からのOKボタン
  5. 保存(Ctrl+S)
  6. 画像エディターを閉じる

の作業が

  1. リサイズしたい画像をドラッグ&ドロップ

だけで済みます。

早くすれば1分程の6工程が1秒で終わるようになりますので便利です!

効率化最高ですね!

ImageMagickについて

ImageMagickについては以下を参照してください。

ImageMagickのウェブサイト

画像のりサイズなどのコマンド一覧

変換後の最適化

ImageMagickは変換作業はしてくれますが画像ファイルの最適化は別の作業になります。

PNGファイルならばpngyuというソフト

JPGならオンラインでtinyjpg.comで。

どちらも無料で行えますがtinyjpg.comだけは最適化の回数が制限されていますがちょっと待てばできる回数が回復しますのである意味重宝しています。

EWWW Image Optimizer

WordPressの場合はEWWW Image Optimizerがあるから良くね?

と思いますがEWWW Image Optimizerで最適化していてもGoogle PageSpeed InsightsからおこられてしまいますのでWordPressに一応EWWW Image Optimizerを入れておきながらtinyjpg.comやpngyuで予め最適化した画像をWordPressに入れる方が安心します。

あ、気づきましたか?記事が少しでも役に立ったと思ったらシェアでもコメントでもしてみてください^^;
スポンサーリンク
このページの短いURL: https://thejuraku.com/pc/?p=12311