ImageMagickで全ての画像と同じサイズの単色画像を生成するシェルスクリプト

ImageMagicで、作業ディレクトリ内にある全ての画像と同じサイズの単色画像を生成するシェルスクリプトです。

必要なツール

• ImageMagick

ソースコード

このコードでは、JPGのみを対象画像に設定しています。（PNG、SVGでも動作確認済み）

create_gray_img.sh

# !/bin/sh

dir_name="gray_img"

# mkdir except exist
if [ ! -e $dir_name ]; then
    mkdir $dir_name
fi

for file in *; do
	# filter JPG only
	if [ ${file##*.} = "jpg" ]; then	

		# convert params
		size=`identify -format %wx%h ${file}`
		color="gray"
		slash="/"
		output_f_path=$dir_name$slash$file

		echo "Processing: ${file}"

		convert -size $size xc:$color $output_f_path
    fi
done

実行例

実行コマンド

$ bash create_gray_img.sh

Processing: onigiri.jpg

実行結果

なんで書いたの？

lazyloadで、ブラウザがオリジナルの画像をloadする前にpreloadさせておくダミー画像を作るために書きました。

preloadさせておかないと、ページ内リンクによるスクロールイベントで、画像サイズ分のズレが発生してしまいます。
もちろん、他にも回避方法はあります（一例）が、表示する画像サイズが一定でない場合はこの方法が有効です。

ただ、preloadする画像の数だけRequestが増えるので、最善策ではない気がしてます。
やっぱり事前に画像サイズのパターン決めてcssで制御するのが良いのかな...？

他に良い方法を知ってる方がいたら教えてください🙏