はじめに
今回はgulp-image-resizeを使って画像をリサイズする方法について説明します。
最近web制作やブログの記事を書くにあたって画像をリサイズする機会が増えました。
gulpを導入すれば画像のリサイズが自動でできるようになります。
毎回手動で画像をリサイズして面倒に感じている方はぜひ導入してみてください。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではgulpで画像をリサイズする方法の説明に移ります。
画像をリサイズする目的
画像をリサイズする目的として以下3つのメリットがあります。
ブログには推奨されている画像サイズがあるようですね。
画像の横幅がおよそ1000px前後がおすすめのようです。
参考サイト
また、画像圧縮も同時に行うことでさらに表示スピードの向上が狙えます。
事前準備
gulp-image-resizeを使用する前に、「GraphicsMagick」というソフトをインストールする必要があります。
画像を操作する場合に、この「GraphicsMagick」というソフトが必要です。
GraphicsMagickをインストールしよう
GraphicsMagickをインストールする場合は、こちらを参照してください。
ディレクトリ構成
「GraphicsMagick」のインストールが完了したらディレクトリ構成に移ります。
今回のディレクトリ構成は下記になります。
test
├ node_modules
├ dist
│ └ image
├ src
│ └ image
│ ├ sample.png
│ └ sample.jpg
├ gulpfile.js
├ package-lock.json
└ package.jsonsrc/image に対して画像のリサイズを行い、リサイズ後のファイルをdist/image に出力します。
プラグインをインストールしよう
それではgulpのプラグインをインストールしていきましょう。
npm i -D gulp-image-resize
下記コマンドをターミナルで実行してgulp-image-resizeをインストールします。
npm i -D gulp-image-resizegulp-image-resize 公式
gulpfile.jsを編集しよう
プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。
//----------------------------------------------------------------------
// モード
//----------------------------------------------------------------------
"use strict";
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");
const imageResize = require("gulp-image-resize");
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function resize(done) {
src("./src/image/**")
.pipe(
imageResize({
width: 1024,
height: 768,
crop: true, // リサイズ後に画像をトリミングするかどうか
upscale: false, // リサイズ後に画像を拡大するかどうか
})
)
.pipe(dest("./dist/image/"));
done();
}
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.resize = series(resize);
/************************************************************************/
/* END OF FILE */
/************************************************************************/コマンドを実行しよう
gulpfile.jsの編集が完了したらコマンドを実行しましょう。
npx gulp resize「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。
gulpのインストール先が異なる可能性があります。
以下のようになれば正しく画像をリサイズできています。
[00:00:00] Starting 'resize'...
[00:00:00] Starting 'resize'...
[00:00:00] Finished 'resize' after 12 ms
[00:00:00] Finished 'resize' after 15 msおわりに
以上gulp-image-resizeを使って画像をリサイズする方法について説明しました。
いかがだったでしょうか。
画像のリサイズをしてブログに適した表示にして統一性を持たせてみましょう。
手動で画像をリサイズされている方はぜひ導入を検討してみてください。
コメント