Edited at

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で制御するのが良いのかな...?

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