[blog] Follow media asset guidelines (#44374)

Signed-off-by: Olivier Tassinari <[email protected]>

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

@@ -112,7 +112,9 @@ After 1.0 second, you can display a loader to keep user's flow of thought uninte
 Under heavy load, you might lose the stroke dash animation or see random `CircularProgress` ring widths.
 You should run processor intensive operations in a web worker or by batch in order not to block the main rendering thread.
 
-![heavy load](/static/images/progress/heavy-load.gif)
+<video autoplay muted loop playsinline width="1082" height="158" style="width: 541px;">
+  <source src="/static/material-ui/react-components/progress-heavy-load.mp4" type="video/mp4" />
+</video>
 
 When it's not possible, you can leverage the `disableShrink` prop to mitigate the issue.
 See [this issue](https://github.com/mui/material-ui/issues/10327).

docs/pages/blog/2020-q1-update.md

@@ -18,7 +18,9 @@ Here are the most significant improvements since the beginning of the year:
 
 - 🔍 We have polished the [Autocomplete](https://mui.com/material-ui/react-autocomplete/) component (Combo box). We have closed more than [270](https://github.com/mui/material-ui/labels/lab%3A%20Autocomplete) issues and pull requests so far. We will promote the component to the core in the next major (v5).
 
-  ![autocomplete](/static/blog/2020-q1-update/autocomplete.gif)
+  <video autoplay muted loop playsinline width="382" height="408">
+    <source src="/static/blog/2020-q1-update/autocomplete.mp4" type="video/mp4" />
+  </video>
 
   <p class="blog-description">useAutocomplete <a href="https://mui.com/material-ui/react-autocomplete/#useautocomplete">hook</a> example, 4.5 kB gzipped.</p>
 

docs/pages/blog/2021-q2-update.md

@@ -111,7 +111,9 @@ The date picker is at the border between the core component and advanced compone
   We think that the component is good enough for use in production (and many developers already are using it), but we want to get the public API right before committing to a stable release.
 - ✍️ We have added support for the [cell edit mode](https://mui.com/x/react-data-grid/editing/).
 
-  <img loading="lazy" src="/static/blog/2021-q2-update/cell-edit.gif" alt="" style="width: 842px; margin-bottom: 16px;" />
+  <video autoplay muted loop playsinline width="1684" height="782">
+    <source src="/static/blog/2021-q2-update/cell-edit.mp4" type="video/mp4" />
+  </video>
 
 - 🐛 We have focused on fixing bugs and regressions to ensure early users have a great experience with the component.
   This was done instead of taking on ambitious new features.

docs/pages/blog/2021-q3-update.md

@@ -37,17 +37,17 @@ Here are the most significant improvements since early July 2021.
   - An icon illustrates the nature of the match; either a page, a header, or a paragraph.
   - Your most recent searches are saved in local storage.
 
-  <img loading="lazy" src="/static/blog/2021-q3-update/old-search.png" alt="" style="width: 596px;" />
+  <img loading="lazy" src="/static/blog/2021-q3-update/old-search.png" alt="" width="1192" height="936" style="width: 596px;" />
 
   <p class="blog-description">Before</p>
 
-  <img loading="lazy" src="/static/blog/2021-q3-update/new-search.png" alt="" style="width: 600px; margin-top: 32px;" />
+  <img loading="lazy" src="/static/blog/2021-q3-update/new-search.png" alt="" width="1200" height="920" style="width: 600px; margin-top: 32px;" />
 
   <p class="blog-description">After</p>
 
 - [Masonry](/material-ui/react-masonry/). We introduced a new component for use when the `Grid` component leads to wasted space. It's frequently used in dashboards.
 
-  <a href="/material-ui/react-masonry/"><img loading="lazy" src="/static/blog/2021-q3-update/masonry.png" style="width: 700px; margin-bottom: 16px;" alt="react-masonry" /></a>
+  <a href="/material-ui/react-masonry/"><img loading="lazy" src="/static/blog/2021-q3-update/masonry.png" style="width: 700px;" width="1400" height="906" alt="react-masonry" /></a>
 
 - We introduced a new [package of components without styles](https://www.npmjs.com/package/@mui/base), laying the foundations for supporting multiple design systems with headless components.
   While it was tough to balance the time between working on v5 stable and developing the unstyled components, we still managed to introduce the first few:
@@ -114,12 +114,14 @@ The date picker sits at the border between the core component and advanced compo
 - 🔎 We also added a [quick-filter demo](/x/react-data-grid/filtering/quick-filter/) to illustrate how it can be implemented,
   and will add a [built-in](https://github.com/mui/mui-x/issues/202) solution later on.
 
-  <a href="/x/react-data-grid/filtering/quick-filter/"><img loading="lazy" src="/static/blog/2021-q3-update/quick-filter.png" style="width: 700px; margin-bottom: 16px;" alt="react-data-grid-quick-filter" /></a>
+  <a href="/x/react-data-grid/filtering/quick-filter/"><img loading="lazy" src="/static/blog/2021-q3-update/quick-filter.png" width="1508" height="542" alt="react-data-grid-quick-filter" /></a>
 
 - 🐛 We fixed several non-idiomatic React patterns, for instance we were not handling controllable props by the book, and as we do in MUI Core.
 - 🚀 We introduced the [row editing](/x/react-data-grid/editing/#row-editing) feature.
 
-  <img src="/static/blog/2021-q3-update/row-edit.gif" alt="row-editing" width="851" />
+  <video autoplay muted loop playsinline width="1702" height="764">
+    <source src="/static/blog/2021-q3-update/row-edit.mp4" type="video/mp4" />
+  </video>
 
 - 🦺 We added a [`disableVirtualization`](/x/react-data-grid/virtualization/#disable-virtualization) prop to make it easier to test the data grid without a real browser environment, for example in jsdom with Jest.
 - 🚛 We have added an `onViewportRowsChange` prop as a first step toward being able to lazy load a large dataset.
@@ -152,7 +154,7 @@ for members of the team that were not prevented by COVID-19 related travel restr
 Less than half the company made it, but it was still fun!
 We spent half the time doing a [Hackathon](https://x.com/olivtassinari/status/1441773885259583491) and the other half on activities (surfing, biking, winery tour, and sightseeing).
 
-<img loading="lazy" src="/static/blog/2021-q3-update/retreat.jpeg" alt="" style="width: 596px; margin-bottom: 8px" />
+<img loading="lazy" src="/static/blog/2021-q3-update/retreat.jpeg" alt="" width="1613" height="1210" />
 
 <p class="blog-description">Sightseeing in Lisbon</p>
 

docs/pages/blog/2021.md

@@ -7,7 +7,7 @@ tags: ['Company']
 manualCard: true
 ---
 
-<img src="/static/blog/2021/card.png" alt="" style="width: 100%; margin-bottom: 16px;" />
+<img src="/static/blog/2021/card.png" alt="" width="2400" height="1256" />
 
 Happy New Year from MUI!
 

docs/pages/blog/2022-tenerife-retreat.md

@@ -12,7 +12,7 @@ How do you build trust, comradery, and—dare I say it?—_friendships_, when th
 
 At MUI, we've chosen to prioritize in-person company retreats as a way to grow together and cultivate the culture that informs how we operate.
 
-<img alt="Photo of the MUI team in front of the pool at our accommodations in Tenerife" src="/static/blog/2022-tenerife-retreat/group-photo.jpeg" style="width: 692px; aspect-ratio: 4/3;" />
+<img alt="Photo of the MUI team in front of the pool at our accommodations in Tenerife" src="/static/blog/2022-tenerife-retreat/group-photo.jpeg" width="1920" height="1440" />
 
 <p class="blog-description">The MUI team poses next to the pool during the company retreat.</p>
 
@@ -24,7 +24,7 @@ Oh, and I guess we got some work done along the way, too? 😅
 
 ## Destination
 
-<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
+<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" width="2560" height="1920" loading="lazy" />
 
 <p class="blog-description">Satellite photo of Tenerife, via <a href="https://en.wikipedia.org/wiki/Tenerife">Wikipedia</a>.</p>
 
@@ -36,14 +36,14 @@ With an average temperature ranging from about 18-25 °C (68-77 °F) year-round,
 
 ## Accommodation
 
-<img alt="Photo of the pool in the evening at Symbiosis Living" src="/static/blog/2022-tenerife-retreat/pool-evening.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
+<img alt="Photo of the pool in the evening at Symbiosis Living" src="/static/blog/2022-tenerife-retreat/pool-evening.jpeg" width="1920" height="1440" loading="lazy" />
 
 <p class="blog-description">A view of the pool at Symbiosis Living as dusk approaches.</p>
 
 [Symbiosis Living](https://www.symbiosisliving.com/) is a sustainable retreat venue nestled deep in the hills on the western side of the island.
 The venue is a venerable oasis of lush green flora amid the stark and barren volcanic rock that surrounds it, hosting breezy guest houses adorned with rustic, regionally sourced furniture.
 
-<img alt="Photo of the outdoor kitchen at Symbiosis Living" src="/static/blog/2022-tenerife-retreat/outdoor-kitchen.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
+<img alt="Photo of the outdoor kitchen at Symbiosis Living" src="/static/blog/2022-tenerife-retreat/outdoor-kitchen.jpeg" width="1918" height="1439" loading="lazy" />
 
 <p class="blog-description">The outdoor kitchen at Symbiosis Living.</p>
 
@@ -52,7 +52,7 @@ Almost all of our meals were cooked fresh by the hosts in their fabulous outdoor
 I don't think I've ever eaten that many incredible home-cooked meals in a single week. 😋
 And somehow each one was even better than the last!
 
-<img alt="MUI X colleagues José and Andrew bond over a bottle of wine at dinner one night during the retreat." src="/static/blog/2022-tenerife-retreat/jose-andrew-wine.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
+<img alt="MUI X colleagues José and Andrew bond over a bottle of wine at dinner one night during the retreat." src="/static/blog/2022-tenerife-retreat/jose-andrew-wine.jpeg" width="1920" height="1440" loading="lazy" />
 
 <p class="blog-description">MUI X colleagues José and Andrew bond through the tradition of a brüderschaft (German: <em>brotherhood</em>) toast.</p>
 
@@ -62,7 +62,7 @@ Throughout our stay in Tenerife, we arranged group activities to make the most o
 
 ### Whale and dolphin watching
 
-<img alt="Danail from the MUI X team snaps a selfie on the bow of the whale-watching boat, with coworkers in the background." src="/static/blog/2022-tenerife-retreat/whale-watching-danail.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
+<img alt="Danail from the MUI X team snaps a selfie on the bow of the whale-watching boat, with coworkers in the background." src="/static/blog/2022-tenerife-retreat/whale-watching-danail.jpeg" width="995" height="747" loading="lazy" />
 
 <p class="blog-description">Danail snaps a selfie on the whale-watching boat.</p>
 
@@ -79,7 +79,7 @@ Wear sunscreen.
 
 ### Scuba diving lessons
 
-<img alt="MUI team members and their diving instructors pose in scuba gear before a successful scuba diving lesson." src="/static/blog/2022-tenerife-retreat/scuba-gear.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
+<img alt="MUI team members and their diving instructors pose in scuba gear before a successful scuba diving lesson." src="/static/blog/2022-tenerife-retreat/scuba-gear.jpeg" width="1222" height="896" loading="lazy" />
 
 <p class="blog-description">MUI team members and their diving instructors pose in scuba gear before a successful scuba diving lesson.</p>
 
@@ -90,13 +90,13 @@ But once I got into the groove, the time underwater went by so quickly!
 The main highlights for me were spotting a [ray](https://aqua-marina.com/rays/) swimming by, and accidentally disturbing a [cuttlefish](https://www.paradisedivers.co.uk/blog/cuttlefish/) who was not pleased by our presence–and put on a great show as a result!
 Sorry, bud!
 
-<img alt="Overhead view of MUI team members learning how to scuba dive underwater." src="/static/blog/2022-tenerife-retreat/scuba-1.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
+<img alt="Overhead view of MUI team members learning how to scuba dive underwater." src="/static/blog/2022-tenerife-retreat/scuba-1.jpeg" width="1920" height="1079" loading="lazy" />
 
 <p class="blog-description">MUI team members learn how to dive off the coast of Tenerife.</p>
 
 ### Volcanic hike at sunset
 
-<img alt="A group photo of the MUI crew posing near the base of Mount Teide at the start of the hike." src="/static/blog/2022-tenerife-retreat/teide-group.jpeg" loading="lazy" />
+<img alt="A group photo of the MUI crew posing near the base of Mount Teide at the start of the hike." src="/static/blog/2022-tenerife-retreat/teide-group.jpeg" width="1198" height="1598" loading="lazy" />
 
 <p class="blog-description">The group poses at the start of the trail toward Teide.</p>
 
@@ -107,7 +107,7 @@ We learned a lot about the natural history of the island from our guide, who led
 Photos don't even begin to do it justice.
 I completely understand why Teide is one of Europe's most visited parks.
 
-<img alt="The sun setting above the clouds as seen near the top of Teide." src="/static/blog/2022-tenerife-retreat/teide-sunset.jpeg" loading="lazy" />
+<img alt="The sun setting above the clouds as seen near the top of Teide." src="/static/blog/2022-tenerife-retreat/teide-sunset.jpeg" loading="lazy" width="1920" height="1440" />
 
 <p class="blog-description">The Tenerife sunset as seen from Teide, above the clouds.</p>
 
@@ -117,7 +117,7 @@ Believe it or not, we actually did manage to squeeze in some productive work tim
 
 ### Roadmap to v6
 
-<img alt="MUI Core team members Marija, Jun, and Sam discuss the product roadmap." src="/static/blog/2022-tenerife-retreat/focus-group.jpeg" loading="lazy" />
+<img alt="MUI Core team members Marija, Jun, and Sam discuss the product roadmap." src="/static/blog/2022-tenerife-retreat/focus-group.jpeg" width="1920" height="1440" loading="lazy" />
 
 <p class="blog-description">MUI Core team discusses the product roadmap.</p>
 
@@ -127,7 +127,7 @@ We had some great conversations about what we hope to accomplish over the next s
 It's still hard to say when that release day might come, but we're optimistic that we could see it in mid to late 2023.
 [@RemindMe_OfThis](https://x.com/RemindMe_OfThis) September 2023 🙃
 
-<img alt="The product teams are seen spread out around a large indoor/outdoor workspace" src="/static/blog/2022-tenerife-retreat/focus-groups.jpeg" loading="lazy" />
+<img alt="The product teams are seen spread out around a large indoor/outdoor workspace" src="/static/blog/2022-tenerife-retreat/focus-groups.jpeg" width="1920" height="1440" loading="lazy" />
 
 <p class="blog-description">Product teams spread out throughout the breezy indoor/outdoor workspace.</p>
 
@@ -136,7 +136,7 @@ Keep an eye out!
 
 ### Focus groups
 
-<img alt="An impromptu focus group gathered next to the pool with laptops to discuss cross-team marketing strategies." src="/static/blog/2022-tenerife-retreat/outdoor-focus-group.jpeg" loading="lazy" />
+<img alt="An impromptu focus group gathered next to the pool with laptops to discuss cross-team marketing strategies." src="/static/blog/2022-tenerife-retreat/outdoor-focus-group.jpeg" width="1920" heiht="1440" loading="lazy" />
 
 <p class="blog-description">A focus group gathers to talk about developer marketing and outreach.</p>
 
@@ -151,7 +151,7 @@ Others discussed optimizing TypeScript performance, implementing editable demos
 All throughout our working sessions, we were accompanied by a very friendly young kitty (name unknown) who consistently offered critical support when we needed it the most.
 We can't thank her enough for her contributions to the company roadmap.
 
-<img alt="Collage of several photos of the MUI team members cuddling with the neighborhood cat during our work sessions." src="/static/blog/2022-tenerife-retreat/cat-collage.jpeg" loading="lazy" />
+<img alt="Collage of several photos of the MUI team members cuddling with the neighborhood cat during our work sessions." src="/static/blog/2022-tenerife-retreat/cat-collage.jpeg" width="1600" height="1893" loading="lazy" />
 
 <p class="blog-description">The cat was responsible for all of the cutest moments during the retreat.</p>
 
@@ -185,6 +185,6 @@ If you have a strong opinion one way or the other, then you better join the team
 
 I look forward to meeting new colleagues—as well as reconnecting with the Tenerife crew—in 2023.
 
-<img alt="The path leading down the hill from the sunset view, with Teide glowing red in the background." src="/static/blog/2022-tenerife-retreat/teide-hike.jpeg" loading="lazy" />
+<img alt="The path leading down the hill from the sunset view, with Teide glowing red in the background." src="/static/blog/2022-tenerife-retreat/teide-hike.jpeg" width="1440" height="1920" loading="lazy" />
 
 <p class="blog-description">One final view of Teide glowing red in the sunset.</p>