A deep dive into images on the web

A presentation at Fronteers in October 2019 in Amsterdam, Netherlands by Chen Hui Jing

Images are often seen as the low-hanging fruit for performance optimization on the web, so there’s plenty of guidance around what image formats to use for which scenarios. But have you wondered why that is? Or how image data itself is interpreted by browsers? This talk goes down a rabbit hole in an attempt to uncover what goes on under the hood when it comes to rendering images on the web. And a deeper understanding of not only the how, but the why, can help you make more informed decisions about the images in your projects.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.

Definitely my type of talk. Isn’t it, @vanillaLazyload? Let’s hear it for @hj_chen pic.twitter.com/UJrbkuwfdb
— Andrea Verlicchi @ fronteers (@verlok) October 3, 2019
Very excited for the next #Fronteers talk with @hj_chen 😍 pic.twitter.com/XsmwwUDpxb
— Charis at #FronteersConf 🇳🇱 (@charis) October 3, 2019
Next: @hj_chen gives us a deep dive into images on the web #Fronteers pic.twitter.com/OivYguKiAx
— Bianca Kastl (@bkastl) October 3, 2019
Next: images, images, and images. By @hj_chen. pic.twitter.com/hTizmnDR7Z
— Jeroen Heijmans (@jeroenheijmans) October 3, 2019
Next up, @hj_chen who will give us deep dive into images on the web. pic.twitter.com/ayCWpcj7CY
— Fronteers Conference (@FronteersConf) October 3, 2019
How every designer ever feels when clients are in the office:
Cc: @philhawksworth @hj_chen 😆#FronteersConf pic.twitter.com/CDfaXc9n2a
— Henri Helvetica 👨🏾‍🚀 @ #FronteersConf 🇳🇱 (@HenriHelvetica) October 3, 2019
Next up at #Fronteers is @hj_chen talking about images. Size does matter. pic.twitter.com/HLipzKMI87
— Monique Dubbelman at #Fronteers conference (@BOEmedia) October 3, 2019
A deep dive into images on the web, by ⁦@hj_chen⁩ at #FronteersConf. https://t.co/gTyD5cVEER
— Thomas Steiner (@tomayac) October 3, 2019
Yaaaas @hj_chen is up next at #FronteersConf talking about optimizing images for the web:

"It's not just the smart thing to do, it's the *right* thing to do." pic.twitter.com/IYcxysMXlD
— Anjana @ Fronteers 🇳🇱 (@AnjanaVakil) October 3, 2019
Throwback Thursday with @hj_chen - reminds me of my time in the printing industries #grannytweet #Fronteers pic.twitter.com/1aoQhAPlVu
— Monique Dubbelman at #Fronteers conference (@BOEmedia) October 3, 2019
Hey @hj_chen how did you get a hold of my MS Paint artwork?!? 😄 (learning about images, and image formats on the web!) #FronteersConf pic.twitter.com/5GzNAnXbxC
— Mandy Michael (@Mandy_Kerr) October 3, 2019
Oh, the good old days!! Challenge: design a website only using MS paint and 16 colors for images. @hj_chen #Fronteers pic.twitter.com/fCTqWR4PT5
— Liesbeth Smit @Fronteers (@Liesbeth_Smit) October 3, 2019
Really interesting talk by @hj_chen getting flashbacks to college #FronteersConf pic.twitter.com/KObeXcwnVz
— David O'Halloran (@daveohalloran) October 3, 2019
Barrage of information about image files @FronteersConf. Amazing talk by @hj_chen
— David Baker (@davidbaker85) October 3, 2019
.@hj_chen telling us a spicy story about the history of gifs and compression #FronteersConf 😱 pic.twitter.com/TxaJGqXcUe
— Mandy Michael (@Mandy_Kerr) October 3, 2019
Speed, Quality, Size. Can’t have them all — @hj_chen at #Fronteers
Pick two I guess? 😁 pic.twitter.com/nY816cibIa
— Charis at #FronteersConf 🇳🇱 (@charis) October 3, 2019
‘Animation is pretty much what has been keeping GIFs alive for all these years’ – @hj_chen, who is giving an awesome talk on image compression at #fronteers
— Hidde @ #FronteersConf 🇳🇱 (@hdv) October 3, 2019
I did not know that just a couple of pixels could impact the compression so much (doubles the size wtf?)! #FronteersConf @hj_chen pic.twitter.com/YI3YWbYbIt
— Mandy Michael (@Mandy_Kerr) October 3, 2019
@hj_chen mentions @potch's awesome post about browser engines https://t.co/coiD8DXR1W #fronteers
— Hidde @ #FronteersConf 🇳🇱 (@hdv) October 3, 2019
Seeing @hj_chen for the second time in 3 days with different talks. Mind-blowing again. So impressed #fronteers
— Navelpluisje (@Navelpluisje_nl) October 3, 2019
She warned that it would be a rabbit hole, when @hj_chen started to talk about images at #FronteersConf. Showing the folders for where the rasterization code sit was not even the deepest part of the rabbit hole 😍. pic.twitter.com/iS2MaTC1lt
— Harald @ #FronteersConf (@digitarald) October 3, 2019
Having my tiny mind blown by Professor @hj_chen at #Fronteers. pic.twitter.com/0nFY9sP1e7
— Charlie Don't Surf (@sonniesedge) October 3, 2019
A deep dive into web graphics formats by @hj_chen. Having a flashbacks to 20 years ago when reading a book by Molly Holzschlag #fronteers pic.twitter.com/k0MJRYdznT
— Wim van Iersel (@banaan666) October 3, 2019
I always learn so much from @hj_chen's talks!! This time, it's a super interesting deep dive into images on the web!! 😃👏#fronteers pic.twitter.com/qUrO8OgNIZ
— Charlie Gerard @Fronteers 🏳️‍🌈 (@devdevcharlie) October 3, 2019
We are delighted that @hj_chen showcased our website during her talk. Thanks! pic.twitter.com/F44CQYaZQj
— Fronteers Conference (@FronteersConf) October 3, 2019
absolutely seconded. @hj_chen’s talk is a delight. https://t.co/ac4bk8ql2e
— katrin k. (@_die_katrin) October 3, 2019
We were promised a deep dive. Deep we went... @hj_chen #Fronteers pic.twitter.com/UvxNRWtyZz
— David Baker (@davidbaker85) October 3, 2019
@hj_chen Thank you so much for your wonderful talks today and last night. I learned a lot from both, and really appreciate what you do <3
— Ash Kyd (@AshKyd) October 3, 2019
And a real technical and mesmerizing talk by @hj_chen on all kinds of images and how they’re rendered! #Fronteers pic.twitter.com/QZdtrNnbKB
— 𝔸ℕ𝕂𝔼 (@ankedesign) October 3, 2019