Great presentation! This really opened my eyes as to what's possible with web apps, and ways to improve my own applications. Explaining what special tools and frameworks they used and where to find them was really helpful, they make valuable additions to my bookmark library :3
@@jakearchibald No, I actually ran couple of tests right now and squoosh is doing better than guetzli (quality 75). I don't know if I am doing it wrong but guetzli's image size was 2.2mb and 914kb for squoosh. Not sure how you can run guetzli in the browser. It takes 5 - 10 mins to compress an 8mb image on my iMac. Link to image: stag.cyberserge.com/xlarge-blue-lamp-01.jpg
Slow to load, or slow to compress images? It shouldn't be slow to load, it's 15k to first interaction. Compression time depends on the codec, settings, size of image, plus the capability of your device. Compression is done locally, so there's no contention with other users.
@@jakearchibald When I selected one of the default images provided, it sat there for a very long time. So long (over a minute), I went into another tab to do other things. However, I just tried it and it seems to be moving very quickly now. Could have just been a fluke. Looks nice, I'll test it a few more times and probably suggest it to clients for image compression.
Very nice and entertaining talk. Agreed about React & co being too big. React DOM code "fire" might bring it to a more acceptable level though, but probably will never be as small as you guys want: github.com/facebook/react/issues/13525 Also keep in mind that optimizing for downloaded bytes is great but it's not the whole story. React does a few interesting things so that the UI is less often blocked (update priorities) and has a few tricks to improve perceived performances (suspense)
Absolutely, I should have been clearer. React supposedly do things that improves perceived performances once the app is hot and runs. Whether it's more important than the first load probably depends on what kind of app it is, how long you use it at a time, etc. I wonder how much react instead of preact would disturb that
I really wish there was an easy way to use this tool as a library with an API That way we could compress images before the user is uploading them to the server 🤔
15:36 shows the code - you can simply use the wasm file of optipng in your client side code. Its right here: github.com/GoogleChromeLabs/squoosh/tree/master/codecs/optipng Check out example.html
The best talk of the summit. Thanks!
Relevant, interesting, informative, and fun! Great presentation Mariko and Jake!
Jake's so humble yet knowledgeable.
Great presentation! This really opened my eyes as to what's possible with web apps, and ways to improve my own applications.
Explaining what special tools and frameworks they used and where to find them was really helpful, they make valuable additions to my bookmark library :3
Man, this talk make me smile and learn a lot, Thanks!
wow is she using a Switch controller to control the slides?
We both are 😀
@@jakearchibald that's actually amazing lol
@@najiyoussefelhamdi2649 The controllers have bluetooth I think so you should be able to use them with your laptop
Really good talk, I hope it get good exposure and more developers start applying this kind of optimizations.
It was so great to get to watch you guys do this live ( I was at the very front-row). Cant wait for Day 2 of the summit
Great use of the Joy-Cons there! Have you guys tried with the new Ivy renderer of Angular 7? I think you can get pretty similar results to Preact
This was such a helpful demonstration! Thank you 😊
OMG, I want to see this right, but my project's deadline is killing me.
here...same...
Jake still wore no shoes while presenting, haha
Jake's humor is Unesco World Heritage stuff.
(truly inspiring and kinda fascinating talk, btw)
I have no idea what that is but I'm going to pretend it's a good thing.
Just realised on 27:46 the guy is presenting on socks. Like it +1
This idea should be implemented in a neural network to generate the best quality with the lowest filesize.
Only 27 minutes into the presentation i noticed that jake isn't wearing shoes :O
Great work!
I Need this now !
Awesome!!
Does this have an API, so it can be used through cloud functions before images are stored.
I compress jpges with guetzli. Besides being faster does squoosh provide any other advantage for compressing jpegs?
I'd like to add Guetzli at some point, but I keep hearing the quality isn't much different to MozJPEG. Are you getting very different results?
@@jakearchibald No, I actually ran couple of tests right now and squoosh is doing better than guetzli (quality 75). I don't know if I am doing it wrong but guetzli's image size was 2.2mb and 914kb for squoosh. Not sure how you can run guetzli in the browser. It takes 5 - 10 mins to compress an 8mb image on my iMac. Link to image: stag.cyberserge.com/xlarge-blue-lamp-01.jpg
@@yasinyaqoobi different codecs might have a different interpretation of what "75" means in terms of quality. The best judge is the eye.
Loved it!
27:42 is Jake not wearing any shoes??
You shoes you lose
Read the first sentence in the description
how about new html tag
hehe I love that presentation style :P
Why is this better than compressing with Photoshop?
Photoshops codecs are trash (this is covered in the talk)
23:25 I love how they're using React instead of Angular
We're using Preact which is much smaller than React.
@@jakearchibald This is the best talk I've seen this year, and I've seen _a lot_. Great work you two.
Also, go Preact!
They're using Nintendo Switch controllers to pass the slides. What?
I'm guessing everyone and their mother is trying to use squoosh right now. It's slower than molasses.
Slow to load, or slow to compress images? It shouldn't be slow to load, it's 15k to first interaction. Compression time depends on the codec, settings, size of image, plus the capability of your device. Compression is done locally, so there's no contention with other users.
@@jakearchibald When I selected one of the default images provided, it sat there for a very long time. So long (over a minute), I went into another tab to do other things. However, I just tried it and it seems to be moving very quickly now. Could have just been a fluke. Looks nice, I'll test it a few more times and probably suggest it to clients for image compression.
Joke Archibald
That's what my mum calls me
Funny and awesome
💚
he donot have shoes
I'm hoping to get some for Christmas
@@jakearchibald donot do that
people who donot wear shoe are genius
Very nice and entertaining talk.
Agreed about React & co being too big. React DOM code "fire" might bring it to a more acceptable level though, but probably will never be as small as you guys want: github.com/facebook/react/issues/13525
Also keep in mind that optimizing for downloaded bytes is great but it's not the whole story. React does a few interesting things so that the UI is less often blocked (update priorities) and has a few tricks to improve perceived performances (suspense)
We're measuring time to interaction, not just bytes
Absolutely, I should have been clearer. React supposedly do things that improves perceived performances once the app is hot and runs. Whether it's more important than the first load probably depends on what kind of app it is, how long you use it at a time, etc.
I wonder how much react instead of preact would disturb that
Does anybody noticed ,they use Nintendo controllers as pointer.
I really wish there was an easy way to use this tool as a library with an API
That way we could compress images before the user is uploading them to the server 🤔
15:36 shows the code - you can simply use the wasm file of optipng in your client side code. Its right here: github.com/GoogleChromeLabs/squoosh/tree/master/codecs/optipng
Check out example.html
I live to FAIL HARD AND FAST....SO THAT I CAN FINALLY REBEGIN AGAIN😀
The western guy explained things much better. Why does politically correct have to be shoved down everyone’s throat?
Loved it!
Does anybody noticed ,they use Nintendo controllers as pointer.
They did now!