PNG File size can be a hassle. This library provides transparency support to JPEG images allowing you to get lightweight images and speed up your page load.
AJPEG GULP
encoder allows you to split PNG file into 2 separate files :
- a JPEG file without transparency that you can compress
- a PNG file containing the alpha channel only
The decoder loads the 2 files and fast restore the alpha channel using native html canvas
composite operation.
![]() |
![]() |
![]() |
Original 88ko | Compressed 19ko | Alpha 9ko |
https://mbossan.github.io/AJPEG/
$ npm install --save-dev ajpeg
Make sure GraphicsMagick is installed on your system and properly set up in your PATH
.
- Mac OS X (using Homebrew):
brew install graphicsmagick
- Ubuntu:
apt-get install graphicsmagick
const gulp = require('gulp'),
ajpeg = require('ajpeg');
gulp.task('default', function () {
return gulp.src("src/*.png")
.pipe(ajpeg(60))
.pipe(gulp.dest('dist/'));
});
Type: number
Default: 60
JPEG compression from 1 to 100
Include the library
<script src="decoder/dist/ajpeg.min.js" type="application/javascript"></script>
OR
const AJPEG = require('decoder/dist/ajpeg.min');
Load into a Canvas
new AJPEG().load("assets/rp1_00000.jpg", function () {
document.body.appendChild(this.toCanvas());
});
Load into an Image
new AJPEG().load("assets/rp1_00000.jpg", function () {
var newImg = document.createElement('img');
newImg.src = this.toDataURL();
document.body.appendChild(newImg);
});
Autoload via html attribute parsing
<img alpha-src="assets/rp1_00000.jpg"/>
<script>
AJPEG.parse();
</script>
MIT ©