Progressive image rendering

Render Conf 2017

José M. Pérez · Web dev at Spotify

Wrong way of hiding images (1/2)

<img src="example.png"> <!-- it'll be requested -->

@media (max-width: 480px) {
    img {
        display: none;
    }
}

Wrong way of hiding images (2/2)

<body>
    <section class="section-1">
        <p>This is the current section</p>
        <img src="example-1.png">
    </section>
    <section class="section-2 hidden">
        <p>This section might or might not be shown later</p>
        <img src="example-2.png"> <!-- it'll be requested -->
    </div>
</body>

.hidden {
    display: none;
}

1st issue: Keeping in sync markup and CSS

<img sizes="(max-width: 30em) 100vw,
            (max-width: 50em) 50vw,
            calc(33vw - 100px)"
     srcset="swing-200.jpg 200w,
             swing-400.jpg 400w,
             swing-800.jpg 800w,
             swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

Markup Overview

<figure>
  <div>
    <div/> <!-- this div keeps the aspect ratio so
                the placeholder doesn't collapse -->
    <img/> <!-- this is a tiny image with a small
                resolution (e.g. ~27x17) and low quality -->
    <canvas/> <!-- takes the above image and applies a blur filter -->
    <img/> <!-- the large image to be displayed -->
    <noscript/> <!-- fallback for no JS -->
  </div>
</figure>

How to draw bitmaps

Find edges with canny edge detector
Create lines
Use JS and SVG to animate

<svg>
  <polyline points="51,1 61,1 61,2 56,4 56,3"/>
  <polyline points="52,1 50,2 51,3 50,4 50,9 46,10 46,8 48,8 48,9"/>
  <polyline points="61,4 61,5 58,6"/>
  ...
  <polyline points="62,58 61,59 61,60 50,62 50,61 51,61"/>
</svg>

Progressive image rendering Render Conf 2017 José M. Pérez · Web dev at Spotify @jmperezperez Everybody loves fast sites Why images are important What we can do to reduce their impact Tradeoffs Myself