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

Loading Images Progressively

José M. Pérez
November 10, 2016
Programming
1
83

Loading Images Progressively

These are the slides of a presentation I gave at the Web Performance Stockholm meetup (https://www.meetup.com/es-ES/Stockholm-Web-Performance-Group/events/234796510/). The presentation is available on https://jmperezperez.com/sthml-wp with full animations and videos.

This talk builds on top of a previous one 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.

José M. Pérez

November 10, 2016
Tweet

More Decks by José M. Pérez

See All by José M. Pérez
Better performance for component-based web apps
jmperez
0
35
Increase the Performance of your Site with Lazy-Loading and Code-Splitting
jmperez
0
53
Progressive Image Rendering
jmperez
0
36
Progressive image rendering
jmperez
2
2.1k
Progressive image rendering
jmperez
2
2.3k
Cross platform web development
jmperez
0
440
X-platform web dev in Spotify
jmperez
0
300
Desarrollo Web en Spotify
jmperez
0
1.7k

Other Decks in Programming

See All in Programming
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
160
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
900
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Italy
prof18
0
150
Jakarta EE meets AI
ivargrimstad
0
230
Recoilを剥がしている話
kirik
5
6.6k
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
260
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
250
return文におけるstd::moveについて
onihusube
1
690
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
920
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
3
940

Featured

See All Featured
Documentation Writing (for coders)
carmenintech
66
4.5k
Into the Great Unknown - MozCon
thekraken
33
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Gamification - CAS2011
davidbonilla
80
5.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Speed Design
sergeychernyshev
25
670
Building Your Own Lightsaber
phodgson
103
6.1k
Making the Leap to Tech Lead
cromwellryan
133
9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Fireside Chat
paigeccino
34
3.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
94

Transcript

  1. Loading images progressively @jmperezperez

  2. Previously on

  3. None
  4. None

  5. Who am I? A web developer

  6. To use or not to use images

  7. None

  8. × 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 2 0 1 5 • 1 S O N G , 3 : 4 4 PLAY ON SPOTIFY 1. Stimulated 3:44

  9. Wrong way of hiding <img src="example.png"> @media (max-width: 480px) {

    .img { display: none; } }

  10. 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; }

  11. Optimising images

  12. None
  13. None

  14. Best image format

  15. None
  16. None

  17. Picture element and srcset 1 column 2 columns 3 columns

  18. 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">

  19. 2nd issue: How do I lazy load?

  20. Alternative Not coupled with layout Choose image based on available

    sizes and <div>s area Decide when to request it <div class="image-profile lazy-loaded-image" data-src-600="image-600.jpg" data-src-64="image-64.jpg"></div>

  21. Combine regular images and lazy-loaded ones

  22. 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

  23. 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.

  24. IntersectionObserver

  25. What to show while content is loading

  26. Example

  27. None

  28. Alternatives

  29. Examples of solid color

  30. None
  31. None

  32. style="border:0"

  33. Examples of Progressive Image Loading

  34. Medium

  35. How it's done 1. Render div 2. Load small thumbnail

    3. Draw image to <canvas/> and apply blur effect 4. Request large image 5. Render large image and hide <canvas/>

  36. 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>

  37. 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">&lt;img class="progressiveMedia-nos </div> </div> </figure>

  38. Did @Medium recently add a new image loading fade- in?

    I noticed it this morning on mobile and just now again on web. Looks nice. 8:05 PM - 29 Feb 2016 Jason @lang Follow @Medium's articles (although full of high-res images) load up very fast *-* 3:38 AM - 28 Mar 2015 DobaKung @zartre Follow How do users perceive it?

  39. 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 Harris Rodis @harrisrodis 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 James Young @welcomebrand Follow or maybe not? 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?

  40. 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 Damien Erambert @Eramdam 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 Sara Soueidan @SaraSoueidan Follow Reliable?

  41. What e ect does it have on RSS Readers and

    bots? @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 Brad Dougherty @bdougherty Follow

  42. Facebook The technology behind preview photos

  43. 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.

  44. Facebook Header (mainly Quantization Table and Huffman Table) Compressed Data

    Client (mobile app) GraphQL

  45. 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

  46. 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

  47. Getting creative with SVGs

  48. Source: polygon.com/a/ps4-review

  49. How it works E D I T O N HTML

    CSS JS Result

  50. Drawing bitmap images Canny Edge Detector

  51. Drawing bitmap images Source: jmperezperez.com/contour

  52. 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>

  53. Should we do this? Just because you can it doesn't

    mean you should

  54. The Web is fun.

  55. Thanks! @jmperezperez