WEB用の画像を手軽に圧縮する方法 その2

前回の記事の最適化コマンドをシェルスクリプトにしました.

これでめっちゃブログ書くのがはかどります.

必要なもの

• Mac
• OptiPNG
• Jpegoptim

インストールなどは前回の記事を参照してください.

実装

まず仕様としてこのサイトではバナー画像と普通の画像を二つ用意する必要があります.
バナー画像は2:1の大きさの横長画像でサイトのヘッド部分にあるやつですね.

ブログ用の何かしらの画像の圧縮とリサイズ時する時に、このバナー画像も一緒に作りたいっていうのが自分の要件です.

なので、今回は一回のコールでその画像も丸ごと作ります.

コードはこんな感じでシェルスクリプトで書いています.
めっちゃ手抜きでjpegとpngだけ動くようにした.
これをまんまコピーしてくれればmacなら動くと思います.

#!/bin/sh

# コマンドがあるかチェック
if ! type "jpegoptim" > /dev/null 2>&1
then
    echo "Jpegoptimがインストールされていないので終了します."
    exit 1
fi

if ! type "optipng" > /dev/null 2>&1
then
    echo "OptiPNGがインストールされていないので終了します."
    exit 1
fi

# 引数は二つじゃないといけない。
if [ $# -ne 2 ]; then
  echo "引数は二つ必要です." 1>&2
  exit 1
fi

# ディレクトリのチェック
if [ ! -d $1 ]; then
    echo "第1引数のディレクトリが存在しません."
    exit 1
fi
if [ ! -d $2 ]; then
    echo "第2引数のディレクトリが存在しません."
    mkdir $2
    echo "第2引数のディレクトリを新たに作成しました."
fi

# 出力パス
outputPath=${2%/*}

# ファイルごとに圧縮して変換
for file in `\find $1 -type f`; do
    ## 拡張子の取得
    basename=${file##*/}
    extension=${basename##*.}
    #echo $extension
    if [ $extension = 'png' ] || [ $extension = 'jpg' ] || [ $extension = 'jpeg' ]; then
      out_file="${outputPath}/${basename}"

      # 画像のリサイズ一旦1024に揃える
      sips -Z 1024 $file --out $out_file
      echo "$basename をリサイズしました."
      # バナー用のトリミング版も作成
      out_file_banner="${outputPath}/banner_${basename}"
      sips -c 512 1024 $out_file --out $out_file_banner
      echo "$basename のバナー用ファイルを作成しました."

      # 圧縮
      if [ $extension = 'png' ]; then
        optipng -o7 $out_file
        optipng -o7 $out_file_banner
        echo "$basename を圧縮しました."
      else
        jpegoptim -s $out_file -m 80
        jpegoptim -s $out_file_banner -m 80
        echo "$basename を圧縮しました."
      fi
    fi
done

exit 0

使い方

まずinputディレクトリに変換したい画像をぶっ込みます.

あとは以下のコマンド打つとoutputに画像ができます.

./make_images.sh input outputPath

あとは画像置くだけ.