SQIP does SVG-based LQIP image creation

… because even blurred preview images need to look good

Overview

SQIP is a go implementation of Tobias Baldauf‘s SVG-based LQIP technique.

LQIP (Low Quality Image Placeholders) boils down to this:

load the page initially with low quality images
once the page loaded (e.g. in the onload event), replace them with full quality images

So instead of waiting for the final image to be rendered, we can serve a highly compressed image first, and then switch to the large one.

SQIP is an evolution of the classic LQIP technique: it makes use of Primitive to generate a SVG consisting of several simple shapes that approximate the main features visible inside the image, optimizes the SVG using minify and adds a Gaussian Blur filter to it.

This produces a SVG placeholder which weighs in at only ~800-1000 bytes, looks smooth on all screens and provides an visual cue of image contents to come.

Tobias Baldauf‘s project is written in js and depends on an installed version of node, go, primitive and multiple npm modules. This project aims to minimize the dependencies down to exactly one — this go package.

Installation

Get the cli app directly to your $GOPATH/bin with

go get -u github.com/denisbrodbeck/sqip/cmd/sqip

Import the library with

import "github.com/denisbrodbeck/sqip"

CLI usage

# Generate a SVG placeholder and print an example <img> tag to stdout
sqip input.png

# Save the placeholder SVG to a file instead of printing the <img> to stdout
sqip -o output.svg input.png

# Customize the number of primitive SVG shapes (default=8) to influence bytesize or level of detail
sqip -n 4 input.jpg

All available flags:

sqip [-n <int>] [-o <path>] [options...] <file>
Flags:
  -n  <int>     number of primitive SVG shapes (default: 8)
  -o  <path>    save the placeholder SVG to a file (default: empty)
Options:
  -mode  <int>  shape type (default: 0)
  -alpha <int>  color alpha (use 0 to let the algorithm choose alpha for each shape) (default: 128)
  -bg    <hex>  background color as hex (default: avg)

API usage

Here is an example app:

package main

import (
	"log"
	"runtime"
	"github.com/denisbrodbeck/sqip"
)

func main() {
	in := "path/to/image.png"   // input file
	out := "path/to/image.svg"  // output file
	workSize := 256             // large images get resized to this - higher size grants no boons
	count := 8                  // number of primitive SVG shapes
	mode := 1                   // shape type
	alpha := 128                // alpha value
	repeat := 0                 // add N extra shapes each iteration with reduced search (mostly good for beziers)
	workers := runtime.NumCPU() // number of parallel workers
	background := ""            // background color (hex)

  // create a primitive svg
	svg, width, height, err := sqip.Run(in, workSize, count, mode, alpha, repeat, workers, background)
	if err != nil {
		log.Fatal(err)
	}
	// save svg to file
	if err := sqip.SaveFile(out, svg); err != nil {
		log.Fatal(err)
	}
	// create example img tag
	tag := sqip.ImageTag(out, sqip.Base64(svg), width, height)
	log.Print(tag)
}

Credits

Michael Fogleman and his awesome primitive project
José Manuel Pérez for his awesome explanation of various image loading techniques
sqip for the research and initial nodejs implementation

The Go gopher was created by Denis Brodbeck, based on original artwork from Renee French and Takuya Ueda.

License

The MIT License (MIT) — Denis Brodbeck. Please have a look at the LICENSE for more details.

denisbrodbeck / sqip