WEBVTT NOTE This file was generated by switchtitle 1 00:00:13.500 --> 00:00:14.958 This is Self-Directed Research. 2 00:00:15.416 --> 00:00:17.458 Our hosts, James and Amos, host weekly 3 00:00:17.458 --> 00:00:19.083 hyper-focused technical deep dives. 4 00:00:19.500 --> 00:00:21.916 The topic today is from Amos- "HTML5 5 00:00:21.916 --> 00:00:23.750 video: Chaos is a bit rate ladder." 6 00:00:24.125 --> 00:00:25.625 Make sure to like, follow, and subscribe 7 00:00:25.625 --> 00:00:26.791 wherever you find us. 8 00:00:26.791 --> 00:00:29.500 And as always, visit sdr-podcast.com/episodes 9 00:00:29.500 --> 00:00:31.083 for all the presentations, 10 00:00:31.541 --> 00:00:33.083 videos, show notes, and transcripts. 11 00:00:33.541 --> 00:00:35.375 And of course, stay tuned to the end to 12 00:00:35.375 --> 00:00:36.125 hear more about Depot, 13 00:00:36.375 --> 00:00:37.500 the sponsor of this episode. 14 00:00:42.375 --> 00:00:44.458 My mouth is so dry. 15 00:00:44.875 --> 00:00:46.000 How dry is it? 16 00:00:47.000 --> 00:00:47.541 So dry. 17 00:00:48.500 --> 00:00:49.666 I don't know where that comes from. 18 00:00:49.666 --> 00:00:51.333 I've heard this reference before, but I 19 00:00:51.333 --> 00:00:52.125 don't even know what it... 20 00:00:52.125 --> 00:00:53.125 I don't know where it's from. 21 00:00:53.125 --> 00:00:54.333 That's just one of those, it's been... 22 00:00:54.958 --> 00:00:55.958 It's like a running meme 23 00:00:56.083 --> 00:00:56.916 "It's been..." 24 00:00:56.916 --> 00:00:58.250 for commercials for 50 years. 25 00:00:58.333 --> 00:00:59.666 "... one week since you looked at me" 26 00:00:59.750 --> 00:01:00.541 Yes! 27 00:01:00.583 --> 00:01:01.583 I just want to have all 28 00:01:01.583 --> 00:01:02.791 these references in that way. 29 00:01:03.416 --> 00:01:04.125 Yes. 30 00:01:05.208 --> 00:01:05.958 Cool. 31 00:01:06.083 --> 00:01:09.041 Well, share screen, that screen. 32 00:01:09.416 --> 00:01:09.750 Yes. 33 00:01:09.958 --> 00:01:10.250 Yes. 34 00:01:11.000 --> 00:01:11.333 Good. 35 00:01:12.250 --> 00:01:12.916 Wonderful. 36 00:01:13.666 --> 00:01:14.208 Yay. 37 00:01:14.666 --> 00:01:15.416 Okay, bye. 38 00:01:15.958 --> 00:01:16.416 Bye. 39 00:01:16.708 --> 00:01:17.000 OK bye! 40 00:01:17.625 --> 00:01:20.375 I have a cat on me, so if I start 41 00:01:20.375 --> 00:01:22.875 yelping, it means that Sherlock has 42 00:01:22.875 --> 00:01:25.666 planted firmly his... nails? 43 00:01:26.083 --> 00:01:26.958 Claws, nails. 44 00:01:27.333 --> 00:01:28.791 Claws. Today, we're going to 45 00:01:28.791 --> 00:01:30.416 talk about HTML5 video. 46 00:01:31.333 --> 00:01:32.250 And then there's a little reference. 47 00:01:32.500 --> 00:01:33.333 James, do you know what the 48 00:01:33.333 --> 00:01:34.541 subtitle is a reference to? 49 00:01:35.000 --> 00:01:36.291 Hold on, I need to get like a... 50 00:01:36.291 --> 00:01:37.125 I don't have a cup, so 51 00:01:37.125 --> 00:01:38.250 I can do the Bane voice. 52 00:01:38.833 --> 00:01:39.958 "Chaos is a ladder." 53 00:01:40.541 --> 00:01:41.291 Yes. 54 00:01:41.833 --> 00:01:43.500 But I said "Chaos is a bitrate ladder." 55 00:01:43.833 --> 00:01:46.458 And a bit rate ladder is a set of 56 00:01:46.458 --> 00:01:48.208 settings that you... 57 00:01:48.208 --> 00:01:48.666 Like for the... 58 00:01:48.666 --> 00:01:49.833 You know how YouTube has a little 59 00:01:49.833 --> 00:01:52.125 selector, you can go 4K, 1080p, 720p. 60 00:01:52.333 --> 00:01:54.708 They also choose the bitrate target for 61 00:01:54.708 --> 00:01:56.333 the video, for the audio, which codecs to 62 00:01:56.333 --> 00:01:57.500 use, blah blah blah blah. 63 00:01:57.500 --> 00:01:58.666 So it's a little joke for the two 64 00:01:58.916 --> 00:02:00.000 people from Vimeo who are 65 00:02:00.000 --> 00:02:01.333 going to listen to this. 66 00:02:02.208 --> 00:02:02.958 Hi friends. 67 00:02:03.500 --> 00:02:04.291 I miss you. 68 00:02:04.583 --> 00:02:05.375 Probably know them by name. 69 00:02:06.083 --> 00:02:06.541 I do. 70 00:02:07.500 --> 00:02:08.500 I'm not going to say their name. 71 00:02:09.041 --> 00:02:09.875 Wait, did you work at Vimeo? 72 00:02:10.333 --> 00:02:11.833 I did not, but I had at 73 00:02:11.833 --> 00:02:12.916 least one friend there. 74 00:02:13.250 --> 00:02:13.583 Gotcha. 75 00:02:14.208 --> 00:02:14.708 Because in this ties 76 00:02:14.708 --> 00:02:16.208 into slide number two of 37, 77 00:02:16.416 --> 00:02:17.458 which you can get by going to 78 00:02:17.458 --> 00:02:20.208 sdr-podcast.com/episodes, 79 00:02:20.791 --> 00:02:22.083 or on YouTube, if you're 80 00:02:22.083 --> 00:02:24.250 watching the podcast on YouTube. 81 00:02:24.333 --> 00:02:25.666 The current slide is showing a YouTube 82 00:02:25.666 --> 00:02:27.750 video, how meta, called "This is a Video 83 00:02:27.750 --> 00:02:28.666 About Video" that I 84 00:02:28.666 --> 00:02:30.833 released in September 2022. 85 00:02:31.208 --> 00:02:32.083 So I have been at 86 00:02:32.083 --> 00:02:33.291 this for quite some time. 87 00:02:33.708 --> 00:02:34.750 I remember this episode. 88 00:02:34.750 --> 00:02:35.750 This one was super good. 89 00:02:36.083 --> 00:02:36.916 People didn't care for it. 90 00:02:37.125 --> 00:02:38.125 It only has 13,000 91 00:02:38.125 --> 00:02:39.125 views, as you can tell. 92 00:02:39.125 --> 00:02:40.375 Is this the one that you had all the 93 00:02:40.375 --> 00:02:42.041 different bitrates and explained how all 94 00:02:42.041 --> 00:02:43.083 the chunking and everything works? 95 00:02:43.416 --> 00:02:43.708 Yeah. 96 00:02:43.708 --> 00:02:44.666 I really like this one. 97 00:02:45.166 --> 00:02:45.375 Yeah. 98 00:02:45.708 --> 00:02:48.041 So this is exhibit A in Amos cannot 99 00:02:48.041 --> 00:02:51.041 scope content to save their life because 100 00:02:51.041 --> 00:02:54.750 the end of the video is just me speeding 101 00:02:54.750 --> 00:02:58.166 up more and more, me talking through the 102 00:02:58.166 --> 00:02:59.750 rest of the script, because 103 00:02:59.750 --> 00:03:01.291 it was already 40 minutes. 104 00:03:01.666 --> 00:03:03.041 I just realized halfway through the 105 00:03:03.041 --> 00:03:03.750 script, nobody cares. 106 00:03:04.000 --> 00:03:05.541 But then of course, I got 10 different 107 00:03:05.541 --> 00:03:06.833 comments saying, "Oh, it was interesting 108 00:03:06.833 --> 00:03:07.916 what you were saying in the outro. 109 00:03:07.916 --> 00:03:09.000 You should do a video about that." 110 00:03:10.791 --> 00:03:12.208 To the 10 of you that made it 111 00:03:12.208 --> 00:03:14.416 to the end, shout out, you're a real one. 112 00:03:14.875 --> 00:03:17.708 The initial motivation was I'm making 113 00:03:17.708 --> 00:03:18.750 videos on YouTube, and 114 00:03:18.750 --> 00:03:19.750 that's cool, and that's great. 115 00:03:20.583 --> 00:03:23.333 And I like to earn money with ads and 116 00:03:23.333 --> 00:03:24.833 sponsored videos and whatnot. 117 00:03:24.833 --> 00:03:27.166 But people who already support me through 118 00:03:27.166 --> 00:03:29.541 Patreon or GitHub Sponsors, it feels bad 119 00:03:29.541 --> 00:03:32.250 that they have to, in a way, pay again by 120 00:03:32.250 --> 00:03:33.125 sitting through these 121 00:03:33.125 --> 00:03:34.875 ads and sponsored segments. 122 00:03:35.250 --> 00:03:36.708 Well, most of them don't because there's 123 00:03:36.708 --> 00:03:38.750 software solutions for that, but I'm not 124 00:03:38.750 --> 00:03:39.583 going to name them because 125 00:03:39.583 --> 00:03:40.875 I make money off of this. 126 00:03:41.000 --> 00:03:41.833 It just felt bad. 127 00:03:41.833 --> 00:03:43.625 So I wanted to provide my paying 128 00:03:43.625 --> 00:03:45.416 customers, my patrons, the people who 129 00:03:45.416 --> 00:03:47.000 make all this possible, with a way to 130 00:03:47.000 --> 00:03:48.791 watch my videos directly from my website 131 00:03:48.791 --> 00:03:50.416 where they wouldn't get any ads. 132 00:03:50.458 --> 00:03:51.666 It's not even about the ads. 133 00:03:51.666 --> 00:03:53.916 It's about being around the whole Google 134 00:03:53.916 --> 00:03:55.958 surveillance ecosystem. 135 00:03:56.375 --> 00:03:58.000 They just don't want to touch it at all. 136 00:03:58.291 --> 00:04:00.208 So you did what comes naturally and set 137 00:04:00.208 --> 00:04:02.208 up an entire video streaming and CDN 138 00:04:02.208 --> 00:04:03.291 platform from scratch. 139 00:04:03.583 --> 00:04:04.000 I did. 140 00:04:04.000 --> 00:04:04.666 As you do. 141 00:04:04.916 --> 00:04:05.458 As you do. 142 00:04:05.666 --> 00:04:08.791 And I tore it down because it worked, but 143 00:04:08.791 --> 00:04:11.708 V1 was pretty much a Rust 144 00:04:11.708 --> 00:04:13.916 program calling the ffmpeg CLI. 145 00:04:14.250 --> 00:04:15.833 And then version two was let's link 146 00:04:15.833 --> 00:04:18.750 directly against ffmpeg as a library and 147 00:04:18.750 --> 00:04:20.041 process every frame ourselves. 148 00:04:20.250 --> 00:04:21.458 And this is what the video was about. 149 00:04:21.458 --> 00:04:22.708 I was in the middle of doing all that. 150 00:04:22.708 --> 00:04:23.875 And it never went anywhere. 151 00:04:23.875 --> 00:04:25.166 I worked on it for months. 152 00:04:25.375 --> 00:04:27.125 I got some extra help on 153 00:04:27.125 --> 00:04:28.375 it from different people. 154 00:04:28.791 --> 00:04:29.625 I got my life together 155 00:04:29.625 --> 00:04:30.416 in 2024. 156 00:04:30.416 --> 00:04:31.583 I was like, "I'm going to archive this 157 00:04:31.583 --> 00:04:34.000 project and I'm going to start again from 158 00:04:34.000 --> 00:04:34.875 scratch at some point." 159 00:04:34.875 --> 00:04:36.208 But I just removed all traces of it from 160 00:04:36.208 --> 00:04:37.250 the code base on my website. 161 00:04:37.250 --> 00:04:38.625 And that allowed me to focus on the 162 00:04:38.625 --> 00:04:40.458 actual... the text, the 163 00:04:40.458 --> 00:04:41.625 images, everything else. 164 00:04:41.833 --> 00:04:42.791 So for example, I have 165 00:04:42.791 --> 00:04:44.083 a great image pipeline. 166 00:04:44.291 --> 00:04:45.708 I've already talked about diagrams. 167 00:04:46.166 --> 00:04:47.208 So I'm not going to talk about them here, 168 00:04:47.208 --> 00:04:48.625 but let's just talk about bitmaps. 169 00:04:48.958 --> 00:04:51.166 I take a lot of screenshots of my screen 170 00:04:51.166 --> 00:04:53.208 with CleanShot, which is a great product. 171 00:04:53.208 --> 00:04:54.333 This episode is not sponsored by 172 00:04:54.333 --> 00:04:55.625 CleanShot, but it should be. 173 00:04:56.166 --> 00:04:57.208 You can just essentially 174 00:04:57.208 --> 00:04:58.875 pick a little rectangle. 175 00:04:59.750 --> 00:05:01.041 It goes to the slider screen and 176 00:05:01.041 --> 00:05:03.333 then you can drag that anywhere. 177 00:05:03.708 --> 00:05:05.458 And I write my articles as markdown. 178 00:05:05.750 --> 00:05:06.916 There are text editors. 179 00:05:07.250 --> 00:05:08.291 I know there's visual code extensions 180 00:05:08.291 --> 00:05:10.083 where you can drag into the editor and 181 00:05:10.083 --> 00:05:11.291 then it just copies the file 182 00:05:11.291 --> 00:05:12.541 next to your markdown file. 183 00:05:13.041 --> 00:05:13.416 I don't know. 184 00:05:13.416 --> 00:05:14.125 I'm using zed. 185 00:05:14.125 --> 00:05:16.291 I don't think their extension API lets 186 00:05:16.291 --> 00:05:17.583 you do that quite yet. 187 00:05:18.166 --> 00:05:20.750 And also, I don't want multi megabyte 188 00:05:20.750 --> 00:05:24.416 PNGs because my articles are stored as 189 00:05:24.416 --> 00:05:26.458 markdown in a Git repository and it 190 00:05:26.458 --> 00:05:28.708 started getting really big over time. 191 00:05:29.000 --> 00:05:30.791 So what I do is that I 192 00:05:30.791 --> 00:05:32.125 have them drag and drop. 193 00:05:32.375 --> 00:05:33.250 I'm going to show a 194 00:05:33.250 --> 00:05:34.291 picture of that in a later slide. 195 00:05:34.625 --> 00:05:37.000 I drag them onto the browser that I'm 196 00:05:37.000 --> 00:05:38.625 currently previewing the article in. 197 00:05:38.916 --> 00:05:40.208 I drag them on top of a paragraph. 198 00:05:40.583 --> 00:05:42.166 If I drag on the left side, it replaces 199 00:05:42.166 --> 00:05:43.375 the paragraph with the image. 200 00:05:43.375 --> 00:05:44.750 If I drag on the right side of the 201 00:05:44.750 --> 00:05:45.791 paragraph, it appends 202 00:05:45.791 --> 00:05:46.875 after the paragraph. 203 00:05:47.000 --> 00:05:47.875 And the way it works is that each 204 00:05:47.875 --> 00:05:49.166 paragraph has a byte offset. 205 00:05:49.500 --> 00:05:50.666 When rendered to HTML, there's an 206 00:05:50.666 --> 00:05:51.416 attribute that says the 207 00:05:51.416 --> 00:05:52.500 byte offset in the source. 208 00:05:52.500 --> 00:05:54.333 And that's how it knows how to edit the 209 00:05:54.333 --> 00:05:55.208 markdown to put the 210 00:05:55.208 --> 00:05:56.166 image in the right place. 211 00:05:56.166 --> 00:05:57.125 So I'm very happy about that. 212 00:05:57.125 --> 00:05:58.375 This is not even the topic of today's 213 00:05:58.375 --> 00:05:59.708 presentation, but I'm really happy. 214 00:06:00.125 --> 00:06:01.541 And when you do that, there's a little 215 00:06:01.541 --> 00:06:04.708 screen that shows how big the image is 216 00:06:04.708 --> 00:06:05.666 going to be and 217 00:06:05.666 --> 00:06:08.000 encourages you to write alt text. 218 00:06:08.500 --> 00:06:10.333 I would love to have a whole episode on 219 00:06:10.333 --> 00:06:11.916 that because I don't know if I've ever 220 00:06:11.916 --> 00:06:14.541 seen someone use their website to build 221 00:06:14.541 --> 00:06:16.666 their website like you do in that you 222 00:06:16.666 --> 00:06:18.666 have like all this functionality that's 223 00:06:18.666 --> 00:06:20.750 built into the website itself running in 224 00:06:20.750 --> 00:06:22.916 like developer mode serving locally and 225 00:06:22.916 --> 00:06:25.583 you use essentially your own website or 226 00:06:25.583 --> 00:06:26.916 this is what it seems like from the 227 00:06:26.916 --> 00:06:28.500 outside is that you use your website to 228 00:06:28.500 --> 00:06:30.666 build your website, which is a really 229 00:06:30.666 --> 00:06:33.541 cool workflow that I can't even imagine. 230 00:06:33.541 --> 00:06:34.958 So I would love to have like the guided 231 00:06:34.958 --> 00:06:36.500 tour of what the inside 232 00:06:36.500 --> 00:06:37.833 of that process looks like. 233 00:06:37.833 --> 00:06:39.416 I'm thinking of how to make a video on it 234 00:06:39.416 --> 00:06:40.541 because it's there's a big visual 235 00:06:40.541 --> 00:06:41.583 components of this and 236 00:06:41.583 --> 00:06:42.458 also it keeps changing. 237 00:06:42.708 --> 00:06:43.000 Like yes. 238 00:06:43.375 --> 00:06:45.375 And also I wish less of my content was 239 00:06:45.375 --> 00:06:47.041 about how my website works. 240 00:06:47.041 --> 00:06:47.791 How you make content. 241 00:06:50.291 --> 00:06:51.875 Because yeah, half the YouTube channels 242 00:06:51.875 --> 00:06:53.541 out there are like: how to get a good 243 00:06:53.541 --> 00:06:54.875 camera, how to get good at editing. 244 00:06:55.166 --> 00:06:57.083 And I didn't want to do that with mine. 245 00:06:57.416 --> 00:06:58.958 So instead of a YouTube channel about how 246 00:06:58.958 --> 00:07:00.333 to make a website, I don't know. 247 00:07:00.333 --> 00:07:02.041 But that's what this entire podcast is. 248 00:07:02.041 --> 00:07:03.875 The bizarre things that we've built for 249 00:07:03.875 --> 00:07:05.458 ourselves for ourselves. 250 00:07:05.458 --> 00:07:05.958 Now that we have the 251 00:07:05.958 --> 00:07:07.166 things we've learned. 252 00:07:07.625 --> 00:07:08.125 Yeah, exactly. 253 00:07:08.333 --> 00:07:09.708 Every time I obsess over a detail, I 254 00:07:09.708 --> 00:07:10.500 don't have to make an 255 00:07:10.500 --> 00:07:11.250 entire video about it. 256 00:07:11.250 --> 00:07:12.500 I can just show you. 257 00:07:12.500 --> 00:07:13.875 That's what the support group here is for. 258 00:07:14.041 --> 00:07:14.625 Exactly. 259 00:07:15.000 --> 00:07:15.541 It's a... 260 00:07:16.041 --> 00:07:17.000 "Tinkerers Anonymous?" 261 00:07:17.583 --> 00:07:19.000 Such a better name for the podcast. 262 00:07:19.625 --> 00:07:21.125 So I have a great image pipeline. 263 00:07:21.125 --> 00:07:21.833 I'm really fond of it. 264 00:07:21.833 --> 00:07:23.375 So I drag onto the browser. 265 00:07:23.375 --> 00:07:25.083 It modifies the markdown. 266 00:07:25.083 --> 00:07:27.708 It transparently converts to JPEG XL with 267 00:07:27.708 --> 00:07:30.083 a high enough quality that it's visually 268 00:07:30.083 --> 00:07:32.375 lossless to me for screenshots. 269 00:07:33.333 --> 00:07:34.833 But it's small enough that I don't mind 270 00:07:34.833 --> 00:07:36.500 putting it in a Git repository. 271 00:07:36.500 --> 00:07:37.750 I don't have to worry about large file 272 00:07:37.750 --> 00:07:39.875 storage, Git LFS or anything like that. 273 00:07:40.166 --> 00:07:42.333 And then in the browser, it serves either 274 00:07:42.333 --> 00:07:45.583 as that JPEG XL file, the .jxl file or 275 00:07:45.583 --> 00:07:48.000 AVIF or WebP, depending on your browser. 276 00:07:48.000 --> 00:07:48.583 We're going to get into 277 00:07:48.583 --> 00:07:49.500 which browser supports what. 278 00:07:49.708 --> 00:07:51.041 What you're seeing on the slide right 279 00:07:51.041 --> 00:07:52.416 now, if you're watching 280 00:07:52.416 --> 00:07:54.583 the slide, is a picture tag. 281 00:07:54.916 --> 00:07:56.000 If you didn't know, there's not just 282 00:07:56.000 --> 00:07:57.875 image tags, a . 283 00:07:58.083 --> 00:07:59.333 There's also picture tags. 284 00:07:59.333 --> 00:08:00.083 And the picture tags are 285 00:08:00.083 --> 00:08:01.375 nice because they take sources. 286 00:08:02.000 --> 00:08:04.000 So there are three different sources here 287 00:08:04.000 --> 00:08:05.708 in order of my preference. 288 00:08:06.416 --> 00:08:08.708 JPEG XL goes first, then AVIF, then WebP. 289 00:08:09.166 --> 00:08:11.291 Other features of the markup that I'm 290 00:08:11.291 --> 00:08:13.208 showing on screen is that I set the 291 00:08:13.208 --> 00:08:14.875 loading attribute to lazy for the image, 292 00:08:14.875 --> 00:08:16.375 which means the image doesn't load until 293 00:08:16.375 --> 00:08:18.833 it's within or near the viewport. 294 00:08:19.166 --> 00:08:21.041 So I have very long articles that span 295 00:08:21.041 --> 00:08:22.125 many, many, many pages. 296 00:08:22.583 --> 00:08:23.708 So this will only load 297 00:08:23.708 --> 00:08:25.083 the first two, I guess. 298 00:08:25.333 --> 00:08:27.000 And it also specifies width and height. 299 00:08:27.000 --> 00:08:28.083 That's a recent addition. 300 00:08:28.083 --> 00:08:29.708 I've been improving my asset pipeline. 301 00:08:29.958 --> 00:08:31.750 And it just grabs the image dimensions 302 00:08:31.750 --> 00:08:33.666 when indexing the revision. 303 00:08:33.958 --> 00:08:35.541 Does this mean you can figure out how far 304 00:08:35.541 --> 00:08:37.250 people make it in your articles by the 305 00:08:37.250 --> 00:08:38.166 percentage of...? 306 00:08:38.208 --> 00:08:39.250 I was thinking of that while making the slides. 307 00:08:39.500 --> 00:08:39.708 Yes. 308 00:08:39.916 --> 00:08:40.125 Yeah. 309 00:08:40.541 --> 00:08:40.875 I could. 310 00:08:41.166 --> 00:08:42.625 But I don't track that. 311 00:08:42.625 --> 00:08:43.666 It's like I don't explicitly take 312 00:08:43.666 --> 00:08:45.208 metrics, but I do have the number of 313 00:08:45.208 --> 00:08:46.416 downloads for each of my images. 314 00:08:46.708 --> 00:08:48.708 And gee, the ones at the top sure get 315 00:08:48.708 --> 00:08:49.625 downloaded a lot more 316 00:08:49.625 --> 00:08:50.625 than the ones at the bottom. 317 00:08:50.916 --> 00:08:51.791 The bounce rates for 318 00:08:51.791 --> 00:08:52.875 my website is terrible. 319 00:08:53.666 --> 00:08:54.250 It's a nerd snipe. 320 00:08:54.583 --> 00:08:54.958 I don't know. 321 00:08:54.958 --> 00:08:55.833 It doesn't hit often. 322 00:08:55.833 --> 00:08:56.541 When it does, people 323 00:08:56.541 --> 00:08:57.708 read the entire thing. 324 00:08:58.083 --> 00:08:59.500 But when it, yeah, most people are like, 325 00:08:59.500 --> 00:09:00.958 oh, God, and recoil in horror. 326 00:09:01.000 --> 00:09:01.833 There's also alt text. 327 00:09:01.833 --> 00:09:03.791 I've started writing alt text for images. 328 00:09:03.791 --> 00:09:04.833 I don't like writing it in 329 00:09:04.833 --> 00:09:06.000 markdown in my text editor. 330 00:09:06.208 --> 00:09:07.625 But because of this nice little drag and 331 00:09:07.625 --> 00:09:09.500 drop thingy, it encourages me to give the 332 00:09:09.500 --> 00:09:11.750 image a descriptive file name and then 333 00:09:11.750 --> 00:09:12.916 also write alt text and 334 00:09:12.916 --> 00:09:14.166 it has a minimum length. 335 00:09:14.708 --> 00:09:15.833 So I need to write at least. 336 00:09:16.333 --> 00:09:17.541 I tend to dictate it, actually. 337 00:09:17.541 --> 00:09:18.875 I use Superwhisper to just dictate the 338 00:09:18.875 --> 00:09:19.708 description of the image. 339 00:09:20.125 --> 00:09:21.166 I don't know when I started doing that. 340 00:09:21.166 --> 00:09:22.083 I didn't go back and add alt 341 00:09:22.083 --> 00:09:23.083 text to all the other images. 342 00:09:23.541 --> 00:09:25.708 The more backlog I have, not backlog, the 343 00:09:25.708 --> 00:09:27.708 more back catalog I have, the more work it is 344 00:09:27.708 --> 00:09:29.083 to go back and just bring everything up 345 00:09:29.083 --> 00:09:30.083 to code, essentially. 346 00:09:30.625 --> 00:09:32.583 But the width height stuff was also for 347 00:09:32.583 --> 00:09:36.125 me because when the page updates, well, 348 00:09:36.125 --> 00:09:37.416 it's only because of videos. 349 00:09:37.875 --> 00:09:38.250 Basically, the idea is 350 00:09:38.250 --> 00:09:39.166 to avoid layout shifts. 351 00:09:39.916 --> 00:09:41.416 You want the browser to know how big the 352 00:09:41.416 --> 00:09:42.916 end is going to be before it actually gets 353 00:09:42.916 --> 00:09:43.750 to download the image. 354 00:09:44.958 --> 00:09:46.583 JPEG XL is so good. 355 00:09:47.000 --> 00:09:47.875 Why does Google hate it? 356 00:09:48.750 --> 00:09:51.166 Everyone was sad because JPEG XL 357 00:09:51.166 --> 00:09:52.916 support didn't make it into Chrome is 358 00:09:52.916 --> 00:09:53.708 essentially what happened. 359 00:09:54.166 --> 00:09:56.208 But it shouldn't be named JPEG XL 360 00:09:56.208 --> 00:09:56.750 because I think it's 361 00:09:56.750 --> 00:09:58.000 bad- bad publicity. 362 00:09:58.666 --> 00:09:59.333 It is amazing. 363 00:09:59.625 --> 00:10:02.541 It's the most modern royalty free open 364 00:10:02.541 --> 00:10:03.291 standard for images. 365 00:10:03.541 --> 00:10:04.541 It can do everything. 366 00:10:04.541 --> 00:10:05.416 It has a lossless mode. 367 00:10:05.458 --> 00:10:06.666 It has a lossy mode. 368 00:10:06.666 --> 00:10:07.916 It is extremely good. 369 00:10:08.166 --> 00:10:09.375 We're going to be looking at some numbers 370 00:10:09.375 --> 00:10:11.916 and you will- just... I don't know if you- 371 00:10:11.916 --> 00:10:13.250 have you ever used it, James? 372 00:10:14.375 --> 00:10:14.666 No. 373 00:10:14.666 --> 00:10:15.833 Is this one of those things like 374 00:10:15.833 --> 00:10:17.875 JavaScript has nothing to do with Java? 375 00:10:17.875 --> 00:10:19.083 It's just popular at the time. 376 00:10:19.083 --> 00:10:20.333 So it got the same name or? 377 00:10:20.333 --> 00:10:21.666 It's the same design committee. 378 00:10:22.166 --> 00:10:23.333 But... people don't think 379 00:10:23.333 --> 00:10:24.541 of JPEG as a design committee. 380 00:10:24.541 --> 00:10:26.208 They think of it as like those artifacts 381 00:10:26.208 --> 00:10:28.166 that you grew up on. 382 00:10:28.625 --> 00:10:30.625 So even JPEG 2000 was 383 00:10:30.625 --> 00:10:31.541 much better than JPEG. 384 00:10:31.875 --> 00:10:32.625 But I don't know. 385 00:10:32.958 --> 00:10:34.250 Oh, and it's backwards 386 00:10:34.250 --> 00:10:36.291 compatible with classic JPEG. 387 00:10:37.625 --> 00:10:39.416 But I don't know exactly how that works. 388 00:10:40.000 --> 00:10:42.666 I think you can include a version that is 389 00:10:42.666 --> 00:10:44.125 decodable by others? 390 00:10:44.125 --> 00:10:45.958 I don't know exactly how it works. 391 00:10:46.916 --> 00:10:47.333 Or you can. 392 00:10:47.500 --> 00:10:47.958 Oh, you can. 393 00:10:47.958 --> 00:10:49.666 I think you can convert JPEG to JXL 394 00:10:49.666 --> 00:10:50.750 without a loss of quality. 395 00:10:51.083 --> 00:10:52.416 So you can convert your entire library. 396 00:10:52.416 --> 00:10:53.166 I think that's the feature. 397 00:10:54.041 --> 00:10:55.625 The only issue we're looking at a 398 00:10:55.625 --> 00:10:56.791 caniuse screenshot here. 399 00:10:57.666 --> 00:10:58.791 James, tell me what you see. 400 00:10:59.291 --> 00:11:01.041 So... just Apple? 401 00:11:01.416 --> 00:11:01.875 Yeah. 402 00:11:02.375 --> 00:11:03.166 Just Safari. 403 00:11:03.541 --> 00:11:04.125 Just Safari. 404 00:11:04.250 --> 00:11:05.000 Just Safari. 405 00:11:05.125 --> 00:11:06.666 Starting from version.... 406 00:11:06.833 --> 00:11:09.291 And all of them have a little footnote. 407 00:11:09.583 --> 00:11:10.208 Number four. 408 00:11:10.208 --> 00:11:11.250 I don't even know what's in there. 409 00:11:11.250 --> 00:11:13.458 But from Safari 17, which 410 00:11:13.458 --> 00:11:16.416 I think was 2023 something. 411 00:11:17.375 --> 00:11:18.000 I don't know. 412 00:11:18.083 --> 00:11:18.916 Yeah. 413 00:11:19.208 --> 00:11:21.458 Essentially, the only person that sees 414 00:11:21.458 --> 00:11:24.083 those JXL images on my website is me. 415 00:11:24.291 --> 00:11:25.541 The single Safari user. 416 00:11:25.541 --> 00:11:26.583 I would say iPhone users. 417 00:11:27.291 --> 00:11:28.666 And you know, true, actually. 418 00:11:28.875 --> 00:11:29.083 Yeah. 419 00:11:29.083 --> 00:11:30.666 Every engine on on iPhone. 420 00:11:30.708 --> 00:11:32.208 Well, did they change that or is it still 421 00:11:32.208 --> 00:11:33.916 everything is Safari on iPhones? 422 00:11:34.416 --> 00:11:35.583 Or did they relax that finally? 423 00:11:36.166 --> 00:11:37.416 Something something European laws. 424 00:11:37.625 --> 00:11:38.166 I don't know. 425 00:11:38.166 --> 00:11:39.291 Let's make an episode about that. 426 00:11:39.291 --> 00:11:40.583 I know on the work 427 00:11:40.583 --> 00:11:42.625 iPhone, I just use Chrome. 428 00:11:42.666 --> 00:11:43.375 I don't know. 429 00:11:43.458 --> 00:11:44.166 Yeah, you use Chrome, 430 00:11:44.166 --> 00:11:44.875 But they had a thing where- 431 00:11:45.041 --> 00:11:46.166 That's still WebKit. Yeah. 432 00:11:46.416 --> 00:11:47.291 That's different? 433 00:11:47.500 --> 00:11:48.375 It's just a Chrome 434 00:11:48.375 --> 00:11:51.125 skin on Safari's browser. 435 00:11:51.250 --> 00:11:51.625 Yes. 436 00:11:51.708 --> 00:11:52.625 On top of Safari? 437 00:11:53.041 --> 00:11:53.833 What lies! 438 00:11:54.416 --> 00:11:55.208 OK, bye. 439 00:11:56.041 --> 00:11:57.250 So JPEG is excellent. 440 00:11:57.500 --> 00:11:58.416 It is the best. 441 00:11:58.416 --> 00:11:59.083 I love it so much. 442 00:11:59.125 --> 00:11:59.958 And it's also like a 443 00:11:59.958 --> 00:12:01.875 supported natively throughout MacOS. 444 00:12:02.541 --> 00:12:04.625 So you can open JPEG XL images and 445 00:12:04.625 --> 00:12:05.541 preview and everything. 446 00:12:05.791 --> 00:12:07.291 You get the little thumbnails in Finder. 447 00:12:07.500 --> 00:12:09.541 It's just like any other image format. 448 00:12:09.666 --> 00:12:12.500 AVIF is my second favorite choice. 449 00:12:12.875 --> 00:12:16.000 It's essentially AV1 in... as a- 450 00:12:16.166 --> 00:12:17.333 Amos, what's AV1? 451 00:12:17.333 --> 00:12:18.125 What's AV1? 452 00:12:18.125 --> 00:12:19.083 We're going to get to that later because 453 00:12:19.083 --> 00:12:19.916 we're starting with images. 454 00:12:20.250 --> 00:12:23.833 But yeah, AV1 is the current best 455 00:12:23.833 --> 00:12:25.958 royalty free format that 456 00:12:25.958 --> 00:12:28.083 has gotten some adoption. 457 00:12:28.291 --> 00:12:28.916 For videos. 458 00:12:29.166 --> 00:12:29.708 For videos. 459 00:12:29.958 --> 00:12:31.791 So the insight here is that most of the 460 00:12:31.791 --> 00:12:34.333 modern image formats are video codecs 461 00:12:34.333 --> 00:12:35.375 where you just encode 462 00:12:35.375 --> 00:12:36.916 only one frame or more. 463 00:12:36.916 --> 00:12:38.208 If you're trying to replace GIF, you can 464 00:12:38.208 --> 00:12:40.583 just encode an animation because GIF can 465 00:12:40.583 --> 00:12:44.250 do animations because you can tell it to 466 00:12:44.250 --> 00:12:45.875 do more stuff later. 467 00:12:45.875 --> 00:12:48.416 Like the only reason that GIF is sort of 468 00:12:48.416 --> 00:12:51.083 efficient in animation is because it has 469 00:12:51.083 --> 00:12:52.875 what we call in GUI 470 00:12:52.875 --> 00:12:54.541 screen damage rendering. 471 00:12:54.916 --> 00:12:56.416 Essentially, you don't- you don't encode 472 00:12:56.416 --> 00:12:57.833 the entire size of the 473 00:12:57.833 --> 00:12:58.958 image for every frame. 474 00:12:59.291 --> 00:13:01.000 You're just like, OK, this rectangle here 475 00:13:01.000 --> 00:13:02.666 you draw, you add a hat or whatever. 476 00:13:02.666 --> 00:13:03.333 And then you have... 477 00:13:03.375 --> 00:13:05.541 Similar to Delta encoding and stuff like 478 00:13:05.541 --> 00:13:06.708 that, where you're only describing the 479 00:13:06.708 --> 00:13:08.791 changes, not the entire... 480 00:13:08.791 --> 00:13:10.541 entire- every single frame. 481 00:13:10.708 --> 00:13:11.166 Yep. 482 00:13:11.791 --> 00:13:15.375 Whereas video codecs have much better, 483 00:13:15.375 --> 00:13:17.125 much more modern ways of 484 00:13:17.125 --> 00:13:18.541 like motion vector detection. 485 00:13:18.958 --> 00:13:20.375 And that's just the very basics. 486 00:13:20.791 --> 00:13:21.375 I don't- I don't know 487 00:13:21.375 --> 00:13:22.541 what modern codecs are. 488 00:13:22.541 --> 00:13:23.833 I'm not there yet in my research. 489 00:13:24.166 --> 00:13:26.000 So AVIF is great, and the support 490 00:13:26.000 --> 00:13:26.958 is actually pretty decent. 491 00:13:27.625 --> 00:13:30.250 Again, we're looking at a caniuse.com 492 00:13:30.250 --> 00:13:32.166 screenshot here and the browsers that 493 00:13:32.166 --> 00:13:34.333 do not support it are: Internet Explorer 494 00:13:34.333 --> 00:13:37.208 11, which has been killed by Microsoft 495 00:13:37.208 --> 00:13:39.041 officially; Opera Mini, 496 00:13:40.166 --> 00:13:43.041 QQ Browser and KaiOS browser. 497 00:13:43.458 --> 00:13:45.666 So basically some archaic embedded 498 00:13:45.666 --> 00:13:47.791 browsers and that's because Opera Mini is 499 00:13:47.791 --> 00:13:48.500 not even the same as 500 00:13:48.500 --> 00:13:49.500 Opera or Opera Mobile. 501 00:13:49.666 --> 00:13:50.708 It's not the same as Opera Mobile. 502 00:13:50.708 --> 00:13:52.250 Also Opera is dead and buried. 503 00:13:52.291 --> 00:13:53.333 Opera Mini is like the 504 00:13:53.333 --> 00:13:54.416 feature phone browser. 505 00:13:54.666 --> 00:13:56.000 Because Opera GX is just 506 00:13:56.000 --> 00:13:56.958 the malware distributor. 507 00:13:57.125 --> 00:13:57.666 Chrome, right? 508 00:13:57.791 --> 00:13:58.291 Now. 509 00:13:58.500 --> 00:13:59.041 Oh, OK. 510 00:13:59.416 --> 00:13:59.666 Yeah. 511 00:14:00.041 --> 00:14:00.750 Opera has been bought. 512 00:14:00.958 --> 00:14:01.916 They're not even the same people. 513 00:14:02.333 --> 00:14:03.500 I miss the days where Opera 514 00:14:03.500 --> 00:14:05.583 was an actual browser engine. 515 00:14:05.583 --> 00:14:07.291 It was competing with Internet Explorer 516 00:14:07.291 --> 00:14:08.500 and Firefox and whatnot. 517 00:14:08.958 --> 00:14:10.541 But those days are long gone. 518 00:14:10.541 --> 00:14:12.083 The Opera brand is dead. 519 00:14:12.083 --> 00:14:12.666 Everything's dead. 520 00:14:13.000 --> 00:14:15.125 The Opera GX is just... I don't know. 521 00:14:15.125 --> 00:14:15.791 It's a scam. 522 00:14:15.875 --> 00:14:17.125 They have not sponsored any of my videos. 523 00:14:17.416 --> 00:14:18.625 So I was going to say, so we're going to 524 00:14:18.625 --> 00:14:20.333 get that Opera Browser sponsorship 525 00:14:20.333 --> 00:14:24.041 because they did sponsor a ton of YouTube 526 00:14:24.041 --> 00:14:25.708 videos and podcasts and stuff. 527 00:14:25.708 --> 00:14:27.166 So I guess we're... I guess we're not 528 00:14:27.166 --> 00:14:27.875 getting that sweet 529 00:14:27.875 --> 00:14:28.833 Opera Browser sponsorship. 530 00:14:29.083 --> 00:14:29.958 No, we're not. 531 00:14:30.375 --> 00:14:31.833 I mean, I can make a podcast that is 532 00:14:31.833 --> 00:14:33.791 about all the popular sponsors for 533 00:14:33.791 --> 00:14:34.833 YouTubers and why most 534 00:14:34.833 --> 00:14:35.541 of them are bullshit. 535 00:14:35.750 --> 00:14:36.708 The other big one was Honey. 536 00:14:37.250 --> 00:14:39.666 A lot of it came... a lot of information 537 00:14:39.666 --> 00:14:42.333 came out about that browser extension. 538 00:14:42.500 --> 00:14:42.958 Yeah. 539 00:14:42.958 --> 00:14:44.166 When I see someone sponsor 540 00:14:44.166 --> 00:14:46.250 like one or two podcasts, especially like 541 00:14:46.250 --> 00:14:47.291 in a specific niche, I'm 542 00:14:47.291 --> 00:14:48.291 like, OK, that makes sense. 543 00:14:48.666 --> 00:14:50.416 When every single podcast and YouTube 544 00:14:50.416 --> 00:14:52.166 video I watch has the same sponsor, I'm 545 00:14:52.166 --> 00:14:53.000 like, they have too 546 00:14:53.000 --> 00:14:54.041 much marketing budget. 547 00:14:54.041 --> 00:14:55.958 And I don't know- that makes me... that's 548 00:14:55.958 --> 00:14:57.791 like negative incentive to me. 549 00:14:57.791 --> 00:14:58.500 True. 550 00:14:58.541 --> 00:15:01.000 So we've seen JPEG XL, we've seen AVIF 551 00:15:01.458 --> 00:15:04.166 And then because AVIF is not supported 552 00:15:04.166 --> 00:15:06.666 everywhere yet, I also include WebP, 553 00:15:07.125 --> 00:15:09.291 which is VP8 in a trench coat. 554 00:15:09.291 --> 00:15:11.375 So again, it's based on a video codec, a 555 00:15:11.375 --> 00:15:12.666 much older one, actually. 556 00:15:13.000 --> 00:15:15.666 WebP was announced September 2010 557 00:15:15.666 --> 00:15:17.500 and the first stable version of its 558 00:15:17.500 --> 00:15:18.166 supporting library, 559 00:15:18.166 --> 00:15:19.416 which was released in April 2018. 560 00:15:19.666 --> 00:15:21.375 So that took a little while. 561 00:15:21.416 --> 00:15:23.375 But basically, Google bought onto 562 00:15:23.375 --> 00:15:27.291 technologies and they had codecs and they 563 00:15:27.291 --> 00:15:29.250 used it and then they extended the format 564 00:15:29.250 --> 00:15:31.333 over the next bunch of years. 565 00:15:32.041 --> 00:15:34.500 And AVIF is designed to 566 00:15:34.500 --> 00:15:35.666 be a successor to WebP. 567 00:15:35.666 --> 00:15:37.791 So WebP has almost universal adoption. 568 00:15:38.416 --> 00:15:39.125 This looks like the same 569 00:15:39.125 --> 00:15:40.166 screenshot, but it's not. 570 00:15:40.708 --> 00:15:42.000 WebP has been supported by a lot of 571 00:15:42.000 --> 00:15:43.833 browsers for a very long time. 572 00:15:44.208 --> 00:15:46.125 So if you look at the AVIF one, it's only 573 00:15:46.125 --> 00:15:48.916 supported since Safari 16.4. 574 00:15:49.375 --> 00:15:52.500 Why is WebP since 14 on iOS. 575 00:15:53.458 --> 00:15:54.958 So, yeah, for older iPhones. 576 00:15:55.291 --> 00:15:57.250 Hey, plus we get the Baidu - excuse me, 577 00:15:57.250 --> 00:15:58.666 the QQ Browser back on this one. 578 00:15:58.666 --> 00:15:59.250 We do. 579 00:15:59.291 --> 00:16:01.041 And the KaiOS Browser and Opera Mini. 580 00:16:01.625 --> 00:16:03.166 But I really don't like WebP. 581 00:16:03.750 --> 00:16:04.750 We're going to get into that. 582 00:16:05.208 --> 00:16:06.833 A little PSA in the 583 00:16:06.833 --> 00:16:07.791 middle of this episode. 584 00:16:08.250 --> 00:16:09.666 Modern image formats are good. 585 00:16:10.125 --> 00:16:10.666 You're wrong. 586 00:16:10.958 --> 00:16:11.916 Most people are wrong. 587 00:16:11.916 --> 00:16:13.500 I see a lot of people complaining about: 588 00:16:13.500 --> 00:16:14.541 oh, I downloaded an image 589 00:16:14.541 --> 00:16:16.208 from a website and it's WebP. 590 00:16:16.250 --> 00:16:18.083 I just wish they served JPEG or PNG. 591 00:16:18.666 --> 00:16:19.416 Get with the times. 592 00:16:19.708 --> 00:16:22.166 OK, they saved so much 593 00:16:22.166 --> 00:16:23.041 bandwidth with that. 594 00:16:23.041 --> 00:16:24.125 They're saving the planet. 595 00:16:24.125 --> 00:16:25.708 We cannot afford to serve 596 00:16:25.708 --> 00:16:27.291 everything as PNG anymore. 597 00:16:27.583 --> 00:16:29.333 We have so so many like 598 00:16:29.333 --> 00:16:30.666 much better formats now. 599 00:16:31.000 --> 00:16:32.916 I'm also annoyed because I have to 600 00:16:32.916 --> 00:16:34.458 convert everything to PNG to 601 00:16:34.458 --> 00:16:35.625 drag into DaVinci Resolve. 602 00:16:35.916 --> 00:16:36.666 That was my question 603 00:16:36.666 --> 00:16:37.625 is what makes them good? 604 00:16:37.625 --> 00:16:38.625 Is it just they're more 605 00:16:38.625 --> 00:16:40.416 efficient for a given quality or? 606 00:16:40.750 --> 00:16:41.291 Yes. 607 00:16:41.416 --> 00:16:42.291 There's also extra 608 00:16:42.291 --> 00:16:44.958 features, but mostly mostly is that. 609 00:16:45.375 --> 00:16:45.791 Yeah, we're going to 610 00:16:45.791 --> 00:16:47.291 look at numbers in a second. 611 00:16:47.541 --> 00:16:49.250 This is where I chose to somehow put the 612 00:16:49.250 --> 00:16:52.666 slide for the my image upload workflow 613 00:16:52.666 --> 00:16:56.250 for some reason, which yeah, I drag onto 614 00:16:56.250 --> 00:16:58.083 my website in the browser window. 615 00:16:58.083 --> 00:16:59.000 Oh, yeah, I wanted to 616 00:16:59.000 --> 00:17:00.458 mention that... something fun. 617 00:17:01.041 --> 00:17:02.666 If you drag something on a browser window 618 00:17:02.666 --> 00:17:05.416 on Mac, it does not focus the window. 619 00:17:05.875 --> 00:17:06.750 It does not raise the window. 620 00:17:07.166 --> 00:17:08.625 So that's really annoying because I 621 00:17:08.625 --> 00:17:10.000 wanted to autofocus the 622 00:17:10.000 --> 00:17:11.916 image name input field. 623 00:17:12.041 --> 00:17:14.000 And yeah, it is, but the Safari is not 624 00:17:14.000 --> 00:17:15.333 active, so it doesn't work. 625 00:17:15.833 --> 00:17:17.875 So I don't know if you remember a topic 626 00:17:17.875 --> 00:17:18.875 I've covered recently, James. 627 00:17:19.500 --> 00:17:20.708 Is this the automator? 628 00:17:20.958 --> 00:17:22.416 Is this the reason that you got the 629 00:17:22.416 --> 00:17:24.166 automator stuff working so you can like 630 00:17:24.166 --> 00:17:25.666 bring the browser to foreground? 631 00:17:26.083 --> 00:17:28.125 It's not the reason, but yeah, then I 632 00:17:28.125 --> 00:17:29.041 just sold it like that. 633 00:17:29.041 --> 00:17:30.291 I was like, OK, now I'm just calling 634 00:17:30.291 --> 00:17:31.416 a script to tell 635 00:17:31.416 --> 00:17:32.708 Safari to activate itself. 636 00:17:33.041 --> 00:17:35.250 And so whenever an image drops... there's a 637 00:17:35.250 --> 00:17:36.625 bunch of things like that that I can do 638 00:17:36.625 --> 00:17:38.000 because I'm running a server locally. 639 00:17:38.708 --> 00:17:40.916 So anything that is not allowed on a web 640 00:17:40.916 --> 00:17:42.458 page for security reasons, like bringing 641 00:17:42.458 --> 00:17:45.416 the window to the front, I can do from 642 00:17:45.416 --> 00:17:46.625 native code as a Rust 643 00:17:46.625 --> 00:17:48.333 binary signed locally. 644 00:17:48.791 --> 00:17:51.083 So yeah, it's a really fun, fun tidbit. 645 00:17:51.250 --> 00:17:53.041 I'm sure you could pop all the sandboxing 646 00:17:53.041 --> 00:17:55.666 and the anti like pop under and pop over 647 00:17:55.666 --> 00:17:58.541 and all the stuff is disabled for 648 00:17:58.541 --> 00:18:00.291 external content because it's been 649 00:18:00.291 --> 00:18:02.250 obnoxious for 20 years. 650 00:18:02.333 --> 00:18:03.333 But it's very useful 651 00:18:03.333 --> 00:18:04.916 in these kind of cases. 652 00:18:05.250 --> 00:18:06.333 Well, no, yeah, I don't. 653 00:18:06.375 --> 00:18:08.291 I don't think Safari allows you to 654 00:18:08.291 --> 00:18:10.375 disable any of the security around 655 00:18:10.375 --> 00:18:12.208 running code from local host. 656 00:18:12.833 --> 00:18:13.791 That would be pretty bad. 657 00:18:14.125 --> 00:18:15.750 They already don't... like they considered 658 00:18:15.750 --> 00:18:18.750 it mixed content in an insecure origin. 659 00:18:18.750 --> 00:18:19.416 I don't know. 660 00:18:19.416 --> 00:18:21.333 There's a... if you use the samply 661 00:18:21.333 --> 00:18:23.541 profiler, they say use Firefox or Chrome 662 00:18:23.541 --> 00:18:26.916 to show... because it's opening 663 00:18:26.916 --> 00:18:28.833 profiler.firefox.com to visualize the 664 00:18:28.833 --> 00:18:29.791 traces and the traces 665 00:18:29.791 --> 00:18:31.083 are served from local host. 666 00:18:31.083 --> 00:18:32.875 And Safari prevents that because like no, 667 00:18:32.875 --> 00:18:35.583 an HTTPS page cannot load content from 668 00:18:35.583 --> 00:18:36.666 local host over HTTP. 669 00:18:36.666 --> 00:18:37.583 That doesn't work. 670 00:18:37.583 --> 00:18:39.666 You get like CORS rules 671 00:18:39.666 --> 00:18:41.166 violations and stuff like that? 672 00:18:41.583 --> 00:18:43.208 I'm not sure it's CORS even. 673 00:18:43.583 --> 00:18:45.458 But yeah, something like that. 674 00:18:45.666 --> 00:18:46.375 There's an error. 675 00:18:46.375 --> 00:18:47.333 That says just use Firefox. 676 00:18:47.333 --> 00:18:49.125 It's the only reason I use Firefox. 677 00:18:49.958 --> 00:18:51.083 And then I complain about it because they 678 00:18:51.083 --> 00:18:52.875 call themselves an indie browser 679 00:18:52.875 --> 00:18:55.166 in 2025, which makes me laugh. 680 00:18:55.541 --> 00:18:57.750 It was true once, but then it wasn't. 681 00:18:58.083 --> 00:19:00.000 So about images, I didn't 682 00:19:00.041 --> 00:19:01.458 just have to pick formats. 683 00:19:01.458 --> 00:19:03.583 I had to, like I said, create a bitrate 684 00:19:03.583 --> 00:19:05.583 ladder or like choose a bunch of presets 685 00:19:05.583 --> 00:19:08.291 to decide how big am I comfortable with 686 00:19:08.291 --> 00:19:09.375 the images being and whatnot. 687 00:19:09.750 --> 00:19:11.208 And then when you do that, you want to 688 00:19:11.208 --> 00:19:13.041 have some number... 689 00:19:13.041 --> 00:19:14.458 You want to have the computer compare the 690 00:19:14.458 --> 00:19:15.625 quality of the two images. 691 00:19:15.625 --> 00:19:16.416 You don't want to eyeball 692 00:19:16.416 --> 00:19:17.291 it because you get tired. 693 00:19:17.541 --> 00:19:18.666 It's a long day, blah, blah, blah. 694 00:19:19.041 --> 00:19:21.833 It's complicated because computer scores 695 00:19:21.833 --> 00:19:23.125 can sometimes be high and 696 00:19:23.125 --> 00:19:24.750 humans can say that it looks bad. 697 00:19:24.875 --> 00:19:28.083 But ssim, which is structural 698 00:19:28.083 --> 00:19:30.375 similarity index is not the worst. 699 00:19:31.250 --> 00:19:33.000 It's perception- it's a 700 00:19:33.000 --> 00:19:34.166 perception based model. 701 00:19:34.166 --> 00:19:36.208 So it's better than PSNR 'peak 702 00:19:36.208 --> 00:19:38.375 signal-to-noise ratio' or MSE. 703 00:19:38.666 --> 00:19:39.625 You got to describe this because it's 704 00:19:39.625 --> 00:19:40.875 something I'm vaguely aware of. 705 00:19:41.125 --> 00:19:42.750 Most of these tools don't 706 00:19:42.750 --> 00:19:44.708 usually have like a fixed, "Ah, 707 00:19:44.708 --> 00:19:46.333 we keep 80 percent of 708 00:19:46.333 --> 00:19:47.291 the original pixels." 709 00:19:47.708 --> 00:19:49.375 They have these whole heuristic systems 710 00:19:49.375 --> 00:19:52.000 of like: well, human eyes usually can 711 00:19:52.000 --> 00:19:53.291 notice these kind of things. 712 00:19:53.500 --> 00:19:55.833 And where we cheat is 713 00:19:55.833 --> 00:19:57.375 on the margins of that. 714 00:19:57.958 --> 00:19:59.708 Yeah, the biggest example, I 715 00:19:59.708 --> 00:20:01.416 think, is chroma subsampling. 716 00:20:02.000 --> 00:20:03.458 Essentially, you can afford to throw 717 00:20:03.458 --> 00:20:06.541 away some color information more easily. 718 00:20:06.541 --> 00:20:07.875 Like you can get away with that better 719 00:20:07.875 --> 00:20:10.041 than you can throwing away brightness, 720 00:20:10.500 --> 00:20:13.041 slash luminosity, slash luma information, 721 00:20:13.458 --> 00:20:16.000 because we we pay attention to contrast 722 00:20:16.000 --> 00:20:17.375 more than we do color. 723 00:20:17.416 --> 00:20:19.416 And that's the reason certain shades of 724 00:20:19.416 --> 00:20:23.125 red appear really poorly on any YouTube 725 00:20:23.125 --> 00:20:25.000 video, because most of the stuff we watch 726 00:20:25.000 --> 00:20:29.291 is YUV420P and yeah, certain calls 727 00:20:29.291 --> 00:20:30.458 just completely die. 728 00:20:30.750 --> 00:20:32.416 If you do screen recording in OBS and 729 00:20:32.416 --> 00:20:33.791 you watch it back and you're like, "Oh, 730 00:20:33.791 --> 00:20:35.458 the syntax highlighting is all wrong." 731 00:20:35.458 --> 00:20:37.041 That's why. The calls are changing. 732 00:20:37.041 --> 00:20:37.750 You're not crazy. 733 00:20:37.833 --> 00:20:41.291 So we're looking at a slide that shows a 734 00:20:41.291 --> 00:20:44.083 table. The columns of format, parameter 735 00:20:44.083 --> 00:20:47.083 size and SSIM, structural similarity 736 00:20:47.083 --> 00:20:50.041 index, and the reference image is a PNG. 737 00:20:50.583 --> 00:20:52.000 It's a PNG screenshot 738 00:20:52.000 --> 00:20:53.625 that I took with CleanShot. 739 00:20:54.000 --> 00:20:56.500 And then, as I said, I transcode that to 740 00:20:56.500 --> 00:20:58.333 convert that to JPEG XL 741 00:20:58.333 --> 00:21:00.458 when dropping onto the website. 742 00:21:00.916 --> 00:21:03.000 And then from there, because that's my 743 00:21:03.000 --> 00:21:04.666 storage format, I convert 744 00:21:04.666 --> 00:21:07.083 to AVIF and WebP on demand. 745 00:21:07.583 --> 00:21:08.666 And we can see the sizes here. 746 00:21:08.666 --> 00:21:11.333 The JPEG XL version is 200 kilobytes. 747 00:21:11.833 --> 00:21:13.791 The AVIF version is 270 kilobytes. 748 00:21:13.875 --> 00:21:15.666 And the WebP version is 300 kilobytes. 749 00:21:16.416 --> 00:21:19.291 And the SSIM are all... there's two ways to 750 00:21:19.291 --> 00:21:20.500 look at SSIM numbers. 751 00:21:20.625 --> 00:21:22.375 There's the number from zero to one and 752 00:21:22.375 --> 00:21:24.875 the decimal number, which is a log scale. 753 00:21:25.458 --> 00:21:26.250 And what's interesting 754 00:21:26.250 --> 00:21:27.625 is that higher is better. 755 00:21:27.916 --> 00:21:30.625 First of all, I don't know why this is 756 00:21:30.625 --> 00:21:32.708 we're going to get some emails, I guess. 757 00:21:32.708 --> 00:21:35.291 But the SSIM score for AVIF and WebP, 758 00:21:35.291 --> 00:21:38.083 which are re-encoded from JPEG XL, are 759 00:21:38.083 --> 00:21:40.958 somehow higher than the score for the 760 00:21:40.958 --> 00:21:42.458 JPEG XL one that is 761 00:21:42.458 --> 00:21:43.958 encoded directly from the PNG. 762 00:21:44.791 --> 00:21:47.250 So I have no idea why this is happening. 763 00:21:47.916 --> 00:21:49.250 Luck, I guess. 764 00:21:49.541 --> 00:21:52.875 My theory as someone who is a complete 765 00:21:52.875 --> 00:21:54.458 fraud in this domain but has played 766 00:21:54.458 --> 00:21:56.291 around with a lot of things is that 767 00:21:56.291 --> 00:21:59.291 codecs like AVIF and WebP reproduce some 768 00:21:59.291 --> 00:22:03.583 artifacts that SSIM is used to. 769 00:22:03.875 --> 00:22:05.208 I don't know. 770 00:22:05.583 --> 00:22:08.166 This theory is probably completely wrong 771 00:22:08.166 --> 00:22:10.458 for SSIM, but not for the next one. 772 00:22:10.500 --> 00:22:12.583 It's a 'tagged for future research.' 773 00:22:13.250 --> 00:22:15.083 But anyway, we get as far as decibels go, 774 00:22:15.375 --> 00:22:18.708 the JPEG XL one is 20.9 dB, AVIF 775 00:22:18.708 --> 00:22:22.666 is 22.9, well, 23, and WebP is 21.4. 776 00:22:23.041 --> 00:22:24.208 And anything like 777 00:22:24.208 --> 00:22:26.333 above 20 is extremely good. 778 00:22:26.541 --> 00:22:28.875 So those are almost visually lossless. 779 00:22:29.250 --> 00:22:31.458 And we're saving... in just 10 percent of 780 00:22:31.458 --> 00:22:33.750 the original size or even less. 781 00:22:33.750 --> 00:22:35.833 The choice I made here is that I'm going 782 00:22:35.833 --> 00:22:37.500 to be paying the cost of people not 783 00:22:37.500 --> 00:22:39.166 supporting JPEG XL. 784 00:22:39.250 --> 00:22:40.333 They're going to I'm going to serve 785 00:22:40.333 --> 00:22:42.750 slightly larger images for them so that 786 00:22:42.750 --> 00:22:45.041 they can get decent quality. 787 00:22:45.041 --> 00:22:45.916 But I don't need it to 788 00:22:45.916 --> 00:22:47.125 be completely lossless. 789 00:22:47.125 --> 00:22:48.916 I used to say, "Oh, for screenshots, I 790 00:22:48.916 --> 00:22:51.000 want PNG," but now ... there's no 791 00:22:51.000 --> 00:22:52.333 need really for JPEG XL. 792 00:22:52.333 --> 00:22:53.125 The quality. 793 00:22:53.458 --> 00:22:54.250 This is my last slide, 794 00:22:54.250 --> 00:22:55.125 so I might have to move. 795 00:22:55.125 --> 00:22:56.083 But there's no quality 796 00:22:56.083 --> 00:22:57.666 setting for the JPEG XL encoder. 797 00:22:57.666 --> 00:22:58.625 There's a distance setting. 798 00:22:58.916 --> 00:23:01.833 A distance of zero is lossless. 799 00:23:02.458 --> 00:23:04.958 Distance of one is excellent. 800 00:23:05.541 --> 00:23:07.125 Two is still very, very good. 801 00:23:07.416 --> 00:23:08.791 And it goes all the way up to 15. 802 00:23:09.208 --> 00:23:10.875 The distance I chose is 5.5. 803 00:23:11.333 --> 00:23:12.958 And then there's also an effort, which is 804 00:23:12.958 --> 00:23:15.500 how long... how much computing it's willing 805 00:23:15.500 --> 00:23:16.958 to do to try and optimize 806 00:23:16.958 --> 00:23:17.916 the quality of the image. 807 00:23:18.250 --> 00:23:19.375 And it goes from one to 10 808 00:23:19.375 --> 00:23:20.458 and the default is seven. 809 00:23:20.458 --> 00:23:21.875 And they all have nice little names. 810 00:23:22.208 --> 00:23:23.208 The number seven is squirrel. 811 00:23:23.458 --> 00:23:25.041 Oh, these like preset names or something? 812 00:23:25.041 --> 00:23:26.500 Yeah, the effort levels. 813 00:23:26.875 --> 00:23:29.041 Effort level one is Falcon, if I 814 00:23:29.041 --> 00:23:30.500 remember correctly. They all have 815 00:23:30.500 --> 00:23:31.375 different animal names. 816 00:23:31.375 --> 00:23:33.125 For AVIF you have the boring quality from 817 00:23:33.125 --> 00:23:35.875 zero to 100 and also a speed one, which 818 00:23:35.875 --> 00:23:37.666 I'm assuming is the 819 00:23:37.666 --> 00:23:38.833 reverse of the effort. 820 00:23:39.291 --> 00:23:41.083 Like effort, the higher the effort, the 821 00:23:41.083 --> 00:23:42.166 longer it takes to encode. 822 00:23:42.166 --> 00:23:42.958 But speed is the 823 00:23:42.958 --> 00:23:44.916 higher- the speedier it is. 824 00:23:44.916 --> 00:23:45.916 Jesus fucking Christ. 825 00:23:46.125 --> 00:23:49.958 My cat is wreaking havoc on this episode. 826 00:23:50.000 --> 00:23:50.916 Meow, meow, meow. 827 00:23:51.416 --> 00:23:52.833 And then for WebP again, you have a 828 00:23:52.833 --> 00:23:54.625 boring zero to 100 quality. 829 00:23:55.291 --> 00:23:55.875 Meow. 830 00:23:55.916 --> 00:23:56.708 We need cat break. 831 00:23:56.958 --> 00:23:57.708 Meow in the mic, please. 832 00:23:58.500 --> 00:23:58.708 Meow. 833 00:24:00.541 --> 00:24:01.000 Exactly. 834 00:24:01.083 --> 00:24:02.500 Oh, we got some purrs. 835 00:24:02.500 --> 00:24:03.083 Yay! 836 00:24:03.208 --> 00:24:04.166 So that's for images. 837 00:24:04.500 --> 00:24:07.000 But I've been, as I mentioned in other 838 00:24:07.000 --> 00:24:09.125 episodes, I've been doing this dual 839 00:24:09.125 --> 00:24:10.958 feature thing where I make a video and an 840 00:24:10.958 --> 00:24:12.000 article at the same time. 841 00:24:12.000 --> 00:24:13.708 So I make content that works as either. 842 00:24:14.125 --> 00:24:15.958 And the video sucks a little bit because 843 00:24:15.958 --> 00:24:17.500 you have to look at code and the article 844 00:24:17.500 --> 00:24:19.458 sucks a little bit because I can't show 845 00:24:19.458 --> 00:24:21.500 visual aspects just as well. 846 00:24:21.500 --> 00:24:23.791 And I'm fixing that last part by doing 847 00:24:23.791 --> 00:24:25.583 more screencaps or 848 00:24:25.583 --> 00:24:27.750 screencasts instead of screenshots. 849 00:24:27.833 --> 00:24:29.375 So I can show things that move. 850 00:24:29.375 --> 00:24:31.250 I can include little bits of video within 851 00:24:31.250 --> 00:24:32.166 the article in line. 852 00:24:32.708 --> 00:24:34.250 And that's harder than it seems because 853 00:24:34.250 --> 00:24:35.791 essentially what I used to do is just 854 00:24:35.791 --> 00:24:38.083 encode as H.264 with 855 00:24:38.083 --> 00:24:38.916 a reasonable bitrate. 856 00:24:39.208 --> 00:24:40.041 And that's supported 857 00:24:40.041 --> 00:24:40.791 basically everywhere. 858 00:24:41.208 --> 00:24:43.750 But I was not happy with that because now 859 00:24:43.750 --> 00:24:44.958 I have this great image pipeline. 860 00:24:44.958 --> 00:24:45.916 So I was like, I want 861 00:24:45.916 --> 00:24:46.541 the same experience. 862 00:24:46.541 --> 00:24:48.750 I want to be able to grab some video. 863 00:24:49.250 --> 00:24:52.375 This slide is a photo I took of my screen 864 00:24:52.375 --> 00:24:54.916 with CleanShotX open in video recording 865 00:24:54.916 --> 00:24:56.541 mode to show you that you can just choose 866 00:24:56.541 --> 00:24:58.250 a rectangle to capture and 867 00:24:58.250 --> 00:24:59.583 then you can show clicks. 868 00:24:59.583 --> 00:25:00.291 You can record the 869 00:25:00.291 --> 00:25:01.458 mic, the computer audio. 870 00:25:01.791 --> 00:25:02.750 You can even add a webcam. 871 00:25:03.041 --> 00:25:05.416 It has the whole shebang and record a 872 00:25:05.416 --> 00:25:06.708 video and that gives you H.264. 873 00:25:07.291 --> 00:25:08.750 And again, it goes to a corner of the 874 00:25:08.750 --> 00:25:10.166 screen and then you can drag that... 875 00:25:10.458 --> 00:25:12.375 For me, you can drag it directly in the 876 00:25:12.375 --> 00:25:13.666 browser and it's going to upload. 877 00:25:14.041 --> 00:25:16.875 And then the mistake I made when I first 878 00:25:16.875 --> 00:25:20.000 built, well, V2 of my video platform is 879 00:25:20.000 --> 00:25:22.083 that I linked directly against ffmpeg and 880 00:25:22.083 --> 00:25:23.916 I dealt with raw images and I had to 881 00:25:23.916 --> 00:25:25.250 think about timestamps and whatnot. 882 00:25:25.458 --> 00:25:26.750 This time around, I'm older. 883 00:25:26.958 --> 00:25:27.583 I'm wiser. 884 00:25:27.958 --> 00:25:29.500 I have less time. 885 00:25:30.750 --> 00:25:34.000 I just use the ffmpeg binary and there's 886 00:25:34.000 --> 00:25:37.083 a Rust crate called ffmpeg-sidecar, which 887 00:25:37.083 --> 00:25:39.458 does the hard work for you. 888 00:25:39.458 --> 00:25:41.291 It downloads ffmpeg if you don't have it. 889 00:25:41.291 --> 00:25:41.958 I do have it. 890 00:25:41.958 --> 00:25:43.708 I'm making a dock of containers, so I 891 00:25:43.708 --> 00:25:44.833 just added a build in there. 892 00:25:44.833 --> 00:25:46.458 But it also parses the output 893 00:25:46.458 --> 00:25:48.916 of ffmpeg into Rust structs. 894 00:25:48.916 --> 00:25:51.416 So if you're asking ffmpeg to output raw 895 00:25:51.416 --> 00:25:53.291 video frames, for example, it's going to 896 00:25:53.291 --> 00:25:54.958 be able to split those. 897 00:25:55.541 --> 00:25:57.166 It's going to tell you all the 898 00:25:57.166 --> 00:25:58.375 information about the different streams 899 00:25:58.375 --> 00:25:59.083 that are the input 900 00:25:59.083 --> 00:26:00.208 streams, the output streams. 901 00:26:00.250 --> 00:26:01.916 It's going to deal with pipes so you can 902 00:26:01.916 --> 00:26:03.166 pipe data into ffmpeg. 903 00:26:03.458 --> 00:26:04.291 So it's great. 904 00:26:04.541 --> 00:26:05.666 It's honestly, I don't know 905 00:26:05.666 --> 00:26:06.875 where it's been all the time. 906 00:26:07.166 --> 00:26:08.333 Maybe it's more recent 907 00:26:08.333 --> 00:26:09.458 than my other attempts. 908 00:26:09.750 --> 00:26:11.125 I've seen something similar for the other 909 00:26:11.125 --> 00:26:12.625 big one that gets mentioned a lot in 910 00:26:12.625 --> 00:26:14.375 these spaces is uh... cURL. 911 00:26:14.625 --> 00:26:15.958 And I think I've seen similar crates, 912 00:26:15.958 --> 00:26:17.416 which either... they're, they've seen one 913 00:26:17.416 --> 00:26:18.708 which bind to libcurl. 914 00:26:18.708 --> 00:26:20.000 And I think I've seen other ones that are 915 00:26:20.000 --> 00:26:21.250 like: do you really want 916 00:26:21.250 --> 00:26:22.666 no size in your binary? 917 00:26:22.750 --> 00:26:25.333 Because we will just do the cURL command 918 00:26:25.333 --> 00:26:26.708 line interface for things. 919 00:26:26.708 --> 00:26:28.875 And if you only need to make one REST 920 00:26:28.875 --> 00:26:31.583 request, it might be nicer than including 921 00:26:31.583 --> 00:26:33.708 a whole bunch into your crate itself. 922 00:26:34.083 --> 00:26:36.291 It's funny because that feels nasty. 923 00:26:36.791 --> 00:26:39.500 But to me, it hurts my my delicate 924 00:26:39.500 --> 00:26:41.000 sensibilities because I like 925 00:26:41.000 --> 00:26:42.125 to link against everything. 926 00:26:42.125 --> 00:26:43.791 But specifically when I think of ffmpeg, 927 00:26:44.208 --> 00:26:45.541 I think having it run in a separate 928 00:26:45.541 --> 00:26:46.750 process is not the 929 00:26:46.750 --> 00:26:47.458 worst thing in the world. 930 00:26:47.541 --> 00:26:50.333 Because a lot of codec code is kind of 931 00:26:50.333 --> 00:26:53.458 wishy washy security wise 932 00:26:53.458 --> 00:26:55.875 and crash resistance wise. 933 00:26:56.333 --> 00:26:57.708 So some of it is 934 00:26:57.708 --> 00:26:59.541 basically untrusted user input. 935 00:26:59.541 --> 00:27:00.208 And if you allow 936 00:27:00.208 --> 00:27:01.333 people upload video, whatever. 937 00:27:01.791 --> 00:27:03.750 So if I allow the random people to upload 938 00:27:03.750 --> 00:27:05.500 things to my website, I would run that in 939 00:27:05.500 --> 00:27:07.000 sand boxes or even a VM. 940 00:27:07.666 --> 00:27:10.125 So yeah, a process is a good start. 941 00:27:10.125 --> 00:27:11.375 If it crashes, it's not going to bring 942 00:27:11.375 --> 00:27:12.666 down the entire website at least. 943 00:27:12.666 --> 00:27:13.875 Oh, and it's super easy to cancel. 944 00:27:13.875 --> 00:27:15.416 You just kill dash nine in the process. 945 00:27:15.416 --> 00:27:15.833 That's it. 946 00:27:15.916 --> 00:27:16.958 Send SIGKILL. 947 00:27:17.000 --> 00:27:17.875 Well, I sent SIGTERM 948 00:27:17.875 --> 00:27:18.708 first because I'm nice. 949 00:27:19.500 --> 00:27:21.166 Next up, we have a map of the world. 950 00:27:21.458 --> 00:27:23.250 James, can you guess what's on that map? 951 00:27:23.583 --> 00:27:25.958 Is this the fasterthanlime content 952 00:27:25.958 --> 00:27:26.833 distribution network? 953 00:27:27.416 --> 00:27:28.541 That's exactly right. 954 00:27:28.791 --> 00:27:29.833 We have a control plane. 955 00:27:30.041 --> 00:27:32.458 So you've got West Coast US, East Coast US 956 00:27:32.458 --> 00:27:35.333 you've got UK, Germany. 957 00:27:36.458 --> 00:27:37.375 No, yeah, Germany. 958 00:27:38.541 --> 00:27:40.375 And where in Southeast Asia is that? 959 00:27:40.666 --> 00:27:41.375 Singapore! 960 00:27:41.583 --> 00:27:42.291 Singapore. Yay! 961 00:27:42.500 --> 00:27:43.333 OK, excellent. 962 00:27:43.416 --> 00:27:43.916 Ooh, Amanda. 963 00:27:43.958 --> 00:27:45.458 I was really good at geography. 964 00:27:46.000 --> 00:27:46.458 I was not. 965 00:27:46.458 --> 00:27:47.708 I had to look all these up. 966 00:27:47.708 --> 00:27:51.333 I'm deadly... deathly afraid that I got one 967 00:27:51.333 --> 00:27:52.083 of them wrong and we're 968 00:27:52.083 --> 00:27:53.250 going to get mail about it. 969 00:27:53.708 --> 00:27:57.208 But yeah, we have the slightly pinkish 970 00:27:57.208 --> 00:27:59.000 one is the control plane. 971 00:27:59.000 --> 00:28:00.833 It's a dedicated Hetzner server in 972 00:28:00.833 --> 00:28:02.041 Falkenstein, Germany. 973 00:28:02.625 --> 00:28:04.125 And then the edge nodes, we have one in 974 00:28:04.125 --> 00:28:06.291 Hillsborough, Oregon on the West Coast. 975 00:28:06.750 --> 00:28:08.291 Ashburn, Virginia on the East Coast. 976 00:28:08.583 --> 00:28:10.583 And then in Digital Ocean Droplets, we 977 00:28:10.583 --> 00:28:12.458 have one in London and one in Singapore. 978 00:28:12.958 --> 00:28:14.125 And those machines have 979 00:28:14.125 --> 00:28:15.291 very different characteristics. 980 00:28:16.333 --> 00:28:19.250 The control plane, which is also like the 981 00:28:19.250 --> 00:28:22.541 Kubernetes cluster... surely they figured 982 00:28:22.541 --> 00:28:24.375 out an other word than 'Master' by now. 983 00:28:24.583 --> 00:28:25.083 I don't know. 984 00:28:25.291 --> 00:28:26.333 It's the main node. 985 00:28:26.791 --> 00:28:28.166 It has 64 gigs of RAM. 986 00:28:28.166 --> 00:28:29.083 It has 20 cores. 987 00:28:29.083 --> 00:28:30.291 It's a 13th generation 988 00:28:30.291 --> 00:28:33.666 core i5, so it's an i5-13500. 989 00:28:34.041 --> 00:28:38.541 And it has two 512 gigabytes NVME SSDs 990 00:28:38.541 --> 00:28:39.458 that are in RAID 0 991 00:28:39.458 --> 00:28:40.708 because life is short. 992 00:28:42.458 --> 00:28:43.000 Got to go fast. 993 00:28:43.291 --> 00:28:43.916 Got to go fast. 994 00:28:45.041 --> 00:28:45.666 James, can you explain? 995 00:28:47.166 --> 00:28:48.791 RAID is the redundant array of 996 00:28:48.791 --> 00:28:50.250 inexpensive drives, and 997 00:28:50.250 --> 00:28:51.791 RAID 0 means you... 998 00:28:51.791 --> 00:28:52.416 Discs, but yes. 999 00:28:52.666 --> 00:28:53.166 What is it? 1000 00:28:53.166 --> 00:28:54.333 I think it's discs, not drives. 1001 00:28:54.625 --> 00:28:55.416 Oh, is it? 1002 00:28:55.416 --> 00:28:55.583 No. 1003 00:28:55.916 --> 00:28:56.333 Did I just... 1004 00:28:56.708 --> 00:28:57.666 I'm going to... 1005 00:28:57.666 --> 00:28:58.166 I don't know. 1006 00:28:58.166 --> 00:28:58.625 I think it's been 1007 00:28:58.625 --> 00:29:00.958 backronymed anyway, so it's whatever. 1008 00:29:01.333 --> 00:29:02.958 But yeah, I mean, RAID 0 is the... 1009 00:29:02.958 --> 00:29:03.541 I have no... 1010 00:29:04.208 --> 00:29:05.625 Like, RAID 1 means that you have two 1011 00:29:05.625 --> 00:29:06.666 copies of the same thing. 1012 00:29:06.666 --> 00:29:08.875 So if one drive fails, you're fine. 1013 00:29:09.416 --> 00:29:11.000 And it also usually sometimes is faster 1014 00:29:11.000 --> 00:29:13.041 because it means you can pull from both 1015 00:29:13.041 --> 00:29:14.041 drives at the same 1016 00:29:14.041 --> 00:29:15.333 time of the same content. 1017 00:29:15.666 --> 00:29:18.125 RAID 0 means smash them together as if 1018 00:29:18.125 --> 00:29:19.666 they were one really big drive. 1019 00:29:20.208 --> 00:29:22.458 And so if one of them fails, it's like 1020 00:29:22.458 --> 00:29:24.583 your whole thing fails instead of just 1021 00:29:24.583 --> 00:29:26.125 losing half or none. 1022 00:29:26.541 --> 00:29:28.541 I was right, and it is disc, so it makes 1023 00:29:28.541 --> 00:29:29.500 me feel slightly less 1024 00:29:29.500 --> 00:29:31.416 bad about interrupting you. 1025 00:29:32.041 --> 00:29:35.333 And also, RAID 0 is not just about 1026 00:29:35.333 --> 00:29:37.291 having a device that's twice as large 1027 00:29:37.291 --> 00:29:38.583 instead of having two devices. 1028 00:29:38.750 --> 00:29:40.416 It's also about striping. 1029 00:29:40.458 --> 00:29:42.875 So when you're writing, you have- not 1030 00:29:42.875 --> 00:29:44.750 quite, but almost double the writing 1031 00:29:44.750 --> 00:29:45.791 speed, honestly, because it's writing 1032 00:29:45.791 --> 00:29:46.916 both at the same time. 1033 00:29:46.916 --> 00:29:48.250 Does RAID 0 do striping? 1034 00:29:48.541 --> 00:29:49.041 Yes, it does. 1035 00:29:49.250 --> 00:29:49.541 Oh, OK. 1036 00:29:49.583 --> 00:29:50.500 Last time I checked. 1037 00:29:50.500 --> 00:29:51.416 Let me check again. 1038 00:29:51.708 --> 00:29:54.875 My home, my home NAS has two pairs of 1039 00:29:54.875 --> 00:29:56.291 spinning metal discs. 1040 00:29:56.625 --> 00:29:57.541 Each of them are paired. 1041 00:29:58.166 --> 00:29:59.625 So I needed a name for each of them. 1042 00:29:59.625 --> 00:30:01.125 So I named each of them after bicycle 1043 00:30:01.125 --> 00:30:02.500 manufacturing companies. 1044 00:30:02.500 --> 00:30:03.208 So I have a... 1045 00:30:03.625 --> 00:30:05.875 Huffy and VanMoof are the name of my two 1046 00:30:05.875 --> 00:30:07.208 pairs of spinning metal discs. 1047 00:30:07.666 --> 00:30:08.125 VanMoof. 1048 00:30:08.458 --> 00:30:10.583 I don't know if VanMoof is still solvent 1049 00:30:10.583 --> 00:30:12.291 as a business anymore, but 1050 00:30:12.291 --> 00:30:13.500 they had cool looking bikes. 1051 00:30:13.958 --> 00:30:14.500 OK, yeah. 1052 00:30:14.625 --> 00:30:16.250 RAID 0 is literally called striping. 1053 00:30:16.250 --> 00:30:17.166 RAID 1 is mirroring. 1054 00:30:17.583 --> 00:30:19.083 RAID 5 is striping with parity. 1055 00:30:20.125 --> 00:30:21.583 6 is striping with double parity. 1056 00:30:21.958 --> 00:30:22.791 And then RAID 10 is 1057 00:30:22.791 --> 00:30:24.208 combining mirroring and striping. 1058 00:30:24.791 --> 00:30:26.083 I don't have enough 1059 00:30:26.083 --> 00:30:27.625 discs to make that work. 1060 00:30:28.416 --> 00:30:30.083 Hetzner has a lot of these with just two 1061 00:30:30.083 --> 00:30:31.458 discs, and then you have to choose if you 1062 00:30:31.458 --> 00:30:32.875 want to lift interest or not. 1063 00:30:32.875 --> 00:30:33.500 But all my... 1064 00:30:34.166 --> 00:30:36.250 All the important data is backed up in 1065 00:30:36.250 --> 00:30:37.250 multiple different places. 1066 00:30:37.791 --> 00:30:39.791 I do have object storage running. 1067 00:30:40.250 --> 00:30:42.333 I have MinIO running on that machine, but 1068 00:30:42.333 --> 00:30:44.166 it's all backed up elsewhere daily. 1069 00:30:44.833 --> 00:30:46.666 So I have tested recovery. 1070 00:30:46.958 --> 00:30:47.958 I'm pretty happy about that. 1071 00:30:47.958 --> 00:30:50.875 The OneVariable website is a single ARM 1072 00:30:50.875 --> 00:30:52.458 instance running in Germany. 1073 00:30:52.708 --> 00:30:53.833 Don't tell people that! 1074 00:30:54.375 --> 00:30:55.625 It's the little baby... 1075 00:30:55.916 --> 00:30:57.541 It's a serving a static site. 1076 00:30:58.000 --> 00:30:59.083 I don't do any video 1077 00:30:59.083 --> 00:31:00.125 pipelining or anything. 1078 00:31:00.125 --> 00:31:01.375 They'll DDoS you, James! 1079 00:31:01.458 --> 00:31:01.708 OK. 1080 00:31:01.916 --> 00:31:03.666 They'll rip your nginx to shreds! 1081 00:31:03.666 --> 00:31:05.791 I'll buy a second four euro a month. 1082 00:31:06.333 --> 00:31:06.916 instance. 1083 00:31:06.916 --> 00:31:08.666 Bankrupt you in no time. 1084 00:31:09.083 --> 00:31:11.000 So, yeah, the control node is pretty 1085 00:31:11.000 --> 00:31:13.000 beefy. 64 gigs of RAM, 20 cores. 1086 00:31:13.000 --> 00:31:13.375 I like it. 1087 00:31:13.958 --> 00:31:16.875 And then the edge nodes only have two 1088 00:31:16.875 --> 00:31:21.000 gigs of RAM and two cores, two vCPUs and 1089 00:31:21.000 --> 00:31:25.916 60 gigs of SSD, quote unquote, because I 1090 00:31:25.916 --> 00:31:27.583 don't trust VPS providers. 1091 00:31:27.583 --> 00:31:30.083 OK! I've looked at io performance for a 1092 00:31:30.083 --> 00:31:31.875 bunch of them and they say, "Yeah, it's 1093 00:31:31.875 --> 00:31:33.458 SSD storage!" but it's very 1094 00:31:33.458 --> 00:31:34.958 different from local SSD. 1095 00:31:34.958 --> 00:31:37.250 Some providers actually have local SSD 1096 00:31:37.250 --> 00:31:41.250 versus SSD via cloud storage, virtualized 1097 00:31:41.250 --> 00:31:42.083 file systems, whatever. 1098 00:31:42.291 --> 00:31:43.833 So that's why SSD is in scare quotes. 1099 00:31:43.833 --> 00:31:45.291 It's an SSD, but there are 30 people 1100 00:31:45.291 --> 00:31:46.958 using it at the exact same time. 1101 00:31:47.333 --> 00:31:47.791 Exactly. 1102 00:31:48.291 --> 00:31:50.291 So I do not want to be running video 1103 00:31:50.291 --> 00:31:51.583 transcoding at the edge. 1104 00:31:51.833 --> 00:31:54.666 I actually, up until now, I was fixing 1105 00:31:54.666 --> 00:31:56.041 it, but then we had recording. 1106 00:31:56.791 --> 00:31:58.833 Image transcoding was running at the edge 1107 00:31:58.833 --> 00:31:59.958 on those tiny little machines because 1108 00:31:59.958 --> 00:32:01.208 it's image transcoding. 1109 00:32:01.208 --> 00:32:01.666 How bad could it be? 1110 00:32:01.875 --> 00:32:02.333 Pretty bad. 1111 00:32:02.333 --> 00:32:02.666 Pretty bad. 1112 00:32:02.666 --> 00:32:04.458 The modern codecs need a bunch of 1113 00:32:04.458 --> 00:32:05.833 computing power if you want to have both 1114 00:32:05.833 --> 00:32:07.416 quality and small sizes. 1115 00:32:07.833 --> 00:32:09.458 But video transcoding is even worse. 1116 00:32:09.750 --> 00:32:10.375 Just a 20 second 1117 00:32:10.375 --> 00:32:11.791 video encoding to VP9. 1118 00:32:12.250 --> 00:32:15.916 Libvpx is so slow compared to SVT-AV1. 1119 00:32:15.916 --> 00:32:16.666 So I want to run this 1120 00:32:16.666 --> 00:32:17.833 on the central node. 1121 00:32:17.833 --> 00:32:18.291 So I'm not going to 1122 00:32:18.291 --> 00:32:19.208 bore you with the detail. 1123 00:32:19.208 --> 00:32:20.416 But yeah, you need the job queue. 1124 00:32:20.416 --> 00:32:23.458 You need the ferry data back and forth. 1125 00:32:23.875 --> 00:32:25.583 And also I need to, again, choose which 1126 00:32:25.583 --> 00:32:26.958 storage format I'm going to use. 1127 00:32:27.208 --> 00:32:29.125 So for images, I decided not to use PNG 1128 00:32:29.125 --> 00:32:30.208 because it's much too large. 1129 00:32:30.250 --> 00:32:31.875 I went for something lossy, but still 1130 00:32:31.875 --> 00:32:33.416 visually good enough. 1131 00:32:33.833 --> 00:32:34.791 And same question for video. 1132 00:32:35.125 --> 00:32:36.875 There are lossless video formats. 1133 00:32:37.041 --> 00:32:37.916 There's a bunch of them. 1134 00:32:38.416 --> 00:32:39.791 Some of the most well-known ones are 1135 00:32:39.791 --> 00:32:42.458 FFV1, HuffYUV, and Lagarith. 1136 00:32:42.708 --> 00:32:44.166 Some are designed for storage. 1137 00:32:44.458 --> 00:32:46.416 Wow, I have heard neither of those. 1138 00:32:48.333 --> 00:32:51.708 Well, if everyone uses the ffmpeg codec one 1139 00:32:51.708 --> 00:32:53.500 or something, this one's actually derived 1140 00:32:53.500 --> 00:32:54.375 from something you know. 1141 00:32:54.500 --> 00:32:57.541 The variants of ProRes that are visually 1142 00:32:57.541 --> 00:32:59.291 lossless kind of, H.265 1143 00:32:59.291 --> 00:33:01.125 and AV1 have lossless modes. 1144 00:33:01.375 --> 00:33:03.000 For different use cases, whether you want 1145 00:33:03.000 --> 00:33:04.541 to store them, use them for editing, so 1146 00:33:04.541 --> 00:33:05.833 you want fast seeking and whatnot. 1147 00:33:06.041 --> 00:33:07.958 Or you have forever time to spend on 1148 00:33:07.958 --> 00:33:08.750 compressing them and 1149 00:33:08.750 --> 00:33:09.875 you won't, I don't know. 1150 00:33:10.250 --> 00:33:11.375 Consumers ask for lossless streaming. 1151 00:33:11.833 --> 00:33:12.625 Very few platforms 1152 00:33:12.625 --> 00:33:13.833 offer lossless anything. 1153 00:33:14.291 --> 00:33:15.500 I think, I don't remember 1154 00:33:15.500 --> 00:33:16.958 what the story was with TIDAL. 1155 00:33:17.833 --> 00:33:19.375 TIDAL, does it actually do it? 1156 00:33:19.791 --> 00:33:21.041 Spotify said it would. 1157 00:33:21.041 --> 00:33:22.125 Does TIDAL do video at all? 1158 00:33:22.125 --> 00:33:23.041 No, no, no, no, no, but for audio. 1159 00:33:23.541 --> 00:33:24.875 The only one I can think of is Bandcamp, 1160 00:33:24.875 --> 00:33:25.500 but that's not streaming. 1161 00:33:25.791 --> 00:33:27.250 That's downloading lossless files. 1162 00:33:27.583 --> 00:33:27.958 Yeah. 1163 00:33:28.083 --> 00:33:28.833 So what storage 1164 00:33:28.833 --> 00:33:30.250 format do we want for this? 1165 00:33:30.708 --> 00:33:33.458 AVC is the name you 1166 00:33:33.458 --> 00:33:34.666 should use instead of H.264. 1167 00:33:36.375 --> 00:33:38.250 Yes, but no, is my answer to this. 1168 00:33:38.458 --> 00:33:39.625 It is universally supported. 1169 00:33:39.958 --> 00:33:41.791 It's hardware accelerated everywhere. 1170 00:33:42.083 --> 00:33:43.625 Your phone has an H.264 1171 00:33:43.625 --> 00:33:46.625 -and has had for years. 1172 00:33:47.250 --> 00:33:49.083 But some patents haven't expired yet. 1173 00:33:49.083 --> 00:33:50.458 Some have and some haven't. 1174 00:33:50.458 --> 00:33:50.791 Some are going to 1175 00:33:50.791 --> 00:33:52.333 expire in 2030 in the US. 1176 00:33:52.500 --> 00:33:53.708 It differs by country. 1177 00:33:53.958 --> 00:33:56.458 Some of the companies holding some of the 1178 00:33:56.458 --> 00:33:57.500 patents in the pool have 1179 00:33:57.500 --> 00:33:59.250 refused to release them. 1180 00:33:59.666 --> 00:34:00.458 It's unclear. 1181 00:34:01.041 --> 00:34:02.166 There's open H.264. 1182 00:34:02.750 --> 00:34:03.583 Cisco has paid the royalties. 1183 00:34:03.958 --> 00:34:05.125 There's a bunch of things happening. 1184 00:34:05.541 --> 00:34:06.666 I just, I want none of this. 1185 00:34:06.958 --> 00:34:08.083 Also, there's a large allowance. 1186 00:34:08.083 --> 00:34:10.416 Like if you make less than this amount or 1187 00:34:10.416 --> 00:34:11.750 you have less than this amount of 1188 00:34:11.750 --> 00:34:12.750 subscribers or all the 1189 00:34:12.750 --> 00:34:14.333 video is free, then it's fine. 1190 00:34:14.916 --> 00:34:17.041 But I have patrons that get 1191 00:34:17.041 --> 00:34:18.083 early access to my articles. 1192 00:34:18.375 --> 00:34:19.333 So is that paid subscription? 1193 00:34:19.583 --> 00:34:20.375 Is it free? 1194 00:34:20.375 --> 00:34:21.166 Is it web streaming? 1195 00:34:21.458 --> 00:34:21.833 Who knows? 1196 00:34:21.875 --> 00:34:23.375 I just, I don't want to touch it. 1197 00:34:23.375 --> 00:34:24.375 Also, it's pretty old now. 1198 00:34:24.708 --> 00:34:27.291 HEVC is the successor to AVC. 1199 00:34:27.625 --> 00:34:28.875 It's also known as H.265. 1200 00:34:29.541 --> 00:34:29.958 Super no. 1201 00:34:30.458 --> 00:34:32.916 HEVC came out and it was better than AVC 1202 00:34:32.916 --> 00:34:34.625 in every aspect, except royalties were 1203 00:34:34.625 --> 00:34:36.208 much, much worse. Much more expensive. 1204 00:34:36.625 --> 00:34:39.666 It was so bad that the entire industry 1205 00:34:39.666 --> 00:34:41.750 came together and made AV1. 1206 00:34:42.125 --> 00:34:43.625 They all donated patents 1207 00:34:43.625 --> 00:34:45.291 and then new technologies. 1208 00:34:45.291 --> 00:34:46.458 They put all their research products 1209 00:34:46.458 --> 00:34:48.041 together and they made AV1 because I was 1210 00:34:48.041 --> 00:34:49.500 like, no, there's no way we're 1211 00:34:49.500 --> 00:34:51.625 paying the royalties for HEVC. 1212 00:34:51.833 --> 00:34:52.666 I'll put more on that later. 1213 00:34:52.916 --> 00:34:53.416 VP9? 1214 00:34:53.750 --> 00:34:55.041 No, I just don't like it. 1215 00:34:55.041 --> 00:34:55.708 Also, it's old. 1216 00:34:56.291 --> 00:34:57.500 I'm not going to use 1217 00:34:57.500 --> 00:34:58.416 it as a storage format. 1218 00:34:58.750 --> 00:34:59.625 It's just bad. 1219 00:34:59.625 --> 00:35:00.333 So I'm using AV1. 1220 00:35:00.791 --> 00:35:01.750 Like I said, HEVC was 1221 00:35:01.750 --> 00:35:04.791 announced in July 2015. 1222 00:35:05.208 --> 00:35:07.625 And then in September 2015, Amazon, 1223 00:35:07.875 --> 00:35:10.166 Cisco, Google, Intel, Microsoft, Mozilla 1224 00:35:10.166 --> 00:35:13.166 and Netflix announced the creation of the 1225 00:35:13.166 --> 00:35:14.208 Open Media Alliance. 1226 00:35:14.875 --> 00:35:17.333 They all immediately got on the phone and 1227 00:35:17.333 --> 00:35:19.125 were like, we are not paying this. 1228 00:35:19.541 --> 00:35:20.791 Nobody is paying this. 1229 00:35:20.833 --> 00:35:21.666 Who's H.264? 1230 00:35:21.916 --> 00:35:24.125 Is that Fraunhofer and all them or is 1231 00:35:24.125 --> 00:35:25.625 that a different alliance? 1232 00:35:25.625 --> 00:35:26.875 It's the MPEG LA. 1233 00:35:27.041 --> 00:35:27.458 Okay. 1234 00:35:27.541 --> 00:35:28.125 So I'm assuming it 1235 00:35:28.125 --> 00:35:29.125 stands for Los Angeles. 1236 00:35:29.625 --> 00:35:30.333 No, I don't ... 1237 00:35:31.333 --> 00:35:32.458 Licensing authority, maybe. 1238 00:35:32.666 --> 00:35:32.958 I don't know. 1239 00:35:33.083 --> 00:35:33.583 Probably. 1240 00:35:34.041 --> 00:35:36.166 That reminds me a lot of stuff like Let's 1241 00:35:36.166 --> 00:35:37.958 Encrypt where you have like this industry 1242 00:35:37.958 --> 00:35:40.083 that charges a lot of money and a big 1243 00:35:40.083 --> 00:35:42.125 group of companies just go, nuh-uh. 1244 00:35:42.333 --> 00:35:44.083 Like, we're kind of done with this. 1245 00:35:44.375 --> 00:35:45.583 We're going to be doing this one. 1246 00:35:45.583 --> 00:35:46.125 It's free. 1247 00:35:46.458 --> 00:35:46.875 Exactly. 1248 00:35:47.333 --> 00:35:49.625 Does Xiph X-I-P-H? 1249 00:35:50.000 --> 00:35:50.583 Do you remember? 1250 00:35:50.750 --> 00:35:51.166 Did you already? 1251 00:35:51.625 --> 00:35:52.333 I know them. 1252 00:35:52.333 --> 00:35:53.500 Yeah, they're the people who do like Ogg, 1253 00:35:53.500 --> 00:35:55.875 Vorbis and Speex and-- 1254 00:35:55.875 --> 00:36:01.000 And Opus and Theora and Daala, which was 1255 00:36:01.000 --> 00:36:02.875 based on the wavelet transforms, which I 1256 00:36:02.875 --> 00:36:04.791 will talk about in like six videos. 1257 00:36:05.083 --> 00:36:05.291 Geez. 1258 00:36:05.375 --> 00:36:07.125 So they donated Daala to that effort. 1259 00:36:07.666 --> 00:36:10.541 Google donated their VP10 draft. 1260 00:36:11.875 --> 00:36:13.000 Cisco donated Thor. 1261 00:36:13.000 --> 00:36:14.125 I don't know what that is. 1262 00:36:14.125 --> 00:36:15.291 And they just kind of 1263 00:36:15.291 --> 00:36:16.875 mixed everything up and ta-da. 1264 00:36:16.916 --> 00:36:17.583 You get AV1. 1265 00:36:18.125 --> 00:36:19.791 And AV1 is very good. 1266 00:36:20.083 --> 00:36:21.000 Let's look at some numbers again. 1267 00:36:21.583 --> 00:36:22.958 One is a slow screen capture. 1268 00:36:22.958 --> 00:36:24.416 So it's just me dragging something from 1269 00:36:24.416 --> 00:36:25.500 Finder into one of my apps. 1270 00:36:25.750 --> 00:36:26.791 The original file from 1271 00:36:26.791 --> 00:36:28.250 CleanShot is 2.1 megabytes. 1272 00:36:28.625 --> 00:36:30.291 And this time, we're not using SSIM 1273 00:36:30.291 --> 00:36:31.416 because that's for static images. 1274 00:36:31.791 --> 00:36:34.791 We're using VMAF, which is Video 1275 00:36:34.791 --> 00:36:36.833 Multimethad Assessment Fusion. 1276 00:36:37.166 --> 00:36:40.250 And it's been developed by the University 1277 00:36:40.250 --> 00:36:42.333 of Southern California and 1278 00:36:42.333 --> 00:36:45.083 a lab from Nantes in France. 1279 00:36:45.500 --> 00:36:46.750 And another lab at the 1280 00:36:46.750 --> 00:36:48.541 University of Texas, Austin. 1281 00:36:48.875 --> 00:36:51.083 Fun fact, it's the second time in 20 1282 00:36:51.083 --> 00:36:51.541 years that 1283 00:36:51.541 --> 00:36:52.916 universities got an Emmy Award. 1284 00:36:53.416 --> 00:36:54.208 And the first time a 1285 00:36:54.208 --> 00:36:55.208 French university got one. 1286 00:36:55.208 --> 00:36:55.875 They got an Emmy Award 1287 00:36:55.875 --> 00:36:57.041 in 2021 for their work. 1288 00:36:57.375 --> 00:36:58.083 Interesting. 1289 00:36:58.958 --> 00:37:01.208 It's a totally different way of measuring 1290 00:37:01.208 --> 00:37:03.583 video quality that is supposed to be much 1291 00:37:03.583 --> 00:37:05.291 closer to what humans 1292 00:37:05.291 --> 00:37:06.500 think of video quality. 1293 00:37:06.833 --> 00:37:07.708 So it's a model. 1294 00:37:08.125 --> 00:37:08.791 I don't know if there's 1295 00:37:08.791 --> 00:37:09.916 weights you have to download. 1296 00:37:09.916 --> 00:37:10.791 I know it's a model. 1297 00:37:11.041 --> 00:37:13.041 And it has surprising results because if 1298 00:37:13.041 --> 00:37:14.416 you're looking at the table right now on 1299 00:37:14.416 --> 00:37:17.041 the slide, you will see that the input 1300 00:37:17.041 --> 00:37:19.583 footage compared against itself only gets 1301 00:37:19.583 --> 00:37:22.125 a 97.4, which is surprising. 1302 00:37:22.583 --> 00:37:23.791 I expected a 100, but 1303 00:37:23.791 --> 00:37:24.708 I looked it up online. 1304 00:37:24.708 --> 00:37:25.666 And that makes sense. 1305 00:37:25.666 --> 00:37:26.750 No, the best score is 1306 00:37:26.750 --> 00:37:28.208 not necessarily 100. 1307 00:37:28.416 --> 00:37:30.541 It's all probabilistic stuff. 1308 00:37:30.541 --> 00:37:32.625 You can see that AV1, which comes in at 1309 00:37:32.625 --> 00:37:35.625 750 kilobytes against the 2.1 megabyte 1310 00:37:35.666 --> 00:37:38.208 original, is at 97.15. 1311 00:37:38.708 --> 00:37:40.625 And VP9 at 1.1 1312 00:37:40.625 --> 00:37:43.958 megabytes is coming up at 96.57. 1313 00:37:44.250 --> 00:37:44.750 So they're all 1314 00:37:44.750 --> 00:37:45.791 getting pretty good scores. 1315 00:37:46.208 --> 00:37:47.416 Again, AV1 is more compact 1316 00:37:47.416 --> 00:37:48.541 with a higher image quality. 1317 00:37:48.791 --> 00:37:49.458 It's really good. 1318 00:37:49.833 --> 00:37:51.625 I'm still using MP4s everywhere, which I 1319 00:37:51.625 --> 00:37:52.708 guess is just-- it's not 1320 00:37:52.708 --> 00:37:53.750 even a container format. 1321 00:37:53.750 --> 00:37:54.416 So I guess I'm just still-- 1322 00:37:54.416 --> 00:37:55.583 MP4 is the container, yeah. 1323 00:37:55.583 --> 00:37:55.833 Yeah. 1324 00:37:56.041 --> 00:37:56.625 I don't know what 1325 00:37:56.625 --> 00:37:57.625 codec it's actually using. 1326 00:37:58.083 --> 00:37:59.791 Whatever OBS puts out, I guess. 1327 00:38:00.625 --> 00:38:02.833 It likely is AVC, yeah. 1328 00:38:03.083 --> 00:38:04.791 I haven't even talked about containers in 1329 00:38:04.791 --> 00:38:06.500 this presentation, in this episode. 1330 00:38:07.166 --> 00:38:10.666 But basically, yeah, I shove AV1 in MP4, 1331 00:38:10.666 --> 00:38:14.041 and I shove VP9 in WebM because that's 1332 00:38:14.041 --> 00:38:15.583 pretty much the only option for browsers. 1333 00:38:16.583 --> 00:38:19.541 You can technically do the two other 1334 00:38:19.541 --> 00:38:21.041 combinations, but browsers go nah. 1335 00:38:21.250 --> 00:38:22.666 Also, MP4 is a misnomer. 1336 00:38:23.041 --> 00:38:25.791 MP4 is based off of MOV. 1337 00:38:25.916 --> 00:38:27.333 And now the proper term is 1338 00:38:27.333 --> 00:38:29.458 ISO BMFF container format. 1339 00:38:29.875 --> 00:38:30.583 It's complicated. 1340 00:38:31.083 --> 00:38:33.083 As far as AV1 goes, the reference encoder 1341 00:38:33.083 --> 00:38:36.208 called libAOM, from the Open Media 1342 00:38:36.208 --> 00:38:38.250 Alliance, is really, really slow. 1343 00:38:38.250 --> 00:38:39.166 It was really, really slow. 1344 00:38:39.166 --> 00:38:40.375 Much slower than even 1345 00:38:40.375 --> 00:38:43.000 HEVC, so H.265 encoders. 1346 00:38:43.083 --> 00:38:43.833 And that was an issue. 1347 00:38:44.291 --> 00:38:45.208 Luckily, there have been 1348 00:38:45.208 --> 00:38:46.291 competing implementations. 1349 00:38:46.625 --> 00:38:48.041 There's Rav1e in Rust, 1350 00:38:48.375 --> 00:38:50.208 Rav1e with the I being a 1. 1351 00:38:50.458 --> 00:38:54.083 And there's SVT-AV1 from Intel, which I'm 1352 00:38:54.083 --> 00:38:55.166 using here because it's 1353 00:38:55.250 --> 00:38:56.625 super fast and super good. 1354 00:38:57.083 --> 00:38:58.500 I'm using crf 35, 1355 00:38:58.958 --> 00:39:00.083 and it's divided in tiles. 1356 00:39:00.083 --> 00:39:01.625 So tile columns 2, tile rows 2, which 1357 00:39:01.625 --> 00:39:04.000 means it's divided in a 2 by 2 grid. 1358 00:39:04.000 --> 00:39:05.500 And tiles are encoded separately. 1359 00:39:05.708 --> 00:39:06.916 Is that so you can have things like if 1360 00:39:06.916 --> 00:39:08.458 you have screen graphics in one, you 1361 00:39:08.458 --> 00:39:10.958 might have higher density of pixels where 1362 00:39:10.958 --> 00:39:12.666 some screen graphics are, or if there's 1363 00:39:12.666 --> 00:39:14.750 more action or something in one corner or 1364 00:39:14.750 --> 00:39:15.375 something like that? 1365 00:39:15.666 --> 00:39:16.666 That's a good theory. 1366 00:39:16.666 --> 00:39:17.750 But in this case, it's just 1367 00:39:17.750 --> 00:39:19.125 so that it encodes faster. 1368 00:39:19.125 --> 00:39:21.500 You can be more parallel because a lot of 1369 00:39:21.500 --> 00:39:22.416 it is very sequential. 1370 00:39:22.416 --> 00:39:24.416 So it's just like you're encoding four 1371 00:39:24.416 --> 00:39:25.791 different videos that have the resolution 1372 00:39:25.791 --> 00:39:26.958 or a quarter of the resolution. 1373 00:39:27.208 --> 00:39:28.625 For VP9, kind of the same story. 1374 00:39:28.625 --> 00:39:30.625 I'm also using crf because when you're 1375 00:39:30.625 --> 00:39:32.458 encoding video, you can aim for a certain 1376 00:39:32.458 --> 00:39:34.083 bitrate or you can aim 1377 00:39:34.083 --> 00:39:34.875 for a certain quality. 1378 00:39:35.250 --> 00:39:38.041 And in this case, for VP9, I'm specifying 1379 00:39:38.041 --> 00:39:40.625 video bandwidth of 0, which switches to 1380 00:39:40.625 --> 00:39:41.791 constant quality mode 1381 00:39:41.791 --> 00:39:43.583 and setting crf to 24. 1382 00:39:44.291 --> 00:39:45.000 And those are pretty... 1383 00:39:45.000 --> 00:39:46.958 like I don't like to wait. 1384 00:39:46.958 --> 00:39:47.833 I should do better. 1385 00:39:47.833 --> 00:39:49.833 I should have these done like this. 1386 00:39:49.833 --> 00:39:51.541 And then I should schedule a better one 1387 00:39:51.541 --> 00:39:54.333 with like more effort, higher crf or 1388 00:39:54.333 --> 00:39:55.916 whatever, lower preset rate if you want. 1389 00:39:55.916 --> 00:39:56.541 So they'd spend more 1390 00:39:56.541 --> 00:39:57.458 time and optimizes them. 1391 00:39:57.791 --> 00:39:59.458 I suspect YouTube does this. 1392 00:39:59.750 --> 00:40:00.458 They might. 1393 00:40:00.625 --> 00:40:02.708 Because it makes sense at first when a 1394 00:40:02.708 --> 00:40:04.583 video just comes out, you want the encode 1395 00:40:04.583 --> 00:40:05.458 to be finished quickly. 1396 00:40:05.708 --> 00:40:07.625 So maybe you're willing for it to be a 1397 00:40:07.625 --> 00:40:08.583 little bigger or the 1398 00:40:08.583 --> 00:40:09.500 quality to be a little worse. 1399 00:40:09.708 --> 00:40:11.041 And then you do a second encode that 1400 00:40:11.041 --> 00:40:12.875 might take longer, but it's going to save 1401 00:40:12.875 --> 00:40:14.208 you a lot of money in the long run. 1402 00:40:14.208 --> 00:40:15.291 And I guess save on bandwidth. 1403 00:40:15.291 --> 00:40:16.333 So I might do that. 1404 00:40:16.333 --> 00:40:17.541 I just nerd sniped myself. 1405 00:40:17.541 --> 00:40:17.875 Damn it. 1406 00:40:18.125 --> 00:40:19.541 I need to be finished with this already. 1407 00:40:19.541 --> 00:40:20.291 Congrats. 1408 00:40:20.500 --> 00:40:21.166 Second sample. 1409 00:40:21.250 --> 00:40:22.458 It's a fast screen capture. 1410 00:40:22.458 --> 00:40:23.541 It's Fasttracker 2. 1411 00:40:24.041 --> 00:40:25.416 So look out for that in my video. 1412 00:40:25.833 --> 00:40:26.458 This time the original 1413 00:40:26.458 --> 00:40:29.125 against itself gets a 98.9. 1414 00:40:29.500 --> 00:40:29.958 Pretty good. 1415 00:40:30.208 --> 00:40:32.041 And the other two as well. 1416 00:40:32.041 --> 00:40:33.541 The original is 1.5 megabytes. 1417 00:40:33.541 --> 00:40:35.916 AV1 is only 372 kilobytes. 1418 00:40:36.458 --> 00:40:38.541 And VP9 is 928 kilobytes. 1419 00:40:38.708 --> 00:40:41.958 And then my third sample is iPhone slow 1420 00:40:41.958 --> 00:40:43.833 motion footage of me strumming a guitar. 1421 00:40:44.166 --> 00:40:46.291 And that time the source footage is an 1422 00:40:46.291 --> 00:40:47.458 HEVC, because that's 1423 00:40:47.458 --> 00:40:48.541 what my iPhone gives me. 1424 00:40:48.541 --> 00:40:50.958 And the original is in 26 megabytes with 1425 00:40:50.958 --> 00:40:53.541 a VMAF score of 99.3. 1426 00:40:54.000 --> 00:40:55.958 And this time we can see the compression. 1427 00:40:56.333 --> 00:40:58.166 AV1 is going to one tenth of 1428 00:40:58.166 --> 00:40:59.958 the size with 2.8 megabytes. 1429 00:41:00.250 --> 00:41:03.000 And only gets a score of 93.8. 1430 00:41:03.500 --> 00:41:05.208 And VP9 doesn't reduce 1431 00:41:05.208 --> 00:41:06.416 the size nearly as much. 1432 00:41:06.416 --> 00:41:09.250 It's 7.4 versus 2.8 for AV1. 1433 00:41:09.541 --> 00:41:11.916 And it only gets a score of 92.8. 1434 00:41:11.916 --> 00:41:13.125 So I hope from this you 1435 00:41:13.125 --> 00:41:14.833 can see why I don't like VP9. 1436 00:41:14.833 --> 00:41:15.625 It's just older. 1437 00:41:15.875 --> 00:41:17.583 It just has-- I don't know. 1438 00:41:17.583 --> 00:41:18.708 It's from a different time. 1439 00:41:18.708 --> 00:41:19.750 Not as different a time 1440 00:41:19.750 --> 00:41:21.833 as, you know, LaTeX. 1441 00:41:22.083 --> 00:41:23.750 But it's from a 1442 00:41:23.750 --> 00:41:25.458 different time nonetheless. 1443 00:41:26.250 --> 00:41:27.500 It's bigger and worse. 1444 00:41:27.875 --> 00:41:28.916 We are reaching the end 1445 00:41:28.916 --> 00:41:30.041 of my presentation soon. 1446 00:41:30.041 --> 00:41:32.166 I wanted to show you something funny. 1447 00:41:32.583 --> 00:41:34.166 So when you embed video on 1448 00:41:34.166 --> 00:41:35.375 the web, you use the video tag. 1449 00:41:35.416 --> 00:41:36.000 I've showed the picture 1450 00:41:36.000 --> 00:41:38.750 tag with source sub tags. 1451 00:41:39.166 --> 00:41:40.458 So you can choose from different formats. 1452 00:41:40.791 --> 00:41:41.375 Same thing with video. 1453 00:41:41.375 --> 00:41:42.833 You have video and then source inside. 1454 00:41:43.333 --> 00:41:45.875 But what shows before you click play? 1455 00:41:46.083 --> 00:41:47.125 The answer to that depends 1456 00:41:47.125 --> 00:41:48.416 on what you put in the markup. 1457 00:41:48.416 --> 00:41:50.541 You can have preload full. 1458 00:41:51.041 --> 00:41:52.666 And then it's going to download enough of 1459 00:41:52.666 --> 00:41:53.875 the video to render the first frame. 1460 00:41:54.083 --> 00:41:54.541 And then it's going to 1461 00:41:54.541 --> 00:41:55.375 show the first frame. 1462 00:41:55.375 --> 00:41:56.375 You can preload metadata. 1463 00:41:56.750 --> 00:41:59.416 And then it's just going to get enough of 1464 00:41:59.416 --> 00:42:01.583 the video to know the duration and the 1465 00:42:01.583 --> 00:42:02.791 size, but not necessarily 1466 00:42:02.791 --> 00:42:03.916 the first frame, I believe. 1467 00:42:04.166 --> 00:42:04.666 Or you can have 1468 00:42:04.666 --> 00:42:06.041 preload none, which I chose. 1469 00:42:06.625 --> 00:42:07.583 And then it shows nothing. 1470 00:42:07.583 --> 00:42:09.250 It shows an empty thing. 1471 00:42:09.541 --> 00:42:10.791 So it's a good thing that I'm grabbing 1472 00:42:10.791 --> 00:42:11.541 the dimensions of the 1473 00:42:11.541 --> 00:42:12.583 video and adding that in there. 1474 00:42:12.791 --> 00:42:14.291 So the hole is at least the right size. 1475 00:42:14.666 --> 00:42:15.625 But I wasn't happy with that. 1476 00:42:15.625 --> 00:42:16.708 I wanted to have some 1477 00:42:16.708 --> 00:42:18.041 cover, like some images. 1478 00:42:18.250 --> 00:42:19.708 I wanted the first frame without actually 1479 00:42:19.708 --> 00:42:21.125 having to download the video. 1480 00:42:21.125 --> 00:42:22.500 Because when people click play, it 1481 00:42:22.500 --> 00:42:23.500 actually requests the video 1482 00:42:23.500 --> 00:42:24.791 in my trigger transcoding. 1483 00:42:25.125 --> 00:42:25.916 So yeah. 1484 00:42:26.333 --> 00:42:27.083 So easy. 1485 00:42:27.083 --> 00:42:28.666 You just tell ffmpeg to grab the first 1486 00:42:28.666 --> 00:42:30.791 frame and encode it as something modern. 1487 00:42:30.791 --> 00:42:31.958 I have already picked my 1488 00:42:31.958 --> 00:42:32.833 favorite image formats. 1489 00:42:33.041 --> 00:42:34.041 So just do that, right? 1490 00:42:34.541 --> 00:42:35.125 Well, wrong. 1491 00:42:35.416 --> 00:42:36.250 James, what do you see in that image? 1492 00:42:36.958 --> 00:42:37.916 I see tearing? 1493 00:42:38.333 --> 00:42:38.666 Not quite. 1494 00:42:38.833 --> 00:42:40.250 What am I seeing in this image? 1495 00:42:40.541 --> 00:42:42.916 So you're seeing two halves of the player 1496 00:42:42.916 --> 00:42:43.750 in different states. 1497 00:42:44.125 --> 00:42:45.583 It is not tearing. 1498 00:42:45.583 --> 00:42:47.333 It is divided down the middle. 1499 00:42:47.333 --> 00:42:48.375 The right-hand side of the 1500 00:42:48.375 --> 00:42:49.791 image is the cover image. 1501 00:42:50.000 --> 00:42:50.666 It's the first frame 1502 00:42:50.666 --> 00:42:52.541 encoded into an image format. 1503 00:42:52.541 --> 00:42:54.875 And the left-hand side is the first frame 1504 00:42:54.875 --> 00:42:56.583 of the video as rendered as 1505 00:42:56.583 --> 00:42:58.041 a video, after you hit play. 1506 00:42:58.041 --> 00:42:59.625 Ah, I gotcha. 1507 00:42:59.750 --> 00:43:02.250 And as you can see, the background color 1508 00:43:02.250 --> 00:43:05.000 of the cover is much darker than the 1509 00:43:05.000 --> 00:43:06.958 background color of the video player. 1510 00:43:06.958 --> 00:43:08.208 At least I hope you can see that. 1511 00:43:08.208 --> 00:43:09.083 And if you can't, I'm 1512 00:43:09.083 --> 00:43:09.666 going to buy you a new screen. 1513 00:43:09.666 --> 00:43:10.750 I thought they were just like two 1514 00:43:10.750 --> 00:43:11.875 different-- I thought it was a screen 1515 00:43:11.875 --> 00:43:13.541 re-rendering or something like that. 1516 00:43:13.541 --> 00:43:13.958 But it's just two 1517 00:43:13.958 --> 00:43:14.750 renders at the same image. 1518 00:43:14.750 --> 00:43:16.333 No, I had to do a little image editing to 1519 00:43:16.333 --> 00:43:17.375 stitch those together. 1520 00:43:17.625 --> 00:43:19.458 But basically what I did is I had four 1521 00:43:19.458 --> 00:43:22.250 video players in a sequence: Safari, to 1522 00:43:22.250 --> 00:43:23.916 have the screen and screenshot and then 1523 00:43:23.916 --> 00:43:24.958 brought those together. 1524 00:43:24.958 --> 00:43:26.041 So I have more examples of this. 1525 00:43:26.041 --> 00:43:26.833 This is with Finder. 1526 00:43:26.833 --> 00:43:28.416 You can see the grays are just all wrong. 1527 00:43:28.875 --> 00:43:30.833 So because this isn't Safari, that means 1528 00:43:30.833 --> 00:43:33.500 the video is VP9 and 1529 00:43:33.500 --> 00:43:35.250 the poster is JPEG XL. 1530 00:43:35.541 --> 00:43:38.125 Because Safari does support AV1, but only 1531 00:43:38.125 --> 00:43:39.208 on devices that have 1532 00:43:39.208 --> 00:43:41.375 hardware-accelerated AV1 decoding. 1533 00:43:41.583 --> 00:43:42.458 So that means I think 1534 00:43:42.458 --> 00:43:44.500 it's the iPhone 15 Pro. 1535 00:43:44.500 --> 00:43:45.083 How far back? 1536 00:43:45.083 --> 00:43:45.375 Yeah, I was going to 1537 00:43:45.375 --> 00:43:46.541 say, how far back is that? 1538 00:43:46.541 --> 00:43:48.541 Yeah, and some recent MacBooks, like the 1539 00:43:48.541 --> 00:43:50.208 M3 and something like that. 1540 00:43:50.208 --> 00:43:52.958 So on my MacStudio M2, which is more than 1541 00:43:52.958 --> 00:43:54.041 capable of doing that in 1542 00:43:54.041 --> 00:43:56.041 software, it doesn't play AV1. 1543 00:43:56.041 --> 00:43:57.125 And so I have to use VP9. 1544 00:43:57.375 --> 00:43:57.875 And you can see the 1545 00:43:57.875 --> 00:43:58.708 colors are really wrong. 1546 00:43:58.750 --> 00:43:59.583 This is a fast tracker 1547 00:43:59.583 --> 00:44:01.333 to clone screenshots. 1548 00:44:01.708 --> 00:44:03.041 Again, everything is slightly wrong. 1549 00:44:03.500 --> 00:44:05.083 And the guitar footage, this 1550 00:44:05.083 --> 00:44:06.208 one is not aligned as well. 1551 00:44:06.500 --> 00:44:07.250 It's probably just the 1552 00:44:07.250 --> 00:44:08.208 next frame or whatever. 1553 00:44:08.208 --> 00:44:09.041 So this is one of those things that I 1554 00:44:09.041 --> 00:44:10.208 don't think I would-- if you showed me 1555 00:44:10.208 --> 00:44:12.041 one and then you made me close my eyes 1556 00:44:12.041 --> 00:44:13.791 and then showed another one, I don't 1557 00:44:13.791 --> 00:44:14.708 think I would pick this up. 1558 00:44:14.708 --> 00:44:16.208 It's very, very clear when 1559 00:44:16.208 --> 00:44:17.250 you put them side by side. 1560 00:44:17.333 --> 00:44:17.708 Exactly. 1561 00:44:17.708 --> 00:44:19.083 But I don't think-- you'd have to be 1562 00:44:19.083 --> 00:44:20.875 Alt-tabbing between two different 1563 00:44:20.875 --> 00:44:21.916 versions of it for me to 1564 00:44:21.916 --> 00:44:22.875 be able to notice this. 1565 00:44:22.875 --> 00:44:24.000 Well, you know the reason it's noticeable 1566 00:44:24.000 --> 00:44:25.541 is because it's the freaking cover image 1567 00:44:25.541 --> 00:44:27.125 and then you click Play and it instantly 1568 00:44:27.833 --> 00:44:28.666 switches to the video. 1569 00:44:28.666 --> 00:44:30.166 And you can see the change in 1570 00:44:30.166 --> 00:44:31.666 brightness almost immediately. 1571 00:44:32.375 --> 00:44:34.750 And I wish this episode ended with me 1572 00:44:34.750 --> 00:44:35.791 telling you how I fixed it. 1573 00:44:35.791 --> 00:44:36.750 But I didn't fix it, James. 1574 00:44:37.166 --> 00:44:37.583 I did not. 1575 00:44:37.958 --> 00:44:38.583 I did my best. 1576 00:44:39.041 --> 00:44:39.833 It used to be worse. 1577 00:44:40.083 --> 00:44:41.958 This is a slide of things 1578 00:44:41.958 --> 00:44:43.208 being much worse in Firefox. 1579 00:44:44.166 --> 00:44:45.416 And it's hard to see because there are 1580 00:44:45.416 --> 00:44:46.833 four-- like it's a tile. 1581 00:44:46.833 --> 00:44:48.125 It's a 2 by 2 grid. 1582 00:44:48.208 --> 00:44:49.875 But I have a digital color meter, which 1583 00:44:49.875 --> 00:44:52.166 is built into MacOS showing that the RGB 1584 00:44:52.166 --> 00:44:54.416 values for the background of my text 1585 00:44:54.416 --> 00:44:56.875 editor in the video is 51, 51, 51. 1586 00:44:57.125 --> 00:44:58.000 Those are red, green, and 1587 00:44:58.000 --> 00:45:00.000 blue values in sRGB color space 1588 00:45:01.000 --> 00:45:01.666 for Firefox. 1589 00:45:02.041 --> 00:45:05.208 But for all the other ones, it's 35, 35, 1590 00:45:05.208 --> 00:45:06.625 35, which is not in the picture. 1591 00:45:06.625 --> 00:45:07.208 I just remember it 1592 00:45:07.208 --> 00:45:07.958 off the top of my head. 1593 00:45:08.333 --> 00:45:10.083 And apparently, I thought it was 1594 00:45:10.083 --> 00:45:12.250 Firefox's fault because- in my defense, 1595 00:45:12.625 --> 00:45:13.375 Firefox has been wrong 1596 00:45:13.375 --> 00:45:14.875 about color a lot in the past. 1597 00:45:15.083 --> 00:45:16.250 This is MacOS, so probably not the 1598 00:45:16.250 --> 00:45:18.125 platform Firefox cares the most about. 1599 00:45:18.250 --> 00:45:19.916 So I thought it was Firefox's fault. 1600 00:45:19.916 --> 00:45:21.791 But then I actually looked at the files. 1601 00:45:21.916 --> 00:45:23.000 I noticed something strange. 1602 00:45:23.000 --> 00:45:25.125 If I first transcoded-- like if I 1603 00:45:25.125 --> 00:45:28.541 generated a thumbnail from the VP9 file, 1604 00:45:28.750 --> 00:45:30.750 the colors were more correct than if I 1605 00:45:30.750 --> 00:45:32.833 generated them from the AV1 file, which 1606 00:45:32.833 --> 00:45:34.125 is my storage format, which 1607 00:45:34.125 --> 00:45:35.208 doesn't make sense at all. 1608 00:45:35.375 --> 00:45:37.416 And pretty much the lesson here is don't 1609 00:45:37.416 --> 00:45:39.583 use ffmpeg to generate static images. 1610 00:45:39.583 --> 00:45:42.250 It is not made for that because AVIF 1611 00:45:42.250 --> 00:45:45.875 images in AV1 videos have different ways 1612 00:45:45.875 --> 00:45:49.250 of storing color, profile, color space, 1613 00:45:49.625 --> 00:45:51.375 color primaries, et cetera, information. 1614 00:45:51.750 --> 00:45:53.250 You need that to be able to decode and 1615 00:45:53.250 --> 00:45:54.291 display the image accurately. 1616 00:45:55.250 --> 00:45:58.416 And as a video, it's part of the MP4. 1617 00:45:58.416 --> 00:45:59.875 It's in an MP4 box, I'm assuming. 1618 00:46:00.333 --> 00:46:01.750 And as an image, it's in a different 1619 00:46:01.750 --> 00:46:03.958 container that ffmpeg barely supports 1620 00:46:03.958 --> 00:46:05.291 because they technically 1621 00:46:05.375 --> 00:46:07.875 can export static images. 1622 00:46:07.875 --> 00:46:08.916 But it's not really made for that. 1623 00:46:09.125 --> 00:46:11.166 And the slide we're looking at is using 1624 00:46:11.166 --> 00:46:13.875 avifdec --info and showing that the one 1625 00:46:13.875 --> 00:46:17.625 generated with ffmpeg from AV1 has color 1626 00:46:17.625 --> 00:46:19.250 primaries, transfer characteristics, and 1627 00:46:19.250 --> 00:46:20.708 metrics coefficients set to 1 1 1. 1628 00:46:21.083 --> 00:46:22.791 So it's just not setting them, I think. 1629 00:46:22.791 --> 00:46:23.625 And the other one has 2 2 5. 1630 00:46:24.041 --> 00:46:25.541 So that explains it, apparently. 1631 00:46:25.791 --> 00:46:27.333 But I didn't find a way to fix it. 1632 00:46:27.541 --> 00:46:29.916 So I ended up having ffmpeg output, 1633 00:46:30.208 --> 00:46:32.708 lossless JXL, and just reusing my 1634 00:46:32.708 --> 00:46:33.750 existing setup to 1635 00:46:33.750 --> 00:46:35.458 encode to AVIF and WebP. 1636 00:46:35.750 --> 00:46:36.625 And I'm happy now. 1637 00:46:36.958 --> 00:46:37.166 Nice. 1638 00:46:37.291 --> 00:46:39.500 Just more fun things before we go. 1639 00:46:39.791 --> 00:46:41.375 Everything I've shown-- so the picture 1640 00:46:41.375 --> 00:46:43.916 tag and the video tag support sources so 1641 00:46:43.916 --> 00:46:44.833 you can serve different formats. 1642 00:46:45.333 --> 00:46:47.000 But the poster attribute 1643 00:46:47.000 --> 00:46:48.541 on the video tag does not. 1644 00:46:48.583 --> 00:46:50.708 So the image I show before the video 1645 00:46:50.708 --> 00:46:52.208 loads, you cannot specify 1646 00:46:52.208 --> 00:46:53.208 which image format you want. 1647 00:46:53.208 --> 00:46:55.083 So that's why if you go to my website 1648 00:46:55.083 --> 00:46:56.958 after this goes live and I actually have 1649 00:46:56.958 --> 00:46:58.583 some videos up, you will see that I used 1650 00:46:58.583 --> 00:47:00.083 the extension .thumb, 1651 00:47:00.083 --> 00:47:01.166 which is not an image format. 1652 00:47:01.875 --> 00:47:03.625 It's something that your browser will 1653 00:47:03.625 --> 00:47:05.250 make a request to with a certain accept 1654 00:47:05.250 --> 00:47:07.250 header, which is going to list all the 1655 00:47:07.250 --> 00:47:08.125 things your browser supports. 1656 00:47:08.541 --> 00:47:10.125 And I could have an entire episode just 1657 00:47:10.125 --> 00:47:12.958 about how to parse and interpret and tie 1658 00:47:12.958 --> 00:47:15.250 break and negotiate the content type of 1659 00:47:15.250 --> 00:47:17.000 what you're serving to a browser. 1660 00:47:17.375 --> 00:47:18.583 But I've not done so 1661 00:47:18.583 --> 00:47:19.541 for a very long time. 1662 00:47:19.541 --> 00:47:20.291 I've tried to avoid 1663 00:47:20.291 --> 00:47:21.500 it and I had no choice. 1664 00:47:21.708 --> 00:47:23.833 And basically, it lets me serve JPEG XL 1665 00:47:23.833 --> 00:47:25.958 to Safari and AVIF and WebP to 1666 00:47:25.958 --> 00:47:27.416 everyone else from one URL. 1667 00:47:27.625 --> 00:47:28.500 But at least I do redirect. 1668 00:47:28.750 --> 00:47:30.833 So you get the real URL after you click. 1669 00:47:31.083 --> 00:47:32.791 That's what people complain-- that's 1670 00:47:32.791 --> 00:47:33.583 where it comes from. 1671 00:47:33.583 --> 00:47:35.875 Most sites just have a .png and then 1672 00:47:35.875 --> 00:47:37.291 serve WebP to browsers 1673 00:47:37.458 --> 00:47:38.541 because they accept it. 1674 00:47:38.541 --> 00:47:40.500 And that's my last showcase. 1675 00:47:41.416 --> 00:47:43.208 Do you have any idea what this is, James? 1676 00:47:45.041 --> 00:47:46.333 The x-axis is hats 1677 00:47:46.333 --> 00:47:47.916 and the y-axis is hats. 1678 00:47:47.916 --> 00:47:49.000 Oh, no, it's going the wrong way. 1679 00:47:49.000 --> 00:47:49.708 It's going down. 1680 00:47:49.708 --> 00:47:51.375 So it can't be the hats by hats graph. 1681 00:47:53.458 --> 00:47:54.291 No, I don't. 1682 00:47:54.291 --> 00:47:54.458 So-- Is it something 1683 00:47:54.458 --> 00:47:55.083 you wear in your hat? 1684 00:47:55.083 --> 00:47:55.666 What are you talking about? 1685 00:47:56.000 --> 00:47:57.541 Oh, no, there's the Valve. 1686 00:47:57.833 --> 00:47:58.833 It's the old joke. 1687 00:47:58.875 --> 00:48:00.375 We'll either paste the picture here or 1688 00:48:00.375 --> 00:48:02.583 cut this entirely-- of other companies. 1689 00:48:02.791 --> 00:48:04.333 "Piracy! Sales go down. 1690 00:48:04.333 --> 00:48:05.208 Oh, no." 1691 00:48:05.208 --> 00:48:06.750 And it's like, but at Valve. 1692 00:48:07.083 --> 00:48:09.416 And it's a graph and the line's just 1693 00:48:09.416 --> 00:48:11.333 going up and the x-axis and the y-axis 1694 00:48:11.333 --> 00:48:13.250 are both hats because this is when they 1695 00:48:13.250 --> 00:48:14.666 were selling-- they were like the first 1696 00:48:14.666 --> 00:48:15.958 one selling game stuff. 1697 00:48:16.375 --> 00:48:16.750 We're probably going 1698 00:48:16.750 --> 00:48:17.583 to cut this whole thing. 1699 00:48:17.583 --> 00:48:19.208 If not, it's a very funny image. 1700 00:48:19.208 --> 00:48:20.500 And it's what I-- whenever someone shows 1701 00:48:20.500 --> 00:48:22.291 me a graph with no units, it's what I go. 1702 00:48:22.291 --> 00:48:23.750 It's like, "MORE HATS!" 1703 00:48:24.875 --> 00:48:30.041 Classic encoders like JPEG, the first of 1704 00:48:30.041 --> 00:48:30.958 its name, have this 1705 00:48:30.958 --> 00:48:32.500 quality setting from 0 to 100. 1706 00:48:32.916 --> 00:48:36.083 And so tools like ImageMagick also have a 1707 00:48:36.083 --> 00:48:36.916 knob, a quality knob 1708 00:48:36.916 --> 00:48:38.208 that goes from 0 to 100. 1709 00:48:38.208 --> 00:48:41.375 But more modern formats like JPEG XL do 1710 00:48:41.375 --> 00:48:43.166 not take a quality setting from 0 to 100. 1711 00:48:43.541 --> 00:48:45.000 In this case, it takes a distance-- 1712 00:48:45.750 --> 00:48:46.458 Butteraugli, I don't 1713 00:48:46.458 --> 00:48:47.375 know how to pronounce that. 1714 00:48:47.375 --> 00:48:50.125 It's a certain way to measure the 1715 00:48:50.125 --> 00:48:51.750 distance between two images. 1716 00:48:52.125 --> 00:48:54.416 And you give it a target, essentially. 1717 00:48:54.750 --> 00:48:56.291 It accepts from 1 to 15. 1718 00:48:57.041 --> 00:48:58.750 But now that I'm looking at this graph, 1719 00:48:58.750 --> 00:49:00.916 it doesn't really make sense, does it? 1720 00:49:01.333 --> 00:49:04.666 Anyway, this is how ImageMagick maps its 1721 00:49:04.666 --> 00:49:07.708 0 to 100 quality parameter to the 1722 00:49:07.708 --> 00:49:09.541 distance that it gives to libjxl. 1723 00:49:10.083 --> 00:49:12.791 Hard code 0 is equal to 1, but that later 1724 00:49:12.791 --> 00:49:14.583 in the code changes it to just toggling 1725 00:49:14.583 --> 00:49:15.750 on the lossless flag. 1726 00:49:16.250 --> 00:49:17.916 And it looks just so funny. 1727 00:49:17.958 --> 00:49:20.208 It's log e until 30, 1728 00:49:20.208 --> 00:49:21.250 and then it goes linear. 1729 00:49:21.458 --> 00:49:22.000 It's weird. 1730 00:49:22.375 --> 00:49:23.875 And then it flattens out at 100. 1731 00:49:24.291 --> 00:49:25.458 It's just-- I don't know. 1732 00:49:25.708 --> 00:49:26.666 I saw this image, and I 1733 00:49:26.666 --> 00:49:27.958 was like, "Ah... I need a nap." 1734 00:49:29.125 --> 00:49:31.041 Because I was using-- I am using 1735 00:49:31.041 --> 00:49:34.166 ImageMagick to the initial JPEG XL 1736 00:49:34.166 --> 00:49:35.250 conversion, and I was trying to figure out: 1737 00:49:35.250 --> 00:49:36.541 OK what's the distance parameter that's 1738 00:49:36.541 --> 00:49:37.958 actually passing to the encoder? 1739 00:49:38.041 --> 00:49:39.541 So I went and looked at the sources of 1740 00:49:39.541 --> 00:49:40.875 ImageMagick and looked at the function 1741 00:49:40.875 --> 00:49:42.583 they used to convert to that. 1742 00:49:42.583 --> 00:49:43.750 And then someone graphed it online, 1743 00:49:43.750 --> 00:49:44.416 because I was like: does 1744 00:49:44.416 --> 00:49:45.791 that look weird to anyone else? 1745 00:49:45.791 --> 00:49:46.458 Why does it go all 1746 00:49:46.458 --> 00:49:48.250 the way up to 20 or 40? 1747 00:49:48.250 --> 00:49:49.583 It's not even a valid 1748 00:49:49.583 --> 00:49:50.833 input to the encoder! 1749 00:49:51.666 --> 00:49:52.416 Oh, well. 1750 00:49:52.708 --> 00:49:54.250 Anyway, that's my last slide. 1751 00:49:54.250 --> 00:49:54.708 Wish me luck. 1752 00:49:54.958 --> 00:49:55.708 I'm not even sure... 1753 00:49:55.958 --> 00:49:58.291 The problem I have now is that you know 1754 00:49:58.291 --> 00:50:00.583 how I have H.264 that CleanShot gives me, 1755 00:50:00.583 --> 00:50:02.125 and then I convert it to AV1? 1756 00:50:02.125 --> 00:50:03.375 Now I'm doubting this. 1757 00:50:03.958 --> 00:50:05.291 I'm not sure this is not 1758 00:50:05.291 --> 00:50:06.666 messing with the colors. 1759 00:50:07.166 --> 00:50:08.250 That would make a lot of sense. 1760 00:50:08.250 --> 00:50:09.125 Next, you're going to go work at 1761 00:50:09.125 --> 00:50:11.375 CleanFeed, implement AV1 direct 1762 00:50:11.375 --> 00:50:14.041 recording, and then quit immediately. 1763 00:50:14.250 --> 00:50:15.458 James, I have emailed them. 1764 00:50:15.458 --> 00:50:16.250 They've already replied. 1765 00:50:16.708 --> 00:50:18.458 They're going to say, "We'll consider it." 1766 00:50:18.750 --> 00:50:19.250 OK. 1767 00:50:19.666 --> 00:50:20.791 I've already told them: 1768 00:50:20.791 --> 00:50:22.250 please let me pick a codec. 1769 00:50:22.250 --> 00:50:22.916 I know I'm the only 1770 00:50:22.916 --> 00:50:23.791 one who cares about this. 1771 00:50:23.791 --> 00:50:24.583 That's the corporate 1772 00:50:24.583 --> 00:50:25.791 version of "PRs welcome." 1773 00:50:25.833 --> 00:50:27.541 "I like you really much. 1774 00:50:27.541 --> 00:50:28.500 I like you a lot. 1775 00:50:28.500 --> 00:50:29.625 Please add this feature." 1776 00:50:29.625 --> 00:50:30.458 And they were like, "We 1777 00:50:30.458 --> 00:50:31.791 are so glad you like it. 1778 00:50:31.791 --> 00:50:32.666 We'll think about it." 1779 00:50:32.666 --> 00:50:33.750 Well, Amos: Bon chance. 1780 00:50:33.750 --> 00:50:34.833 Merci. 1781 00:50:43.416 --> 00:50:44.916 This episode is sponsored by Depot, 1782 00:50:45.083 --> 00:50:45.875 the build acceleration 1783 00:50:45.875 --> 00:50:47.166 platform that's on a mission 1784 00:50:47.166 --> 00:50:48.791 to make all builds near instant. 1785 00:50:49.166 --> 00:50:50.500 If you're tired of watching your builds 1786 00:50:50.500 --> 00:50:51.708 and GitHub actions crawl 1787 00:50:51.708 --> 00:50:53.000 like the modern day equivalent 1788 00:50:53.000 --> 00:50:55.000 of paint drying, give Depot's GitHub 1789 00:50:55.000 --> 00:50:56.041 Actions runners a try. 1790 00:50:56.500 --> 00:50:57.916 They're up to 10 times faster with 1791 00:50:57.916 --> 00:50:59.166 unlimited concurrency, 1792 00:50:59.208 --> 00:51:00.541 faster caching, support for 1793 00:51:00.541 --> 00:51:02.041 Linux, macOS and Windows, 1794 00:51:02.333 --> 00:51:03.250 and they plug right into 1795 00:51:03.250 --> 00:51:04.333 other Depot optimizations 1796 00:51:04.583 --> 00:51:06.291 like accelerated container image builds 1797 00:51:06.416 --> 00:51:07.375 and remote caching for 1798 00:51:07.375 --> 00:51:09.583 Bazel, Turborepo, Gradle and more. 1799 00:51:10.000 --> 00:51:11.500 Depot is built by developers who are 1800 00:51:11.500 --> 00:51:12.500 tired of wasting time 1801 00:51:12.500 --> 00:51:14.000 waiting on builds instead of shipping. 1802 00:51:14.291 --> 00:51:15.083 It's made for teams 1803 00:51:15.083 --> 00:51:16.083 that wanna move faster 1804 00:51:16.333 --> 00:51:17.041 and stay focused on 1805 00:51:17.041 --> 00:51:17.916 what actually matters. 1806 00:51:18.416 --> 00:51:19.083 That's why companies 1807 00:51:19.083 --> 00:51:20.541 like PostHog use Depot 1808 00:51:20.541 --> 00:51:22.416 to cut build times from over three hours 1809 00:51:22.416 --> 00:51:23.541 to just three minutes, 1810 00:51:23.791 --> 00:51:24.875 saving tens of thousands 1811 00:51:24.875 --> 00:51:26.208 of build hours every week. 1812 00:51:26.500 --> 00:51:27.458 Start your free seven 1813 00:51:27.458 --> 00:51:28.833 day trial at depot.dev 1814 00:51:28.833 --> 00:51:30.041 and let them know we sent you.