Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Who has the fastest F1 website (2021)

jakearchibald.com

Post reply on HN
Print view View original

31–40 of 69 posts

Re: Who has the fastest F1 website (2021)

#31

Post by the_plus_one »

sunaookami wrote: post #21
firefoxd wrote: post #20

Earlier quoted context omitted.

Bad at first until the pattern emerged. Solid colors, sharp lines, is PNG. Photo, 3d, landscape, is JPEG. I'm still trying to hammer it down for juniors who default to JPEG now.

Huh, don't you learn these at school? I learned this in 5-6th grade in my country. Even learned basic HTML and how to create websites with tables... which was when floats were all the rage.

As an American that grew up in a rural area, this definitely isn't something that would've been taught in a public school here. At best, we had typing classes in middle school, and the (quite old) teacher insisted on two spaces after the end of a sentence, something that disappeared after we stopped using typewriters.

Re: Who has the fastest F1 website (2021)

#32

Post by Swizec »

pxoe wrote: post #30
Swizec wrote: post #19

Earlier quoted context omitted.

My favorite real world example of this was adding a bunch of 2-tone graphics to a website that looked like hand-drawn sketches. The designer insisted they have to be SVG because vector graphics scale better. The SVG was 20MB. The PNG version at huge resolution was 20kB. PNG is really good when you have a few flat colors. SVG is really bad when you have lots of fine detail.

Have to wonder what those 20 MB SVGs were like and whether they could've been optimized as SVG still. Doesn't seem to add up that at "huge" resolution that PNG would be that small either.

> Doesn't seem to add up that at "huge" resolution that PNG would be that small either.

Well maybe not huge huge. Like 1000px wide so they look nice on retina screens.

The key is that these images were just 2 contiguous color areas. Black and transparent. PNG is really good for that because the compression algorithm works on the basis of contiguous color areas.

Re: Who has the fastest F1 website (2021)

#33

Post by jvanderbot »

pxoe wrote: post #30
Swizec wrote: post #19

Earlier quoted context omitted.

My favorite real world example of this was adding a bunch of 2-tone graphics to a website that looked like hand-drawn sketches. The designer insisted they have to be SVG because vector graphics scale better. The SVG was 20MB. The PNG version at huge resolution was 20kB. PNG is really good when you have a few flat colors. SVG is really bad when you have lots of fine detail.

Have to wonder what those 20 MB SVGs were like and whether they could've been optimized as SVG still. Doesn't seem to add up that at "huge" resolution that PNG would be that small either.

PNG keeps a count of sequentially-same color pixels (not really but roughly speaking) instead of keeping pixels themselves. So scaling a monocrome png image means just changing the count entry (very roughly speaking), so it'll be nearly zero cost.

What I mean is, if you have a million pixels of the same color (0xDEADBEEF maybe), then PNG will call that 1,000,000 x OxDEADBEEF. So, it scales very nicely for few-color, sparse or "blocky" images.

Re: Who has the fastest F1 website (2021)

#34

Post by paulddraper »

firefoxd wrote: post #12

Recently I made a small game at work called JPEG or PNG, for the front end team. Bootcamps tend to not focus on image formats at all, the results is all Figma images gets exported as PNGs and bloat the website. Devs often argue that the format is "sharper". Anyway, my game consisted of a slide of images and we vote what's the most appropriate format. When when people got a hang of it, I threw in WebP and SVG. I talk…

> Devs often argue that the format is "sharper".

And they’re correct.

PNGs use lossless compression.

JPEGs use lossy compression. (JPEG XL allows for lossless.)

Re: Who has the fastest F1 website (2021)

#35

Post by rconti »

sunaookami wrote: post #21
firefoxd wrote: post #20

Earlier quoted context omitted.

Bad at first until the pattern emerged. Solid colors, sharp lines, is PNG. Photo, 3d, landscape, is JPEG. I'm still trying to hammer it down for juniors who default to JPEG now.

Huh, don't you learn these at school? I learned this in 5-6th grade in my country. Even learned basic HTML and how to create websites with tables... which was when floats were all the rage.

I learned.. how to type.

Re: Who has the fastest F1 website (2021)

#36

Post by rconti »

cybrjoe wrote: post #8
cjbarber wrote: post #2

