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

Progressive Image Rendering

Progressive Image Rendering

From my talk at Frontfest 2017 in Moscow, Russia.

José M. Pérez

December 03, 2017
Tweet

More Decks by José M. Pérez

Other Decks in Technology

Transcript

  1. by - not making requests - optimizing images - rendering

    previews PROGRESSIVE IMAGE RENDERING @jmperezperez
  2. Version A FrontFest 2017 Speakers & Schedule 0.0s 0.3s 0.6s

    0.9s 1.2s Version B FrontFest 2017 Speakers & Schedule 0.0s 0.3s 0.6s 0.9s 1.2s FrontFest 2017 Speakers & Schedule FrontFest 2017 FrontFest 2017 PROGRESSIVE IMAGE RENDERING @jmperezperez
  3. PROGRESSIVE IMAGE RENDERING @jmperezperez SpeedIndex = 1 − ∫ 0

    end 100 V C end = end time in milliseconds VC = % visually complete
  4. Techniques to improve perceived performance Server-side rendering Critical CSS Async

    JS Async fonts PROGRESSIVE IMAGE RENDERING @jmperezperez
  5. right format gif | png | jpg | webp |

    <the_next_thing> PROGRESSIVE IMAGE RENDERING @jmperezperez <picture> <source type="image/webp" srcset="2700x1209/my-image.webp 2700w, 1024x1024/my-image.webp 1024w, 600x600/my-image.webp 600w" sizes="100vw" /> <source srcset="2700x1209/my-image.jpg 2700w, 1024x1024/my-image.jpg 1024w, 600x600/my-image.jpg 600w" sizes="100vw" /> <img class="rsImg" src="600x600/my-image.jpg" alt="My beautiful image" /> </picture>
  6. <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"

    srcset="red-square-200.jpg 200w, red-square-400.jpg 400w, red-square-800.jpg 800w, red-square-1600.jpg 1600w" src="red-square-400.jpg" alt="Red Square"> PROGRESSIVE IMAGE RENDERING @jmperezperez Challenge: Keeping in sync markup and CSS Example R E S P O N S I V E I M A G E S
  7. // load image when it's within 100px of the viewport

    const options = { rootMargin: '100px' } const callback = entries => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { // load image } }); }; const observer = new IntersectionObserver(callback, options); observer.observe(document.querySelector('.lazy-img')); PROGRESSIVE IMAGE RENDERING @jmperezperez Example I N T E R S E C T I O N O B S E R V E R
  8. class LazyImage extends React.Component { constructor() { this.observer = new

    IntersectionObserver(entries => { if (entries[0].intersectionRatio > 0) { // load! } }); this.element = null; /* render() will set it through a ref */ } componentDidMount() { this.observer.observe(this.element); } componentWillUnmount() { this.observer.unobserve(this.element); } ... } PROGRESSIVE IMAGE RENDERING @jmperezperez Encapsulating in React I N T E R S E C T I O N O B S E R V E R
  9. // Image loading with predecoding const img = new Image();

    img.src = "image.jpg"; img.decode().then(() => { document.body.appendChild(img); }).catch(() => { throw new Error('Could not load/decode big image.'); }); PROGRESSIVE IMAGE RENDERING @jmperezperez Using image.decode() I M A G E D E C O D I N G Add an image to the DOM without causing a decoding delay. Track the proposal on https://github.com/whatwg/html/issues/1920 TIP 4
  10. Options PROGRESSIVE IMAGE RENDERING P L A C E H

    O L D E R S Nothing Placeholder Solid colour or gradient Progressive image loading or "Blur-up" @jmperezperez
  11. PROGRESSIVE IMAGE RENDERING @jmperezperez Markup - Eg Medium <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>
  12. PROGRESSIVE IMAGE RENDERING @jmperezperez <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> 1. Find edges with canny edge detector 2. Create lines 3. Use JS and SVG to animate How to draw bitmaps
  13. PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Shapes SVG - 10

    shapes SVG - 100 shapes Original 0.74kB 3.5kB 101kB
  14. PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Shapes + Blur SVG

    - 10 shapes + Blur SVG 100 shapes + Blur (JPEG or WebP) + Blur 0.8kB 3.6kB 0.5kB (JPEG) 0.09 kB (WebP)
  15. PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Silhouettes / Traces Source:

    https://twitter.com/Tholle1234/status/920423596346019840
  16. PROGRESSIVE IMAGE RENDERING @jmperezperez Reduce requests Choose the right format

    and optimise Embrace responsive images Try to lazy load Think about placeholders Innovate! Summary