Gulpを使って自動で画像圧縮してみました。

post on 2020/02/21

カテゴリー:コーディング

Gulp画像圧縮

Gulpはフロントエンド開発で使用するビルドシステム。簡単に言っちゃうと自分のパソコンに便利機能を追加できるプログラム一式です。
機能の追加や設定はjavascriptで行います。基本はプラグインをインストール・インポートして書式に沿って関数を記述するだけなので、設定さえできてしまえば主だった機能は使えると思います。
Gulpを使用するためにはnode.jsやnpmなども必要になりますが、インストールするだけならそこまで難しくはありません。

僕はWebサイトパフォーマンスという本を参照してやりましたが、一部内容がプラグインの更新によって変わっているので古い本を参考にして作業する際には注意してください。

画像の圧縮はGulpでなくてもウェブサービスなどでも可能ですが、Gulpを使えば画像が指定のフォルダに保存されれば、自動で圧縮して書き出すことも可能ので便利といえば便利です。
ただ、画像の仕様点数がそれほど多くないなら、敢えて使う必要もないでしょうし、自動にする必要があるのかどうかも工程次第だと思いました。
Gulpを使った方が絶対質が上がる!とは思わないですが、外注としては使用しないわけにもいかないケースもあると思うので、簡単な機能は使えるようにしておきたいですね。

webPへの変換が楽

Gulpは画像の圧縮だけでなく、webPへの返還も行うことができます。指定したフォルダ(サブフォルダ含む)を一括して変換できるので、webPを使用する案件では重宝しますね。

トップページに戻る