GulpでJPG,PNG画像を基に次世代フォーマット[WebP]をラクラク作成

【WEBページの6割は画像が占める】

世界の大半のWEBページは、画像で表現されております。

またウェブページ読み込みのために転送されるデータの 60% は、JPEG、PNG、GIF の画像形式が主です。

しかし画像は、ファイルサイズが大きくなることが多いため通信速度が遅くなり、読み込みが遅くなりやすいです。

スマホが急速に普及し、モバイルでのインターネット利用者がパソコンを上回り、今のインターネットでは表示が遅いウェブページは離脱率が高くなります。

そのため「ページ読み込み速度」を速めると離脱率を下げ、SEO的にも有利になると言われています。

【では画像を使わなければOK？】

画像がないウェブページは味気ないし、人間は文字のみのレイアウトに疲れてしまいます。

また画像をページに追加したり、既存の画像を大きくしたりすることで、コンバージョン率が上がることが証明されています。

今後、ネット上で今後画像が使われなくなるとはないでしょう。

【画像圧縮を行う方がより良い】

読み込みを遅らせることが可能な他の要素よりも速く読み込まれるよう、重要な画像の優先度を高くする必要があります。

一般的な画像の最適化には圧縮が可能となります。

また、WEBページの表示速度を計れる「Page Speed Insights」では表示速度を高速化するために「次世代フォーマットでの画像配信」というものを推奨するようになっています。

【WebP】 採用

そこで僕が実際に使用しているのは【WebP】（ウェッピー）、ファイルの拡張子は .webpです。

これを採用している理由は、米Googleが開発している静止画フォーマットで、Google推しと推奨されるからです。

【WebP】の作成方法

・現段階では、photoShopやlightroomなどの画像ソフトでwebPファイルを書き出すことができません。

・普段、ホームページ制作時に使用しているのはタスクマネージャーの「gulp」を利用しています。

上記の条件により、gulpでのwebp作成方法を検索し学び、ここにメモ用として記します。

【gulp】での設定方法

gulpが入っていれば、至極簡単です。

必要なプラグインをインストール、それを有効にし次はどの画像からwebpを作成するのかを決め、webpの保存先を指定するだけです。

※ここではgulpのインストールは割愛します。
gulpに関しましては、下記URLをご参照ください。

絶対つまずかないGulp 4入門（2019年版） インストールとSassを使うまでの手順

webpについての参考サイト：次世代画像フォーマット「WebP（ウェッピー）」を実際に使ってみよう

プラグイン名：gulp-webp

①インストール方法：

参考サイト：Gulpでラクに画像を圧縮！

とにかく手軽に圧縮したい
圧縮とともにWebPも一緒に生成したい
導入方法はNode.jsがインストールされている環境でプラグインをインストールします。

https://tech-blog.sitateru.com/2018/11/gulp.html

$ npm install gulp gulp-tinypng-compress gulp-webp

②プラグインを有効

// 画像圧縮
var webp = require(‘gulp-webp’);

③webp画像の設定

// 圧縮前と圧縮後のディレクトリを定義  
var paths = {
   imgSrcDir:  './images/',
   imgDstDir:  '../../../../images/'
 }; 
gulp.task('webp', function () {
     gulp.src(paths.imgSrcDir + "/*/.{svg,gif,png,jpg,jpeg}")
         .pipe(webp())
         .pipe(gulp.dest(paths.imgDstDir));
 });

ちなみに私の設定は上記のようになっており、imagesフォルダを上位フォルダに位置しています。wordpressでいうと、画像フォルダは[wp-content][themes][theme_name][images]に位置しております。

つまり、[wp-content][themes][theme_name][images]の画像を/images/フォルダにwebpとして保存するように設定しています。

【実際の画像表示の記述】

僕は悩んだ末、下記の記述をしています。

全てのブラウザがwebpに対応していればよいですが、残念ながらまだ全てのブラウザに対応していません。

なのでスクリプト上では「webp」が対応しているブラウザにはwebpを表示し、対応していないブラウザには「jpg」を表示するようにしています。

また、スマホ用に＜source＞＜img＞タグを使用することにより画面サイズに基づいて適切な処理し、サイズ変更することによって画像デコードのコストを削減するようにしています。

<picture>
  <source srcset="/images/test.webp" type="image/webp">
  <img 
    src="/images/test.jpg" alt="test" 
    srcset="/images/test.jpg 900w, 
    /images/test-768.jpg 768w, 
    /images/test-320.jpg 320w," 
    sizes="(max-width: 768px) 100vw, 768px">
</picture>

【最後に】

webpに関する僕が使用している「gulp」と「sass」の標準設定を記載致します。

【gulp】

