gulp-base64でスタイルシートに画像データを埋め込む術

こんばんは。春雨を買いました、きたけーです。

スタイルシートのurl関数で画像を指定すると、スタイルシートを解釈するタイミングでHTTPリクエストが発生して、ページの表示に時間がかかります。

これを改善する方法として、画像のデータをBASE64形式にして、スタイルシートにDataURIとして埋め込む方法があります( ただ、スタイルシート自体のサイズも大きくなるので状況によります )。

gulpでは、gulp-base64( Wenqer/gulp-base64 · GitHub )というプラグインがあるので、これを使うとよいでしょう。こんなかんじです。

var gulp = require('gulp');
var base64 = require('gulp-base64');

gulp.task('build', function () {
    gulp.src('./stylesheets/*.css')
        .pipe(base64())
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./dist'));
});

他にもオプションで変換する対象の拡張子やデータサイズの上限を指定することができます。

gruntにも jreading/grunt-encode-images · GitHub や ahomu/grunt-data-uri · GitHub などの同様のプラグインがあるので、つかっているタスクランナーに合わせて選択するとよさそうですね。