【ImageMagick】自動でレスポンシブ対応の画像を用意する

2021-7-6

ImageMagickとは

画像の加工ができるアプリ
cliから動かすことができ、とても便利なので使っています

mogrifyというコマンドがあり、これを使うと画像を上書きしてくれます
このコマンドを使ってビルドファイルに移してリサイズします

cp /static/images build/images/sm && mogrify build/images/sm/*.png -resize 160^x160

これで、モバイル用の画像ができたので、htmlの記述を書き換えます

<img src="/images/sample.png" srcset="/images/sm/sample.png 480w, /images/sample.png 1080w" />

これで終わりです