@ziflow/gulp-inline-images

Gulp plugin for converting linked HTML images into base64 encoded inline images. Works with local and remote files.

Usage no npm install needed!

<script type="module">
  import ziflowGulpInlineImages from 'https://cdn.skypack.dev/@ziflow/gulp-inline-images';
</script>

README

gulp-inline-images

Why

If you've ever run Google PageSeed Insights or similar tests, you might have seen a warning about above-the-fold content not being delivered in the first request. What if said content is an image? Inline it!

Although there is other existing plugins for this, they only support local files. This Implementation supports remote images from the web. In addition, it gives you control over what images in each file are processed.

Install

$ npm i @ziflow/gulp-inline-images --save-dev

Implement

var gulp = require('gulp');
var inlineImages = require('@ziflow/gulp-inline-images');

gulp.task('inline-images', function(){
    return gulp.src(['view/*.html'])
    .pipe(inlineImages({/* options */}))
    .pipe(gulp.dest('/public/'));
});

options

Name Type Default description
selector String 'img[src]' Selection of elements to process
attribute String 'src' Attribute name for source URL
basedir String Source file dir Base directory of local images

inline attribute

To limit this plugin to specific img elements add an inline attribute to only the img tags you want to process.

<img src="..." inline>

To prevent the plugin from processing certain img elements add an !inline attribute.

<img src="..." !inline>

These attributes will not be in the output. If no img tags with the inline attribute are found, all img tags will be processed, unless the !inline tag is present.