ブログ用などにLQIP用画像を簡単に生成する

LQIP technique

まずLQIP techniqueというのはLow-Quality Image Placeholdersの略称です。
サイトを訪れた際、少し重ための画像をローディングする時に時間がかかる時がありますよね？LQIP techniqueは、そういった時に、実際の画像を読み込む前に超軽量の画像を読み込ませてローディング時のストレスを軽減する手法です。

どうやって生成するか

意外とオンラインでパパッと生成してくれるサイトがないので、コマンドラインツールで作りましょう。
使うのは SQIPと呼ばれるツールです。

まず以下のコマンドでインストールして

npm install -g sqip-cli@canary

以下のコマンドで実行します。
-iはインプット画像を指定するオプションで、それに続いてlow quality化したい画像のpathを指定します。

sqip -i input.png

すると、ディレクトリに input.svgという名前で、loq quality化されたsvgが生成されます。

終わり