BLOG

CMAブログ

株式会社シーエムエー ホームCMAブログタスクランナーを導入して一括でWebP画像に変換すれば、ページスピードインサイトで指摘される「次世代フォーマットでの画像の配信」を100%回避!

ホームページ制作 SEO対策 システム関連 タスクランナーを導入して一括でWebP画像に変換すれば、ページスピードインサイトで指摘される「次世代フォーマットでの画像の配信」を100%回避!

こんにちは。制作部開発グループの山本です。

以前「ページスピードインサイトの速度改善」についてご紹介しましたが、
社内のデザイナーより、

  • WebP画像に変換したいけどサイト全体だと数が多くて大変
  • JPEG、PNG画像を一括でWebP画像に変換したい
  • ページスピードインサイトの指摘(次世代フォーマットでの画像の配信)をすべて回避したい

など要望をいただきました。

そこで今回、タスクランナー(※gulp.js)を使用して、
一瞬で「サイト全体の画像をWebP画像に変換する仕組み」を構築しましたのでご紹介いたします。

※gulp.jsとは
Webサイト制作の様々なタスクを自動化することができるビルドシステムです。

必要な材料は3つだけ

  • gulp.js(ガルプ)
  • Node.js(ノード)
  • Visual Studio Code

タスクランナーを導入してJPEGやPNGを一括でwebp画像に変換する方法

タスクランナー(gulp.js)の導入

■導入の流れ

(1)Node.jsのインストール

https://nodejs.org/ja/

※LTS推奨版のダウンロードをおすすめいたします。

Node.jsのインストール画面

Node.jsのインストール画面

(2)Visual Studio Codeで作業するディレクトリを開きます

Visual Studio Codeの画面

(3)ターミナルを開いて以下のコマンドを実行します

npm i -D gulp gulp-webp

Visual Studio Codeの画面

インストールが終わると作業ディレクトリ直下に「node_modules」階層と「package-lock.json」「package.json」が生成されます。

Visual Studio Codeの画面

(4)タスクの設定ファイルを作成します

  • 作業ディレクトリの直下に「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);

(5)タスクの実行

・ターミナルで「npx gulp」を実行すると処理が走ります。

npx gulp

Visual Studio Codeの画面

gulpfile.js内の記述により初回は作業ディレクトリ内の全ての画像の変換処理が一度だけ走り、
その後画像の変更を監視する状態になります。

タスク監視モードの画面

画像の変更が検知された場合、JPEGやPNGといった拡張子からWebPへの変換処理が走ります。
/src/img/フォルダに保存されているJPEGやPNGファイルは、自動でWebP画像に変換され/dest/img/フォルダに格納されます。

webp変換処理後の階層

WebP画像へ変換後の圧縮率

実際にWebP画像に変換処理された画像の容量を比較します。

高品質の状態で約4分の1に圧縮

ページスピードインサイトの改善結果

サイト内のJPEG、PNG画像はすべてWebP画像に変換されるため、
スピードインサイトで指摘される「次世代フォーマットでの画像の配信」を100%回避することができます。

ページスピードインサイトでの指摘を100%回避

まとめ

次世代フォーマットのWebP画像は、JPEGやPNGに比べ圧縮率が高いため、
高品質の状態で読み込み速度を改善することができます。

一度タスクランナーの仕組みを導入すれば、
WebP画像への変換を自動で処理することができます。

また、

最近では「WebP画像」よりもさらに圧縮率の高い「AVIF画像」も登場いたしました。
今後ブラウザの対応状況に応じて、弊社でも調査しながら導入を検討していきたいと思います。

関連記事

2023.02.08 2023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

https://www.akindo2000.net/blog/google-pagespeed-insights/

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2024/08/02Google広告がX(旧:Twitter)に表示されている!?~配信設定の方法もご紹介~

  • posted on 2019/12/02FacebookのAudience Networkってどこに配信されるの?ターゲティング設定と動画広告の相性抜群でクリック率が静止画広告の2倍にUP!

  • posted on 2018/10/31無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ!Webサイトのデザインテイストに合わせるやり方とは!?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

おすすめタグ