Guetzli.js

A JavaScript JPEG Encoder (my first emscripten)

Generate Convert Improve

Install / Use

/learn @dominikhlbg/Guetzli.js

About this skill

Quality Score

0/100

README

Guetzli.js

A JavaScript Encoder of Guetzli.

Guetzli is a JPEG encoder that aims for excellent compression density at high visual quality. Guetzli-generated images are typically 20-30% smaller than images of equivalent quality generated by libjpeg. Guetzli generates only sequential (nonprogressive) JPEGs due to faster decompression speeds they offer. Guetzli Github

View a Live Demo:
http://dominikhlbg.github.io/Guetzli.js/web/jsDemo.html
http://dominikhlbg.github.io/Guetzli.js/web/wasmDemo.html (WebAssembly => webassembly.org)

Technical info

This javascript solution of Google Guetzli Encoder for Images is compiled with Emscripten to JavaScript & WebAssembly. The source code of Guetzli has some changes else compile would not work.

Building

Install and configure Emscripten (https://github.com/kripken/emscripten)
The current version of Guetzli.js was built with emscripten 1.37.8, but works with 1.35.0, too.

The code for the demo you can found in this git, to build use follow code lines:

JavaScript:

$ ./emcc guetzli_emscripten.cc -I. -I./third_party/butteraugli/ -I./third_party -o ./web/guetzli.js -std=c++14 -s EXPORTED_FUNCTIONS="['_Guetzli_encodeRGBA','_Guetzli_encode']" -s TOTAL_MEMORY=167772160 -s ALLOW_MEMORY_GROWTH=1 -s INVOKE_RUN=0 -O3

WebAssembly:

$ ./emcc guetzli_emscripten.cc -I. -I./third_party/butteraugli/ -I./third_party -o ./web/guetzli_wasm.js -Wno-format -std=c++14 -s EXPORTED_FUNCTIONS="['_Guetzli_encodeRGBA','_Guetzli_encode']" -s TOTAL_MEMORY=167772160 -s ALLOW_MEMORY_GROWTH=1 -s INVOKE_RUN=0 -s WASM=1 -s BINARYEN_METHOD='native-wasm' -O3

Encoding API

The Guetzli source code has an own decoder for jpeg images for better analysing of optimising. Another images Gif/WebP must be load as rgba array for encoding. In the the folder "web" you found two html files with example code, but here a shorter version:

JavaScript Version (Init):

<script src="guetzli.js"></script>
<script>
    function init() {
        var Guetzli_encodeRGBA = Module.cwrap('Guetzli_encodeRGBA', 'int', ['array', 'number', 'number', 'number', 'number']);
        var Guetzli_encode = Module.cwrap('Guetzli_encode', 'int', ['number','number']);
    }
</script>
<body onload="init()">

Encode JPEG/PNG Image:

var quality=95;
FS.writeFile('in.ext', new Uint8Array(input), { encoding: "binary" });
Guetzli_encode(quality, verbose);
output=FS.readFile('out.jpg');//output: Uint8Array()

or RGBA data:

Guetzli_encodeRGBA(rgbaData, width, height, quality, verbose);
output=FS.readFile('out.jpg');//output: Uint8Array()

Legend

rgbadata => new Array(r,g,b,a, r,g,b,a, r,g,b,a, ...); width => Image width height => Image height quality => [0...100] verbose => true/false - print encoding steps into console functions => return false if successful encoded and true if error

Todos

implement javascript instance

This is my first emscripten release!

Related Skills

node-connect

347.6k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

108.4k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

347.6k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

347.6k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。