This reminds me of a principle I like: Once you understand your key traits and the key things customers come to you for, it's good to embody them everywhere! F1 is largely about speed. (I fondly remember going to various races as a child with my grandparents, in Melbourne. Everyone seemed in awe of Schumacher). So of course your website should be about speed! This could then apply to everything: ticket turnstiles tha…

This seems reductionist. There's plenty of other reasons people are F1 fans: the spectacle, the wealth, the prestige. While speed is certainly a draw for a lot of fans, speed can be at odds with the some of these other traits. For instance I took my son to qualifying in Miami, and while we both thoroughly enjoyed it, qualifying is quite short, and not nearly as exciting as watching it on TV. My son's first comment wa…

I'd expect a long lens shooting down a series of S-curves (think: Austin) would exaggerate how fast the cars look, but everything else would seem faster in person. My first F1 race was, indeed, in Austin, and the cars seemed mind-bendingly fast. Even just the sound sent a shiver up my spine as I walked up to the track from a half mile away. But that was in the V10 era; now they're very quiet.

On the other hand, my last F1 race was at Silverstone, and we were at Vale grandstand which is right at pit entry and the final chicane before the front straight. Sitting in a braking zone definitely makes the cars look slow.

Re: Who has the fastest F1 website (2021)

#37

Post by klysm »

Swizec wrote: post #19
firefoxd wrote: post #12

Recently I made a small game at work called JPEG or PNG, for the front end team. Bootcamps tend to not focus on image formats at all, the results is all Figma images gets exported as PNGs and bloat the website. Devs often argue that the format is "sharper". Anyway, my game consisted of a slide of images and we vote what's the most appropriate format. When when people got a hang of it, I threw in WebP and SVG. I talk…

My favorite real world example of this was adding a bunch of 2-tone graphics to a website that looked like hand-drawn sketches. The designer insisted they have to be SVG because vector graphics scale better. The SVG was 20MB. The PNG version at huge resolution was 20kB. PNG is really good when you have a few flat colors. SVG is really bad when you have lots of fine detail.

Fine detail isn’t really the metric to use when thinking of SVG size. 20MB just sounds like a catastrophic degenerate export from shitty software

Re: Who has the fastest F1 website (2021)

#38

Post by pxoe »

Swizec wrote: post #32
pxoe wrote: post #30

Earlier quoted context omitted.

Have to wonder what those 20 MB SVGs were like and whether they could've been optimized as SVG still. Doesn't seem to add up that at "huge" resolution that PNG would be that small either.

> Doesn't seem to add up that at "huge" resolution that PNG would be that small either. Well maybe not huge huge. Like 1000px wide so they look nice on retina screens. The key is that these images were just 2 contiguous color areas. Black and transparent. PNG is really good for that because the compression algorithm works on the basis of contiguous color areas.

Was there any attempt to optimize SVG? If it was just a single object/path, it'd be pretty small (if it was optimized/simplified for curves/node count, it could be even smaller), and then it could be harder matching that size with PNG or it wouldn't be that much of a difference.

Re: Who has the fastest F1 website (2021)

#39

Post by kllrnohj »

firefoxd wrote: post #12

Recently I made a small game at work called JPEG or PNG, for the front end team. Bootcamps tend to not focus on image formats at all, the results is all Figma images gets exported as PNGs and bloat the website. Devs often argue that the format is "sharper". Anyway, my game consisted of a slide of images and we vote what's the most appropriate format. When when people got a hang of it, I threw in WebP and SVG. I talk…

> results is all Figma images gets exported as PNGs and bloat the website

It's not just size but also decompression time. JPEG is way faster to decode which is also on the critical path towards time-to-display

Re: Who has the fastest F1 website (2021)

#40

Post by the_sleaze_ »

firefoxd wrote: post #12

Recently I made a small game at work called JPEG or PNG, for the front end team. Bootcamps tend to not focus on image formats at all, the results is all Figma images gets exported as PNGs and bloat the website. Devs often argue that the format is "sharper". Anyway, my game consisted of a slide of images and we vote what's the most appropriate format. When when people got a hang of it, I threw in WebP and SVG. I talk…

> Bootcamps tend to not focus on image formats

Can you tell me which university class you took that did?

Post reply on HN