はてなブログやWordPressなどでユーザのために読みやすいWebサイトを作るためには、使用する画像の横幅を720pxにする必要があります。また、重くならないためには画像の容量圧縮も必須ですよね。
今回はそんな画像のサイズ変換+容量圧縮を1クリック(正確にはダブルクリックですがw)でやるシェルスクリプトを作成しました。複数の画像でも1回シェルを動かすだけで一気にサイズ変換+容量圧縮が可能です。
容量圧縮は画像の拡張子を「.jpeg」に変えることで行います。多くの画像は拡張子を.jpegに変えるだけでかなり容量が小さくなるのです。
普段からブログなどで画像を投稿する機会がある方には、かなり時間の節約になるはず！これからシェルの内容と使い方を解説をしていくので、ぜひ読んでみてください。
#目次
1.画像サイズ変換・容量圧縮シェルの内容
2.使うための準備
#1. 画像サイズ変換・容量圧縮シェルの概要
まず、Webサイトで使いたい画像をデスクトップに作成した「画像リサイズ」というフォルダに入れます。
今回はUnslashというフリー画像のサイトから適当に2枚の画像をダウンロードしてきました。シェルを使う前の状態で画像の容量はそれぞれ2.9MB、1.2MBです。
シェル使用前の状態の画像を以下に貼っておきます。
2.9MB画像
1.2MB画像
そして画像サイズ変換・容量圧縮シェルをダブルクリックして実行したあとの画像が以下です。
元2.9MB画像
元1.2MB画像
どうでしょうか、画質はシェル使用前後でそれほど大差ないですよね。ですが、画像の容量は2.9MB→40KB、1.2MB→47KBと大幅圧縮されています！画像の横幅もちゃんと720pxに調整されていますね。
ちなみにシェルを実行すると、画像リサイズフォルダに入っている画像を更新日が古いものから順に「1,2,3...」とリネームしていきます。
内容が細かい画像の場合は、圧縮によって画質が落ちて見づらくなることがあります。画像リサイズフォルダに入っていた元画像はシェル実行と同時に削除されてしまうので、バックアップをとっておくことをおすすめします。
シェルの内容がわかったところで、ここからこのシェルを使うための準備について解説していきます。一度やってしまえば、あとは画像リサイズフォルダに画像を入れる→シェルをダブルクリック、これだけで画像のリサイズと容量圧縮が一瞬でできるようになりますよ！
#2. 使うための準備
画像サイズ変換・容量圧縮シェルを使える環境について解説していきます。
##①シェルスクリプトが実行可能な環境
私のPCがMacなので、Macでしか動作を確認していません。
##②ImageMagicのインストール
ImageMagicとは、シェルで画像のサイズ変換などを行えるようにするソフトです。ターミナルから以下のコマンドでインストールしてきましょう。
brew install imagemagick
brewコマンドが使えない方は、まずこちらのサイトを参考に、Homebrewをインストールしてください。HomebrewとはMacでよく使われているパッケージ管理ソフトです。
##③画像サイズ変換・容量圧縮シェルの作成
好きなテキストエディタを開き、以下のシェルをコピペします。
#!/bin/bash
files="{画像リサイズフォルダのパス}/*"
savePath="{画像リサイズフォルダのパス}/"
fileNo=1
kakuchoshi=.jpg
#圧縮する画像が置いてあるフォルダへ移動
cd {画像リサイズフォルダのパス}/
#画像ファイル名に半角スペースが含まれるとうまくいかない
#なので半角スペースを_に置き換える
find . -depth -name "* *" -execdir rename 's/ /_/g' "{}" \;
#フォルダの中身を全てリサイズ→jpeg変換
for filepath in $files; do
mogrify -resize 720x720 $filepath
convert $filepath $savePath$fileNo$kakuchoshi
rm $filepath #圧縮前の画像は削除
fileNo=$((fileNo+1))
done
#圧縮した画像が入っているフォルダを開く
open {画像リサイズフォルダのパス}
#処理終了
exit 0
ファイル名を「resizeConvert.command」として保存してください。拡張子を.commandとすることで、そのファイルをダブルクリックするだけでシェルが実行できるようになります。
デスクトップなど、好きな場所に「画像リサイズ」という名前のフォルダを作成します。その後、作成したフォルダのパスをコピーしてresizeConvert.commandファイルの中の{画像リサイズフォルダのパス}と記載してある部分を全て置換してください。
これで準備完了です。あとはサイズ変換・容量圧縮をしたい画像を画像リサイズフォルダに入れて、resizeConvert.commandファイルをダブルクリックするだけで画像のサイズ変換・容量圧縮ができます。