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

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

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

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

webPへの変換が楽

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

ブログ一覧へ戻る
松下 正平のプロフィール写真
            

この記事の著者

松下 正平

2002年より大阪を拠点に活動。仕様の行間を読み「よきにはからう」実装力をモットーとするWeb制作・WordPress開発のフリーランス。
2019年に大阪市内から枚方市に移転。
近年はLooker Studioを活用したアクセス解析にも力を入れています。

趣味

趣味は息子とのサッカー、及びサッカー観戦。ガンバ大阪好き。
好きなアイドルはBABYMETALとsora tob sokana。
現在はまっているゲームは「スプラトゥーンレイダース」
無限食堂437階をあたりを探索中。

コーディングのご依頼お待ちしております

Wordpressの構築やレスポンシブ化など人手が欲しい時はぜひお声がけください。

このブロックが表示されている時は条件が合えば即日作業が開始できます。お気軽に条件をお送りください。

制作会社様向け詳細はこちら
両手いっぱいに広げ、コーディング案件を待っているメタラー