# gulp-inline-images

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

Latest version **1.4.0** (published 2024-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-inline-images
pnpm add gulp-inline-images
yarn add gulp-inline-images
bun add gulp-inline-images
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2024-03-03 |
| First published | 2017-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Austin Kurpuis |
| Maintainers | blackmarket |
| Keywords | gulp, inline, html, img, tag, base64, encoded, gulpplugin |

## Links

- npm: https://www.npmjs.com/package/gulp-inline-images
- Repository: https://github.com/imaustink/gulp-inline-images
- Homepage: https://github.com/imaustink/gulp-inline-images#readme
- Issues: https://github.com/imaustink/gulp-inline-images/issues
- npm.io page: https://npm.io/package/gulp-inline-images

## Dependencies (4)

- [gulp](https://npm.io/package/gulp.md) ^3.9.1
- [cheerio](https://npm.io/package/cheerio.md) ^0.22.0
- [through2](https://npm.io/package/through2.md) ^2.0.3
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.8

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.4.0 (latest) — 2024-03-03
- 1.2.6 — 2017-03-06
- 1.2.5 — 2017-03-06
- 1.2.4 — 2017-03-05
- 1.2.3 — 2017-03-05
- 1.2.2 — 2017-03-05
- 1.2.1 — 2017-03-04
- 1.2.0 — 2017-03-04
- 1.1.0 — 2017-03-04
- 1.0.0 — 2017-03-04

## README

# gulp-inline-images

## Why
If you've ever run [Google PageSeed Insights](https://developers.google.com/speed/pagespeed/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 gulp-inline-images --save-dev```

## Implement
```javascript
var gulp = require('gulp');
var inlineImages = require('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   |
| getHTTP   | ```Boolean```| false            | Inline 'http' images             |

## inline attribute
To limit this plugin to specific img elements add an ```inline``` attribute to only the img tags you want to process.
```html
<img src="..." inline>
```
To prevent the plugin from processing certain img elements add an ```!inline``` attribute.
```html
<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.

---
_Source: https://npm.io/package/gulp-inline-images · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._