Dominant Colors for Lazy-Loading Images

Talk at Stahlstadt.js on May 19, 2016
https://github.com/Lorti/dominant-colors-snippets
https://manu.ninja/dominant-colors-for-lazy-loading-images

Transcript

1. Dominant Colors for Lazy-Loading Images Stahlstadt.js N° 9 May 19, 2016 Manuel Wieser karriere.at
2. Manuel Wieser Developer @ karriere.at
 @manuelwieser • manu.ninja
5. Motivation Wait… Why?
9. <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
 data-src="https://pinterest.com/image.jpg"
 alt="Ghost In The Shell">
10. Color Quantization Clustering Pixels, yo!
12. const gm = require('gm');
 
 gm('test.jpg') .resize(1, 1) .toBuffer('RGB', (error, buffer) => {
 console.log(buffer.slice(0, 3));
 });
13. #b06466
14. Lanczos Filter [ˈlaːnt͡soʃ]
15. const gm = require('gm');
 
 gm('test.jpg') .colors(1) .toBuffer('RGB', (error, buffer) => {
 console.log(buffer.slice(0, 3));
 });
16. #b46668
19. 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('');
 });
 });
20. k-means Clustering Centroids, B*tch!
21. #b46668
22. GraphicsMagick
 resize() GraphicsMagick
 colors() k-means Clustering GraphicsMagick
 resize() GraphicsMagick
 colors() k-means Clustering GraphicsMagick
 resize() GraphicsMagick
 colors() k-means Clustering
23. #b06466 #b46668 #b46668 #598d37 #588939 #588939 #8099c0 #819bc2 #819bc2
25. Data URIs data:image/gif;base64,WHARRGARBL
26. <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
 data-src="https://pinterest.com/image.jpg"
 alt="Ghost In The Shell">
27. GIF89a Rocket Science from the ’80s
31. 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==
32. 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==
33. 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'));
 });
34. Tiny Thumbnails Low Quality LQIP
35. const gm = require('gm');
 gm('test.jpg')
 .resize(3, 3, '!')
 .toBuffer('GIF', (error, buffer) => {
 console.log('data:image/gif;base64,' + 
 buffer.toString('base64'));
 });
38. Conclusion Oh, the Possibililes!
43. JOIN US We Have Cookies … Lots of JIRA Tickets!
44. Dominant Colors for Lazy-Loading Images Queslons? Manuel Wieser
 @manuelwieser • manu.ninja
45. Responsive Placeholders “My Placeholders Are Square” !
46. let svg = `<svg xmlns="http://www.w3.org/2000/svg" 
 viewBox="0 0 ${width} ${height}"></svg>`; 
 let source = 'data:image/svg+xml;base64,' + new Buffer(svg, 'utf8').toString('base64');