<!-- wp:paragraph -->
<p>//gulp<br> var gulp = require('gulp');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//sassコンパイル<br>
var sass = require('gulp-sass');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//スタイルジェネレーター<br>
var styledocco = require('gulp-styledocco');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//ベンダープレフィックス<br>
var pleeease = require('gulp-pleeease');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//sassエラー回避<br>
var plumber = require('gulp-plumber');<br>
var changed      = require( 'gulp-changed' );</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>// 画像圧縮<br>
var imagemin = require('gulp-imagemin');<br>
var imageminJpg = require('imagemin-jpeg-recompress');<br>
var imageminPng = require('imagemin-pngquant');<br>
var imageminGif = require('imagemin-gifsicle');<br>
var svgmin = require('gulp-svgmin');<br>
var webp = require('gulp-webp');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//CSS圧縮<br>
var cssmin = require('gulp-cssmin');<br>
//jsの圧縮<br>
var uglify = require("gulp-uglify");<br>
//ファイル名を変更可能に<br>
var rename = require('gulp-rename');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>// 圧縮前と圧縮後のディレクトリを定義<br>
var paths = {<br>
  sassSrcDir:  './sass/',<br>
  sassDstDir:  './min/css',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>cssSrcDir:  './min/css/',<br>
  cssDstDir:  '../../../../css/',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>jsSrcDir:  './min/js/',<br>
  jsDstDir:  '../../../../js/',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>imgSrcDir:  './images/',<br>
  imgDstDir:  '../../../../images/'<br>
};</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//SASSをコンパイルしてCSSを作成<br>
gulp.task('sass', function() {<br>
    return gulp.src(paths.sassSrcDir + '*.scss')<br>
    .pipe(plumber())<br>
    .pipe(sass({<br>
      style: 'expanded',<br>
      compass: true<br>
    }))</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>//prefix  
.pipe(pleeease({
  autoprefixer: {
    browsers: ['last 2 versions']
  },
  minifier: false
}))
.pipe(gulp.dest(paths.sassDstDir));</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>// CSSを圧縮<br>
gulp.task('css', function() {<br>
  return gulp.src(paths.cssSrcDir + '*.css')</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>.pipe(cssmin())<br>
  .pipe(gulp.dest(paths.cssDstDir));<br>
});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//jsを圧縮<br>
gulp.task('js', function() {  <br>
    return gulp.src(paths.jsSrcDir + '*.js')<br>
    .pipe(uglify({<br>
      output:{<br>
        comments: /^!/<br>
      }<br>
    }))<br>
    .pipe(gulp.dest(paths.jsDstDir))<br>
});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>// img画像の圧縮タスク<br>
gulp.task('imagemin', function(){<br>
    var srcGlob = paths.imgSrcDir + '*<em>/</em>.+(jpg|jpeg|png|gif)';<br>
    return gulp.src( srcGlob )</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.pipe(changed( paths.imgDstDir ))
.pipe(imagemin([
    imageminPng(),
    imageminJpg(),
    imageminGif({
        interlaced: false,
        optimizationLevel: 3,
        colors:180
    })
]
))
.pipe(gulp.dest( paths.imgDstDir ));</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>// svg画像の圧縮タスク<br>
gulp.task('svgmin', function(){<br>
    var srcGlob = paths.imgSrcDir + '*<em>/</em>.+(svg)';<br>
    return gulp.src( srcGlob )<br>
    .pipe(changed( paths.imgDstDir ))<br>
    .pipe(svgmin())<br>
    .pipe(gulp.dest( paths.imgDstDir ));<br>
});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>gulp.task('webp', function () {<br>
    gulp.src(paths.imgSrcDir + "/*<em>/</em>.{svg,gif,png,jpg,jpeg}")<br>
        .pipe(webp())<br>
        .pipe(gulp.dest(paths.imgDstDir));<br>
});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>gulp.task('default', function () {<br>
  gulp.watch(paths.sassSrcDir + '<strong>/<em>.scss',  gulp.task('sass'));
  gulp.watch(paths.sassSrcDir + '</em></strong><em>/</em>.scss',  gulp.task('css'));<br>
  gulp.watch(paths.jsSrcDir   + '<strong>/<em>.js',    gulp.task('js'));
  gulp.watch(paths.imgSrcDir  + '</em></strong><em>/</em>',       gulp.task('imagemin'));<br>
  gulp.watch(paths.imgSrcDir  + '<strong>/<em>',       gulp.task('svgmin'));
  gulp.watch(paths.imgSrcDir  + '</em></strong><em>/</em>',       gulp.task('webp'));<br>
});</p>
<!-- /wp:paragraph -->

【sass：mixins】

 @mixin webp-background($img,
                        $color: transparent,
                        $repeat: repeat,
                        $attachment: scroll,
                        $position: center,
                        $size: auto,
                        $type: '.png') {
     background: $color url('/images/#{$img}.webp') $repeat $attachment $position / $size;
     .no-webp & {
         background-image: url('/images/#{$img}#{$type}');
     }
 }

【sass】

 @include webp-background(
   $img: 'test.jpg', 
   $type: '.jpg'
 );

ご参考になれば幸いです。

Webサイトのデータ量を削減し「ページ読み込み速度をいかに上げるか」が今後のWEB制作者の課題となります。