A presentation at FrontFest in in Moscow, Russia by José M. Pérez
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
This talk addresses the culprit in page size, images. I feel that we like discussing JS and CSS and its payload, but we tend to forget about images, which represent 2/3 of the bytes of a page.
The most performant request is the one that is never done, and this beats any possible image optimization. There are some common scenarios in which we can avoid using images, being adopting a minimalism/flat design or hiding certain images on smaller screens.
Of course, we will need to use some images eventually. For these cases I explain how the picture element might help and some of its limitations I have found when working with real websites. One of them is lazy loading of images, which can bring great savings in terms of data traffic, but it is also easy to implement wrongly.
Lastly I show some techniques to "fill" the space for an image while it is loaded, going from just showing an empty area to doing a progressive loading from a blurry image.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.