Progressive image rendering Render Conf 2017 José M. Pérez · Web dev at Spotify @jmperezperez
A presentation at Render Conf 2017 in March 2017 in Oxford, UK by José M. Pérez
Progressive image rendering Render Conf 2017 José M. Pérez · Web dev at Spotify @jmperezperez
Images on the web
To use or not to use images
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; }
Optimise your images really
Picture element and srcset 2 columns 1 column 3 columns
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">
2nd issue: Lazy loading
Combine regular images and lazy-loaded ones
How to lazy load: Basic approach For all images, check whether they are in the viewport (or close enough). If they are, request it. Repeat this onScroll and onResize
How to lazy load: IntersectionObserver Don't bind to the scroll event. Subscribe to an event triggered when the image enters the rendered area Supported in Chrome, Opera. In development in Firefox and Edge. Very easy to use as another strategy in your lazy loading library.
IntersectionObserver
What to show while the image is loading
Alternatives
Examples of solid color
style="border:0"
Examples of Progressive Image Loading
Medium
How it's done
Use <div> to render the image Request small thumbnail Draw thumbnail to <canvas/> and apply blur effect Request large image Render large image and hide <canvas/>
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 do users perceive it? Jason @lang Follow Did @Medium recently add a new image loading fadein? I noticed it this morning on mobile and just now again on web. Looks nice. 8:05 PM - 29 Feb 2016 นาธารจะ านแคล @zartre Follow @Medium's articles (although full of high-res images) load up very fast - 3:38 AM - 28 Mar 2015
or maybe not? Harris Rodis @harrisrodis Follow I don't know about you but I don't like a bit those blurry (still loading...) images on Medium. Very distracting. 5:40 PM - 29 Dec 2015 James Young @welcomebrand Follow That blurry image preloading thing on Medium - is it just me or does it make all images load extremely slowly now? 10:53 AM - 5 Feb 2016
Source: wpexplorer.com/optimize-images-wordpress-guide
With the Progressive JPEG method [...] cognitive fluency is inhibited and the brain has to work slightly harder to make sense of what is being displayed. — From Progressive image rendering: Good or evil?
Reliable? Damien @Eramdam Follow I'm seeing this more and more on Medium posts. Maybe the whole "blur the pictures" stuff isn't a good idea… 7:44 PM - 8 Jan 2016 Sara Soueidan @SaraSoueidan Follow This @Medium page is fully loaded on my slow connection. Very pretty with those stupid image effects, isn’t it? 2:07 PM - 28 Nov 2015 3 18
Facebook - Inlining thumbnail image in payload Source: The technology behind preview photos
Facebook - Inlining thumbnail image in payload Unfortunately, the standard JPEG header is hundreds of bytes in size. In fact, the JPEG header alone is several times bigger than our entire 200-byte budget. However, excluding the JPEG header, the encoded data payload itself was approaching our 200 bytes.
Facebook - Inlining thumbnail image in payload Header (mainly Quantization Table and Huffman Table) Compressed Data Client (mobile app) GraphQL
Generating tiny thumbnails JPG 464 B 532 B 428 B 409 B 456 B 692 B WebP 112 B 154 B 106 B 96 B 116 B 202 B
Generating tiny thumbnails JPG 464 B 532 B 428 B 409 B 456 B 692 B WebP 112 B 154 B 106 B 96 B 116 B 202 B
Getting creative with SVGs
Source: polygon.com/a/ps4-review
How it works HTML CSS JS Result window.onload = function() { var path = document.querySelector('path'); var length = path.getTotalLength(); // Clear any previous transition path.style.transition = path.style.WebkitTransition = 'none'; // Set up the starting positions path.style.strokeDasharray = length + ' ' + length; path.style.strokeDashoffset = length; // Trigger a layout so styles are calculated & the browser // picks up the starting position before animating path.getBoundingClientRect(); // Define our transition path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 7s ease-in-out'; // Go! path.style.strokeDashoffset = '0'; }; More info: jakearchibald.com/2013/animated-line-drawing-svg EDIT ON
Drawing bitmap images Canny Edge Detector
Drawing bitmap images Source: jmperezperez.com/contour
How to draw bitmaps 1. Find edges with canny edge detector 2. Create lines 3. Use JS and SVG to animate <svg> <polyline <polyline <polyline ... <polyline </svg> points="51,1 61,1 61,2 56,4 56,3"/> points="52,1 50,2 51,3 50,4 50,9 46,10 46,8 48,8 48,9"/> points="61,4 61,5 58,6"/> points="62,58 61,59 61,60 50,62 50,61 51,61"/>
Should we do this? Just because you can it doesn't mean you should
Summary Reduce requests Choose the right format and optimise Embrace responsive images Try to lazy load Innovate!
The Web is fun.
Thanks! @jmperezperez
