Slide 1
Slide 1 text
Dominant Colors for
Lazy-Loading Images
Stahlstadt.js N° 9
May 19, 2016
Manuel Wieser
karriere.at
Slide 2
Slide 2 text
Manuel Wieser
Developer @ karriere.at
@manuelwieser • manu.ninja
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Motivation
Wait… Why?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Slide 10
Slide 10 text
Color Quantization
Clustering Pixels, yo!
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
const gm = require('gm');
gm('test.jpg')
.resize(1, 1)
.toBuffer('RGB', (error, buffer) => {
console.log(buffer.slice(0, 3));
});
Slide 13
Slide 13 text
#b06466
Slide 14
Slide 14 text
Lanczos Filter
[ˈlaːnt͡soʃ]
Slide 15
Slide 15 text
const gm = require('gm');
gm('test.jpg')
.colors(1)
.toBuffer('RGB', (error, buffer) => {
console.log(buffer.slice(0, 3));
});
Slide 16
Slide 16 text
#b46668
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
let pixels = [];
let pixel = [];
for (let value of buffer.values()) {
if (pixel.length >= 3) {
pixels.push(pixel);
pixel = [];
}
pixel.push(value);
}
km.clusterize(pixels, {k: 1}, (error, result) => {
result.forEach(cluster => {
return cluster.centroid.map(val => Math.round(val).toString(16)).join('');
});
});
Slide 20
Slide 20 text
k-means
Clustering
Centroids, B*tch!
Slide 21
Slide 21 text
#b46668
Slide 22
Slide 22 text
GraphicsMagick
resize()
GraphicsMagick
colors()
k-means
Clustering
GraphicsMagick
resize()
GraphicsMagick
colors()
k-means
Clustering
GraphicsMagick
resize()
GraphicsMagick
colors()
k-means
Clustering
Slide 23
Slide 23 text
#b06466 #b46668 #b46668
#598d37 #588939 #588939
#8099c0 #819bc2 #819bc2
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Data URIs
data:image/gif;base64,WHARRGARBL
Slide 26
Slide 26 text
Slide 27
Slide 27 text
GIF89a
Rocket Science from the ’80s
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
47 49 46 38 39 61 // Header
01 00 01 00 80 00 00 // Logical Screen Descriptor
FF FF FF 00 00 00 // Global Color Table
21 F9 04 00 00 00 00 00 // Graphics Control Extension
2C 00 00 00 00 01 00 01 00 00 // Image Descriptor
02 02 44 01 00 // Image Data
3B // Trailer
data:image/gif;base64,R0lGODlhAQABAIAAAP///
wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==
Slide 32
Slide 32 text
47 49 46 38 39 61 // Header
01 00 01 00 80 00 00 // Logical Screen Descriptor
FF FF FF 00 00 00 // Global Color Table
2C 00 00 00 00 01 00 01 00 00 // Image Descriptor
02 02 44 01 00 // Image Data
data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBAA==
Slide 33
Slide 33 text
var header = new Buffer('474946383961', 'hex');
var logicalScreenDescriptor = new Buffer('01000100800100', 'hex');
var imageDescriptor = new Buffer('2c000000000100010000', 'hex');
var imageData = new Buffer('0202440100', 'hex');
gm('test.jpg')
.colors(1)
.toBuffer('RGB', (error, buffer) => {
var gif = [
header,
logicalScreenDescriptor,
buffer.slice(0, 3),
new Buffer([0, 0, 0]),
imageDescriptor,
imageData
];
console.log('data:image/gif;base64,' + Buffer.concat(gif).toString('base64'));
});
Slide 34
Slide 34 text
Tiny Thumbnails
Low Quality LQIP
Slide 35
Slide 35 text
const gm = require('gm');
gm('test.jpg')
.resize(3, 3, '!')
.toBuffer('GIF', (error, buffer) => {
console.log('data:image/gif;base64,' +
buffer.toString('base64'));
});
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Conclusion
Oh, the Possibililes!
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
JOIN US
We Have Cookies … Lots of JIRA Tickets!
Slide 44
Slide 44 text
Dominant Colors for
Lazy-Loading Images
Queslons?
Manuel Wieser
@manuelwieser • manu.ninja
Slide 45
Slide 45 text
Responsive Placeholders
“My Placeholders Are Square” !
Slide 46
Slide 46 text
let svg = ``;
let source = 'data:image/svg+xml;base64,' +
new Buffer(svg, 'utf8').toString('base64');