Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

PROGRESSIVE IMAGE RENDERING @jmperezperez About me

Slide 6

Slide 6 text

Page Load Time PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

PROGRESSIVE IMAGE RENDERING @jmperezperez WebPageTest

Slide 11

Slide 11 text

PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 12

Slide 12 text

Avoiding this: PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

What about images? PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Minimalist | Flat Design

Slide 17

Slide 17 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Not that long ago

Slide 18

Slide 18 text

Optimise your images PROGRESSIVE IMAGE RENDERING @jmperezperez TIP 1

Slide 19

Slide 19 text

PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 20

Slide 20 text

right format gif | png | jpg | webp | PROGRESSIVE IMAGE RENDERING @jmperezperez My beautiful image

Slide 21

Slide 21 text

compression PROGRESSIVE IMAGE RENDERING @jmperezperez · lossless · perceptual

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Lazy-load images PROGRESSIVE IMAGE RENDERING @jmperezperez TIP 3

Slide 25

Slide 25 text

above the fold & Lazy below the fold PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 26

Slide 26 text

Intersection Observer PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 27

Slide 27 text

// 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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Using image.decode() I M A G E D E C O D I N G

Slide 30

Slide 30 text

// 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Examples of solid color PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 34

Slide 34 text

PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 35

Slide 35 text

PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 36

Slide 36 text

PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 37

Slide 37 text

Examples of Progressive Image Loading PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 38

Slide 38 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Medium

Slide 39

Slide 39 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Quartz (qz.com)

Slide 40

Slide 40 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Quora

Slide 41

Slide 41 text

PROGRESSIVE IMAGE RENDERING @jmperezperez How it is done

Slide 42

Slide 42 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Markup - Eg Medium

Slide 43

Slide 43 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Thumbnails

Slide 44

Slide 44 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Thumbnails

Slide 45

Slide 45 text

Getting creative with SVGs PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Drawing edges with SVG Source: https://codepen.io/jmperez/pen/rxxRRg​

Slide 48

Slide 48 text

PROGRESSIVE IMAGE RENDERING @jmperezperez Drawing bitmap images Canny Edge Detector

Slide 49

Slide 49 text

PROGRESSIVE IMAGE RENDERING @jmperezperez 1. Find edges with canny edge detector 2. Create lines 3. Use JS and SVG to animate How to draw bitmaps

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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)

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

The Web is fun. PROGRESSIVE IMAGE RENDERING @jmperezperez

Slide 59

Slide 59 text

spotify.com/jobs talk with me for more info

Slide 60

Slide 60 text

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