[blog] Follow media asset guidelines

[oliviertassinari]

Scale #43945 to all the pages in anticipation for us to fix:

• 40941

• https://www.notion.so/mui-org/docs-infra-Images-solution-30e78dbf24744ed5b570027656139092

I used the opportunity to fix a bunch of problems:

• Follow https://www.notion.so/mui-org/High-quality-media-5a1686758f4f4267989b67a1c2c270da by the book. Give the examples. It was broken in so many places.
• Fix annoying layout shift at the bottom of the blog posts, e.g. https://mui.com/blog/mui-x-sep-2024-price-update/ by fixing HeroEnd.tsx
• Compress more images.
• Refresh the visual on https://deploy-preview-44374--material-ui.netlify.app/material-ui/react-progress/#high-cpu-load. It looks so 2019 screen before 🙈

And to add the missing logic to to work with the blog too.

Preview: https://deploy-preview-44374--material-ui.netlify.app/blog/

[mui-bot]

Netlify deploy preview

• docs/data/material/components/progress/progress.md

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against 5fb53ecee635be9f61db80c3209a6cf645f2d490

[oliviertassinari]

cc @alelthomas and @samuelsycamore for awareness as you are more likely to gravitate around new blog posts.

Until we solve those problems at the root with proper image loading logic (CDN, Next.js integration, etc.), following https://www.notion.so/mui-org/High-quality-media-5a1686758f4f4267989b67a1c2c270da should yield the best UX on the blog posts. No layout shifts, pixelated images, etc 😄