Do front-end devs really not know this sort of thing in 2025? I haven't done serious web development since the jQuery days and it's still second nature to me. (Granted, WebP barely existed at that point.) Honestly, when I was growing up this sort of thing was something ordinary users would know about.
> This is a SVG. Only 2KB!
That's the uncompressed size. Since most production webservers use compression, the actual transfered data according to Chrome's Inspector was .9kb. Ironically, the favicon.ico was a 32kb file that compressed to 4.3kb and was loaded when I looked at https://cdn.idiallo.com/images/assets/527/ping_svg.svg
It seems weird to blame React for this.
A bit of a nit, but the 17kb PNG actually looks slightly blurry, or "artifact-ed" on my MacBook screen. Happily though, the author included a section on SVG at the bottom, which was my knee-jerk reaction for the appropriate format for lettering at that scale.
React tutorials shouldn't cover this. They're for learning React. Otherwise every tutorial for anything web based would need to include all the basics about the web too, every time.
I don't have an answer for where the best place to learn it in the course of becoming a dev. I learnt this stuff over 25 years ago when I was a teenager. The thing is, it was a necessity then. Now I can download a whole movie in less time than a poorly optimized webpage in the 90s. So while I still obsessively try to get the smallest best looking images when I'm doing frontend dev, I'm not sure it's really worth my time.
The author mentions automated tooling and I can see that being the best middle ground these days.