Dominant Colors for Lazy-Loading Images

Dominant Colors for Lazy-Loading Images

9b509a6ebaf600e9198dcc3a9a075aa8?s=128

Manuel Wieser

May 19, 2016
Tweet

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

  3. None
  4. None
  5. Motivation Wait… Why?

  6. None
  7. None
  8. None
  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!

  11. None
  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

  17. None
  18. None
  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

  24. None
  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

  28. None
  29. None
  30. None
  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'));
 });
  36. None
  37. None
  38. Conclusion Oh, the Possibililes!

  39. None
  40. None
  41. None
  42. None
  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');