blog.tawa.me

東京から福岡移住したWeb開発の人が発信していくブログ

【ブログの画像圧縮】MacのAutomatorを使って効率的に画像サイズを減らす方法

f:id:tawachan39:20200103233411j:plain

こんにちは、たわです。今回は画像圧縮のお話です。

ブログを書いていると、サイトが重くならないように画像を圧縮する人も多いと思います。ですが、いちいち画像を一枚一枚圧縮していくのも面倒。

それを効率化してみたのでそのことを書きます。Mac前提で書きますが悪しからず。

実現したいワークフロー

やはり効率的に画像を圧縮してブログに乗せていくにはワークフローをイメージする必要があると思うので、そのあたりから整理していきます。

ショートカット一発でまとめて圧縮

たくさん画像を使うこともあるのでその回数分圧縮をするのはかなりの手間です。

なので、一発で勝手に圧縮されるのがベストです。

圧縮した画像は一箇所に

さらに、ブログに乗せたい画像はいろんなフォルダにあると思います。

よくある場所としては、

  • デスクトップ(スクリーンショットした場合)
  • ダウンロード(Google Photos、CanvaだらDLした場合)

が多いです。

ですが、いちいちその場所をファインダーで開くのは面倒なので、どこの画像でも特定のフォルダに書き出されると便利です。

f:id:tawachan39:20200103222224j:plain
こんな風にすぐドラッグ・アンド・ドロップしたい

設定の仕方

画像圧縮用のツールをインストール

まずは画像圧縮に必要なものをいくつかインストールします。以下のサイトを参考にさせていただきました。

画像圧縮を右クリックで簡単にできるようにAutomatorに設定した | Qrunch(クランチ)

Homebrewを入れる

これはMacでのパッケージを管理するソフトウェアです。エンジニアであれば既に使っている人も多いと思いますが、そうでない方は入れていきましょう。

macOS用パッケージマネージャー — Homebrew

以下をターミナルにて実行するとインストールできるはずです。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

圧縮ツールを入れる

Homebrewを使って圧縮に使うツールをインストールします。以下をターミナルで実行します。

brew install pngquant #png用
brew install jpegoptim #jpg用

Automatorの設定

次はAutomatorというMacでいろんな処理を自動化できるアプリケーションを使います。

起動し新規作成

MacでAutomatorを起動します。新規作成で「クイックアクション」を選択します。

f:id:tawachan39:20200103231547j:plain
クイックアクションを選択

Finder項目をコピーさせる

このクイックアクションはファイルを選択してそのファイルに対して何らかの処理をするというものです。

なので、まずはそのファイルたちをコピーするよう指示を出します。

左の指示一覧から「Finder項目をコピー」を右側にドラッグすれば追加できます。

f:id:tawachan39:20200103231607j:plain
ドラッグ・アンド・ドロップで追加

コピー先は自分の好みの場所にできるので、僕は/ピクチャ/圧縮済み画像というフォルダに入れるようにしました。

イメージタイプを変更させる

コピーに続けてさらに別の処理を加えていくことができます。Automatorは便利です。

次は、jpgに一律変換する処理を入れました。画像にはjpgpngなどあるかと思いますが、僕は写真が多いのでそうしました。

f:id:tawachan39:20200103231625j:plain
jpgへの変換処理を追加

イラストを多く使う人はpngのほうが適している場合もあるかと思うのでそこは自分の用途と要相談です。

Finder項目の名前の変更: テキストの追加

圧縮した画像だということをわかりやすくするためにファイル名に変更を加えます。

f:id:tawachan39:20200103231643j:plain
ファイル名変更

今回はファイル名の末尾に_compressedと追加するように指示します。

イメージをサイズ調整

次に画像のサイズ調整をします。僕は長いほうが1024pxになるように設定しました。

f:id:tawachan39:20200103231658j:plain
サイズを調整

ブログに乗せる画像はこれくらいあれば十分だと思いますが、個々人の好みに合わせましょう。

シェルスクリプトを実行

ここでさらに圧縮する処理を加えていきます。ここで最初にインストールした圧縮ツールを呼び出していきます。

f:id:tawachan39:20200103231726j:plain
シェルスクリプトを追加

画像のようにシェルスクリプトを実行の項目を追加し、テキストボックスに以下のスクリプトを追加しましょう。

for f in "$@"  
do  
  # PNG  
  [`basename "$f" .png` = `basename "$f"` ] || {  
    /usr/local/bin/pngquant --force --ext .png 256 --quality=70-90 "$f"  
  }  

  # JPG  
  [ `basename "$f" .jpg` = `basename "$f"` ] || {  
    /usr/local/bin/jpegoptim --strip-all --max=100 "$f"  
  }  
done
  • pngだったらpng圧縮用のツール
  • jpgだったらjpg圧縮用のツール

を呼び出しているだけです。

あとここで注意なのですが、項目の右側の「入力の引き渡し方法」を

【stdinへ】→【引数として】

へ変更しましょう。これを忘れると正しく動きません。

f:id:tawachan39:20200103231906j:plain
必ず確認してください

あと、シェルが/bin/bashになっていることも確認しましょう。/bin/zshなどではエラーになります。

f:id:tawachan39:20200103231957j:plain
bashを使いましょう

名前をつけて保存する

後は作成したAutomatorのファイルを保存します。保存する名前がそのままアクション名になるのでわかり易い名前にすることをおすすめします。

f:id:tawachan39:20200103232118j:plain
処理名をつける

こうすることで、画像を右クリックするともうこの処理が実行できるようになっています。

f:id:tawachan39:20200103232157j:plain
動作確認してみましょう

ショートカットで実行できるようにする

右クリックで実行するのもいいですが、ショートカットで実行できるようが楽なのでその設定をします。

とてもシンプルで、システム環境設定キーボードのところからショートカットを設定するだけです。

Automatorを作成していると既に項目は作成されているはずなので、好きなキーを割り当てましょう。

f:id:tawachan39:20200103232218j:plain
ショートカットキーの割当

僕はcommand + shift + bにしています。

実際の挙動

実際にできあがった処理はこんな感じです。

f:id:tawachan39:20200105125722g:plain
圧縮の様子

実際に圧縮もされています。元々1.5MBあった画像も100KB程度なので十分圧縮されているはずです。このブログの一番上にある画像なので確かめてみてください。

f:id:tawachan39:20200103233316j:plain
容量もちゃんと減っている

複数枚まとめて実行してもちゃんと同時に圧縮されます。適当に画像を選んでショートカットを押すだけでフォルダに圧縮済みの画像が貯まるのでブログ書くのもとてもスムーズになりました。参考になれば嬉しいです。