ウェブサイトを作ったり、更新作業をする時に 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
という名前保存されてしまいます。
リサイズしたいファイルをドラッグ&ドロップ
ここまでできたら自動的にリサイズしたいファイルを先程作成したデスクトップに配置したアイコンにドラッグ&ドロップの作業をするだけで画像のリサイズができます。
これで今まで
- 画像エディターを開く
- リサイズしたいファイルを開く
- リサイズするためにメニューからリサイズを選択
- 数値を入力からのOKボタン
- 保存(Ctrl+S)
- 画像エディターを閉じる
の作業が
- リサイズしたい画像をドラッグ&ドロップ
だけで済みます。
早くすれば1分程の6工程が1秒で終わるようになりますので便利です!
効率化最高ですね!
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に入れる方が安心します。
コメント