A presentation at Stockholm Web Performance Group in in Stockholm, Sweden by José M. Pérez
Loading images progressively @jmperezperez
Previously on
Who am I? A web developer
To use or not to use images
× We - and our partners - use cookies to deliver our services and to show you ads based on your interests. By using our website, you agree to the use of cookies as described in our Cookie Policy. Stimulated By Tyga 2015 • 1 SONG, 3:44 P L AY O N S P O T I F Y 1. Stimulated 3:44
Wrong way of hiding <img src="example.png"> @media (max-width: 480px) { .img { display: none; } }
More wrong ways of hiding <body> <div class="section-1"> <p>This is the current section</p> <img src="example-1.png"> </div> <div class="section-2 hidden"> <p>This section might or might not be shown later</p> <img src="example-2.png"> </div> </body> .hidden { display: none; }
Optimising images
Best image format
Picture element and srcset 2 columns 1 column 3 columns
1st issue: Breakpoints in HTML <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: How do I lazy load?
Alternative <div class="image-profile lazy-loaded-image" data-src-600="image-600.jpg" data-src-64="image-64.jpg"></div> Not coupled with layout Choose image based on available sizes and <div>s area Decide when to request it
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 FTW 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 content is loading
Example
Alternatives
Examples of solid color
style="border:0"
Examples of Progressive Image Loading
Medium
How it's done
Render div Load small thumbnail Draw image 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 resolution of 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>Markup Overview
<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h <div class="aspectRatioPlaceholder is-locked"> <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div> <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-im <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZ <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" h <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hi <noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-nos </div> </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 DobaKung @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 When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps into sharp focus, 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 Erambert @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 19
What e ect does it have on RSS Readers and bots? Brad Dougherty @bdougherty Follow @Medium your weird blurry image thing means that when I read an article offline from my Safari Reading List, I don’t get any images 12:34 AM - 7 Nov 2015 1
Facebook The technology behind preview photos
Facebook 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 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 EDIT ON
Drawing bitmap images Canny Edge Detector
Drawing bitmap images Source: jmperezperez.com/contour
How it works 1. Find edges with canny edge detector 2. Create lines 3. Use JS and SVG to animate <svg> <polyline points="26,2 27,2 29,2 31,2 33,2 35,2 37,2 39,2 41,2 43,2 45,2 47,2 ... <polyline points="88,2 89,2 91,2 93,2 95,2 97,2 99,2 101,2 103,2 105,2 107,2 </svg>
Should we do this? Just because you can it doesn't mean you should
The Web is fun.
Thanks! @jmperezperez
This talk builds on top of a previous one at the Stockholm Web Performance Group meetup that explained the picture element and some image optimization tools. However, I felt that in real applications it is sometimes to put into practice, and sometimes we want to have more control on the process of requesting and loading images.
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 talk contains some videos and animations, so I recommend checking it out directly on https://jmperezperez.com/sthml-wp.
for free. You
can too.