ワンライナーでWebに最適な画像に変換する

何を作ったの

画像をWeb用に最適化するシェルスクリプトを作りました。

このスクリプトを使えば、視覚的な品質を保ちつつ、画像を軽量化できます。

なぜ作ったの

自身のイラストを掲載するポートフォリオサイトを高速化したかったからです。

hirosaji-portfolio.com

作ったもの

ソースコード

結構シンプルです。

#!/bin/sh

CMDNAME=`basename $0`
if [ $# -ne 1 ]; then
  echo "Usage: $CMDNAME file_name" 1>&2
  exit 1
fi

echo "Processing: $1"

# optimize
convert $1 -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB optimized_image.jpg

# resize
v=$(identify -format "%w,%h" $1)
list=(${v//,/ })

if [ ${list[0]} -ge ${list[1]} ]; then
    mogrify -resize x1500 optimized_image.jpg
else
    mogrify -resize 1500x optimized_image.jpg
fi

exit 0

実行例

最適化する画像のパスを引数にして、スクリプトを実行します。

$ sh optimize_image.sh <image_path>

実行後、optimized_image.jpg という最適化された画像が出力されます。

解説

要点ごとに分割して解説します。

CMDNAME=`basename $0`
if [ $# -ne 1 ]; then
  echo "Usage: $CMDNAME file_name" 1>&2
  exit 1
fi

前半のこの箇所で、引数の数を判定しています。引数が１つ含まれている時以外は、エラーメッセージを返します。

convert $1 -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB optimized_image.jpg

次に、この部分で画像を最適化します。（要・ImageMagick）
画像を最適化する際のパラメータは、 Google Pagespeed Insights を参考にしました。

v=$(identify -format "%w,%h" $1)
list=(${v//,/ })

if [ ${list[0]} -ge ${list[1]} ]; then
    mogrify -resize x1500 optimized_image.jpg
else
    mogrify -resize 1500x optimized_image.jpg
fi