静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > タスクランナーを導入して一括で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 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

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

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top