Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dominant Colors for Lazy-Loading Images

Dominant Colors for Lazy-Loading Images

Manuel Wieser

May 19, 2016
Tweet

More Decks by Manuel Wieser

Other Decks in Programming

Transcript

  1. Dominant Colors for
    Lazy-Loading Images
    Stahlstadt.js N° 9
    May 19, 2016
    Manuel Wieser
    karriere.at

    View full-size slide

  2. Manuel Wieser
    Developer @ karriere.at

    @manuelwieser • manu.ninja

    View full-size slide

  3. Motivation
    Wait… Why?

    View full-size slide

  4. data-src="https://pinterest.com/image.jpg"

    alt="Ghost In The Shell">

    View full-size slide

  5. Color Quantization
    Clustering Pixels, yo!

    View full-size slide

  6. const gm = require('gm');


    gm('test.jpg')
    .resize(1, 1)
    .toBuffer('RGB', (error, buffer) => {

    console.log(buffer.slice(0, 3));

    });

    View full-size slide

  7. Lanczos Filter
    [ˈlaːnt͡soʃ]

    View full-size slide

  8. const gm = require('gm');


    gm('test.jpg')
    .colors(1)
    .toBuffer('RGB', (error, buffer) => {

    console.log(buffer.slice(0, 3));

    });

    View full-size slide

  9. 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('');

    });

    });

    View full-size slide

  10. k-means
    Clustering
    Centroids, B*tch!

    View full-size slide

  11. GraphicsMagick

    resize()
    GraphicsMagick

    colors()
    k-means
    Clustering
    GraphicsMagick

    resize()
    GraphicsMagick

    colors()
    k-means
    Clustering
    GraphicsMagick

    resize()
    GraphicsMagick

    colors()
    k-means
    Clustering

    View full-size slide

  12. #b06466 #b46668 #b46668
    #598d37 #588939 #588939
    #8099c0 #819bc2 #819bc2

    View full-size slide

  13. Data URIs
    data:image/gif;base64,WHARRGARBL

    View full-size slide

  14. data-src="https://pinterest.com/image.jpg"

    alt="Ghost In The Shell">

    View full-size slide

  15. GIF89a
    Rocket Science from the ’80s

    View full-size slide

  16. 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==

    View full-size slide

  17. 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==

    View full-size slide

  18. 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'));

    });

    View full-size slide

  19. Tiny Thumbnails
    Low Quality LQIP

    View full-size slide

  20. const gm = require('gm');

    gm('test.jpg')

    .resize(3, 3, '!')

    .toBuffer('GIF', (error, buffer) => {

    console.log('data:image/gif;base64,' + 

    buffer.toString('base64'));

    });

    View full-size slide

  21. Conclusion
    Oh, the Possibililes!

    View full-size slide

  22. JOIN US
    We Have Cookies … Lots of JIRA Tickets!

    View full-size slide

  23. Dominant Colors for
    Lazy-Loading Images
    Queslons?
    Manuel Wieser

    @manuelwieser • manu.ninja

    View full-size slide

  24. Responsive Placeholders
    “My Placeholders Are Square” !

    View full-size slide

  25. let svg = `viewBox="0 0 ${width} ${height}">`;

    let source = 'data:image/svg+xml;base64,' +
    new Buffer(svg, 'utf8').toString('base64');

    View full-size slide