[docs][base] Improve Base UI all components images

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

A follow-up to #37536 to make images crispier. Also simplified the aspect ratio to a much more common one (16/9) and added explicit width and height sizes.

[michaldudak]

Even though the images have the width set explicitly in HTML, they are not rendered at this width:

This is caused by the CSS rule placed on the image that sets its width to 100% of the parent, which, in turn, is calculated based on the grid width and number of columns. We could explicitly set the card width to avoid ugly fractions.

[danilo-leal]

@michaldudak So we'd add an explicit width in pixel on the parent Card? Uhm... is that the best approach? 🤔

[mui-bot]

Netlify deploy preview

https://deploy-preview-37590--material-ui.netlify.app/

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 67ec75f

[danilo-leal]

@michaldudak & @siriwatknp mind giving this one a second pass, please? 🙌

[michaldudak]

TL;DR: yeah, let's ship it ;)

@michaldudak So we'd add an explicit width in pixel on the parent Card? Uhm... is that the best approach?

Not necessarily. I've found out the root cause of fractional widths is the max-width of div.main-content. It's set to 105ch and on my setup, this resolves to 814.333px. The width of a column in three-column layout with 16px gap is 260.771px, and the fractions continue.
This could be solved by setting .main-content's max-width to something like 57.5rem, which by default is 800px. One column is equal to a nice, round 256px in this case.

Now comes the (not so) fun part: images within cards are slightly smaller because cards have a 1px border. As I learned today, a 1px border isn't always a 1px border. Because I use 150% display scaling, my browsers (Edge and Firefox) render the border with 0.6667px width. This is (I assume) to ensure it occupies exactly one physical pixel and is crisp.

This means we don't know the exact width of the rendered image because it depends on display scaling settings. So no matter what we do, it could be a little blurry for some users.

Considering all the above, I suppose we can live with it. The version after the recent changes is better than before, so I'm ok with keeping it.

[danilo-leal]

@michaldudak Shoot, well, at least you & I definitely learned something while trying to optimize this 😅
Appreciate the breakdown and summary! 🙌

I do need an approval, though, to merge it! 😅