Webサイト制作 SEO対策 システム関連 タスクランナーを導入して一括でWebP画像に変換すれば、ページスピードインサイトで指摘される「次世代フォーマットでの画像の配信」を100%回避！
-
開発グループ 山本
- 2023.03.07
こんにちは。制作部開発グループの山本です。
以前「ページスピードインサイトの速度改善」についてご紹介しましたが、
社内のデザイナーより、
- WebP画像に変換したいけどサイト全体だと数が多くて大変
- JPEG、PNG画像を一括でWebP画像に変換したい
- ページスピードインサイトの指摘（次世代フォーマットでの画像の配信）をすべて回避したい
など要望をいただきました。
そこで今回、タスクランナー（※gulp.js）を使用して、
一瞬で「サイト全体の画像をWebP画像に変換する仕組み」を構築しましたのでご紹介いたします。
※gulp.jsとは
Webサイト制作の様々なタスクを自動化することができるビルドシステムです。
必要な材料は3つだけ
- gulp.js（ガルプ）
- Node.js（ノード）
- Visual Studio Code
タスクランナー（gulp.js）の導入
■導入の流れ
（１）Node.jsのインストール
※LTS推奨版のダウンロードをおすすめいたします。
（２）Visual Studio Codeで作業するディレクトリを開きます
（３）ターミナルを開いて以下のコマンドを実行します
npm i -D gulp gulp-webp
インストールが終わると作業ディレクトリ直下に「node_modules」階層と「package-lock.json」「package.json」が生成されます。
（４）タスクの設定ファイルを作成します
- 作業ディレクトリの直下に「gulpfile.js」という名前でファイルを作成します。
- ファイルの中に以下のソース記述します。
const gulp = require('gulp');
const webp = require('gulp-webp');
const path = {
src: 'src/img/**/*.{jpeg,jpg,png}',
dest: 'dest/img',
};
const convertImage = () => {
return gulp
.src(path.src)
.pipe(
webp({
quality: 90,
})
)
.pipe(gulp.dest(path.dest));
};
const watchFiles = () => {
gulp.watch(path.src, gulp.parallel(convertImage));
};
exports.default = gulp.series(convertImage, watchFiles);
（５）タスクの実行
・ターミナルで「npx gulp」を実行すると処理が走ります。
npx gulp
gulpfile.js内の記述により初回は作業ディレクトリ内の全ての画像の変換処理が一度だけ走り、
その後画像の変更を監視する状態になります。
画像の変更が検知された場合、JPEGやPNGといった拡張子からWebPへの変換処理が走ります。
/src/img/フォルダに保存されているJPEGやPNGファイルは、自動でWebP画像に変換され/dest/img/フォルダに格納されます。
WebP画像へ変換後の圧縮率
実際にWebP画像に変換処理された画像の容量を比較します。
ページスピードインサイトの改善結果
サイト内のJPEG、PNG画像はすべてWebP画像に変換されるため、
スピードインサイトで指摘される「次世代フォーマットでの画像の配信」を100%回避することができます。
まとめ
次世代フォーマットのWebP画像は、JPEGやPNGに比べ圧縮率が高いため、
高品質の状態で読み込み速度を改善することができます。
一度タスクランナーの仕組みを導入すれば、
WebP画像への変換を自動で処理することができます。
また、
最近では「WebP画像」よりもさらに圧縮率の高い「AVIF画像」も登場いたしました。
今後ブラウザの対応状況に応じて、弊社でも調査しながら導入を検討していきたいと思います。
関連記事
2023.02.08 2023年度版 Google PageSpeed Insights（ページスピードインサイト）を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた
CMAブログをGoogle検索で見つけやすくしたい方はこちら
この記事の著者
開発グループ 山本
2012年入社
デザイナーとしてのキャリアを経て、2022年より開発グループリーダーに就任。プロジェクトマネジメントやセキュリティインシデント会議の運営を主導する。現場ではコーディングエージェントを活用したWebサイト構築を行い、デザインとAI技術を繋ぐ新たなプロセス構築をチームで研究中。
【保有資格】
PHP技術者認定検定 初級
HTML5プロフェッショナル認定試験 レベル1
CG artswebデザイナー検定
NTT.com Master☆
色彩検定2級
Illustratorクリエイター能力認定試験（エキスパート）
基本情報技術者試験（FE）
