Progressive Image Rendering

Progressive image rendering José M. Pérez · Web dev at Spotify @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez Привет! What will we see today?

PROGRESSIVE IMAGE RENDERING @jmperezperez Improve perceived performance of images on the web

PROGRESSIVE IMAGE RENDERING @jmperezperez by - not making requests - optimizing images - rendering previews

PROGRESSIVE IMAGE RENDERING @jmperezperez About me

PROGRESSIVE IMAGE RENDERING @jmperezperez Page Load Time

PROGRESSIVE IMAGE RENDERING @jmperezperez 0.0s 0.3s 0.6s 0.9s 1.2s FrontFest 2017 Version A Speakers & Schedule 0.0s Version B 0.3s FrontFest 2017 0.6s FrontFest 2017 0.9s FrontFest 2017 Speakers & Schedule 1.2s FrontFest 2017 Speakers & Schedule

PROGRESSIVE IMAGE RENDERING @jmperezperez Source https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/

PROGRESSIVE IMAGE RENDERING @jmperezperez SpeedIndex = end ∫0 end = end time in milliseconds VC = % visually complete 1− VC 100

PROGRESSIVE IMAGE RENDERING @jmperezperez WebPageTest

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez Avoiding this:

PROGRESSIVE IMAGE RENDERING @jmperezperez Techniques to improve perceived performance Server-side rendering Critical CSS Async JS Async fonts

PROGRESSIVE IMAGE RENDERING @jmperezperez What about images?

PROGRESSIVE IMAGE RENDERING @jmperezperez images scripts other 1,815kB (54%) 457kB (14%) 1,106kB (33%) source: http archive 1 nov 2017

PROGRESSIVE IMAGE RENDERING @jmperezperez Minimalist | Flat Design

PROGRESSIVE IMAGE RENDERING @jmperezperez Not that long ago

PROGRESSIVE IMAGE RENDERING @jmperezperez TIP 1 Optimise your images

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez right format gif | png | jpg | webp | <the_next_thing> <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>

PROGRESSIVE IMAGE RENDERING @jmperezperez compression · lossless · perceptual

PROGRESSIVE IMAGE RENDERING @jmperezperez TIP Responsive 1 column 2 columns 3 columns 2

PROGRESSIVE IMAGE RENDERING @jmperezperez RESPONSIVE IMAGES Example <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"> Challenge: Keeping in sync markup and CSS

PROGRESSIVE IMAGE RENDERING @jmperezperez TIP 3 Lazy-load images

PROGRESSIVE IMAGE RENDERING @jmperezperez <img> above the fold & Lazy below the fold

PROGRESSIVE IMAGE RENDERING @jmperezperez Intersection Observer

PROGRESSIVE IMAGE RENDERING @jmperezperez INTERSECTION OBSERVER Example // 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 INTERSECTION OBSERVER Encapsulating in React 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 IMAGE DECODING Using image.decode()

PROGRESSIVE IMAGE RENDERING @jmperezperez IMAGE DECODING Using image.decode() TIP 4 Add an image to the DOM without causing a decoding delay. // 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.'); }); Track the proposal on https://github.com/whatwg/html/issues/1920

PROGRESSIVE IMAGE RENDERING @jmperezperez What to show while the image is loading

PROGRESSIVE IMAGE RENDERING @jmperezperez PLACEHOLDERS Options Nothing Placeholder Solid colour or Progressive image gradient loading or "Blur-up"

PROGRESSIVE IMAGE RENDERING @jmperezperez Examples of solid color

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez Examples of Progressive Image Loading

PROGRESSIVE IMAGE RENDERING @jmperezperez Medium

PROGRESSIVE IMAGE RENDERING @jmperezperez Medium

PROGRESSIVE IMAGE RENDERING @jmperezperez Quartz (qz.com)

PROGRESSIVE IMAGE RENDERING @jmperezperez Quartz (qz.com)

PROGRESSIVE IMAGE RENDERING Quora @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez How it is done

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>

PROGRESSIVE IMAGE RENDERING @jmperezperez Thumbnails

PROGRESSIVE IMAGE RENDERING @jmperezperez Thumbnails

PROGRESSIVE IMAGE RENDERING @jmperezperez Getting creative with SVGs

PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Edges Source: https://www.polygon.com/a/ps4-review

PROGRESSIVE IMAGE RENDERING @jmperezperez Drawing edges with SVG ">//codepen.io/jmperez/embed/rxxRRg/?height=525&themeid=0&default-tab=js,result&embed-version=2"> Source: https://codepen.io/jmperez/pen/rxxRRg

PROGRESSIVE IMAGE RENDERING @jmperezperez Drawing bitmap images Canny Edge Detector

https://jmperezperez.com/renderconf17/extslides/contour2/index.html Source: https://jmperezperez.com/contour/

PROGRESSIVE IMAGE RENDERING @jmperezperez 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"/>

PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Shapes Source: http://www.samcodes.co.uk/project/geometrize-haxe-web/

PROGRESSIVE IMAGE RENDERING @jmperezperez

PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Shapes SVG - 10 shapes SVG - 100 shapes Original 0.74kB 3.5kB 101kB

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)

PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Silhouettes / Traces Source: https://codepen.io/ainalem/full/aLKxjm/

PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Silhouettes / Traces Source: https://www.npmjs.com/package/potrace

PROGRESSIVE IMAGE RENDERING @jmperezperez SVG - Silhouettes / Traces Source: https://twitter.com/Tholle1234/status/920423596346019840

PROGRESSIVE IMAGE RENDERING @jmperezperez Should we do this? Just because you can it doesn't mean you should

PROGRESSIVE IMAGE RENDERING @jmperezperez Summary Reduce requests Choose the right format and optimise Embrace responsive images Try to lazy load Think about placeholders Innovate!

PROGRESSIVE IMAGE RENDERING @jmperezperez The Web is fun fun..

spotify.com/jobs talk with me for more info

Thanks! @jmperezperez Slides on https://slides.com/jmperez