[blog] Improve image handling (mui#34222)

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.
 
-![Photo of the MUI team in front of the pool at our accommodations in Tenerife](/static/blog/2022-tenerife-retreat/group-photo.jpeg)
+<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;" />
 
 <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
 
-![Satellite image of Tenerife](/static/blog/2022-tenerife-retreat/tenerife.jpeg)
+<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" style="aspect-ratio: 4/3;" 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
 
-![Photo of the pool in the evening at Symbiosis Living](/static/blog/2022-tenerife-retreat/pool-evening.jpeg)
+<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" />
 
 <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.
 
-![Photo of the outdoor kitchen at Symbiosis Living](/static/blog/2022-tenerife-retreat/outdoor-kitchen.jpeg)
+<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" />
 
 <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!
 
-![MUI X colleagues José and Andrew bond over a bottle of wine at dinner one night during the retreat.](/static/blog/2022-tenerife-retreat/jose-andrew-wine.jpeg)
+<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" />
 
 <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
 
-![Danail from the MUI X team snaps a selfie on the bow of the whale-watching boat, with coworkers in the background.](/static/blog/2022-tenerife-retreat/whale-watching-danail.jpeg)
+<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" />
 
 <p class="blog-description">Danail snaps a selfie on the whale-watching boat.</p>
 
@@ -79,7 +79,7 @@ Wear sunscreen.
 
 ### Scuba diving lessons
 
-![MUI team members and their diving instructors pose in scuba gear before a successful scuba diving lesson.](/static/blog/2022-tenerife-retreat/scuba-gear.jpeg)
+<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" />
 
 <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!
 
-![Overhead view of MUI team members learning how to scuba dive underwater.](/static/blog/2022-tenerife-retreat/scuba-1.jpeg)
+<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" />
 
 <p class="blog-description">MUI team members learn how to dive off the coast of Tenerife.</p>
 
 ### Volcanic hike at sunset
 
-![A group photo of the MUI crew posing near the base of Mount Teide at the start of the hike.](/static/blog/2022-tenerife-retreat/teide-group.jpeg)
+<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" />
 
 <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.
 
-![The sun setting above the clouds as seen near the top of Teide.](/static/blog/2022-tenerife-retreat/teide-sunset.jpeg)
+<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" />
 
 <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
 
-![MUI Core team members Marija, Jun, and Sam discuss the product roadmap.](/static/blog/2022-tenerife-retreat/focus-group.jpeg)
+<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" />
 
 <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://twitter.com/RemindMe_OfThis) September 2023 🙃
 
-![The product teams are seen spread out around a large indoor/outdoor workspace](/static/blog/2022-tenerife-retreat/focus-groups.jpeg)
+<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" />
 
 <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
 
-![An impromptu focus group gathered next to the pool with laptops to discuss cross-team marketing strategies.](/static/blog/2022-tenerife-retreat/outdoor-focus-group.jpeg)
+<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" />
 
 <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.
 
-![Collage of several photos of the MUI team members cuddling with the neighborhood cat during our work sessions.](/static/blog/2022-tenerife-retreat/cat-collage.jpeg)
+<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" />
 
 <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.
 
-![The path leading down the hill from the sunset view, with Teide glowing red in the background.](/static/blog/2022-tenerife-retreat/teide-hike.jpeg)
+<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" />
 
 <p class="blog-description">One final view of Teide glowing red in the sunset.</p>

docs/pages/blog/first-look-at-joy.md

@@ -7,7 +7,7 @@ tags: ['News', 'MUI Core']
 card: true
 ---
 
-<img src="/static/blog/first-look-at-joy/card.png" style="width: 796px; margin-bottom: 24px;" alt="First look at Joy UI: a new starting point for your design system." />
+<a href="/joy-ui/getting-started/overview/"><img src="/static/blog/first-look-at-joy/card.png" style="width: 692px; aspect-ratio: 2/1; margin-bottom: 24px;" alt="First look at Joy UI: a new starting point for your design system." /></a>
 
 If you're a close follower of everything MUI, you might be aware that we've been working on a new design system.
 If not, then this post will give you a first look at **Joy UI**－MUI's new starting point for your design system!
@@ -52,7 +52,7 @@ This sounds bold at first, but the more we experiment the more it starts to make
 What this means is that you're able to switch between the same set of variants in any component, more easily maintaining consistency across your app.
 The four variants available in the components are `solid`, `soft`, `outlined`, and `plain`.
 
-<img src="/static/blog/first-look-at-joy/global-variants.png" style="width: 796px; margin-top: 16px; margin-bottom: 16px;" alt="Screenshot of button component using all available variants." />
+<a href="/joy-ui/react-button/#variants"><img src="/static/blog/first-look-at-joy/global-variants.png" style="width: 692px; margin-top: 16px; margin-bottom: 16px;" loading="lazy" alt="Screenshot of button component using all available variants." /></a>
 
 ```jsx
 <Button variant="solid">
@@ -67,7 +67,7 @@ We meticulously constructed the CSS variables for each component so you can seam
 One good example is the input component, where the border radius of the input's children automatically adapts to that of the input.
 These small details mean the components adapt to different scenarios, which saves considerable time when customizing the components by avoiding manual adjustments.
 
-<img src="/static/blog/first-look-at-joy/component-integration.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="Screenshot of two text inputs, one being native from Joy UI and another with border-radius customized" />
+<img src="/static/blog/first-look-at-joy/component-integration.png" style="width: 692px; margin-top: 16px; margin-bottom: 8px;" alt="Screenshot of two text inputs, one being native from Joy UI and another with border-radius customized" />
 
 <p class="blog-description">When customizing the input's border radius, the icon button inside of it adapts automatically.</p>
 
@@ -136,21 +136,21 @@ Follow the templates' CodeSandbox or live demo links to experiment with Joy UI f
 
 ### Email
 
-<img src="/static/blog/first-look-at-joy/email.png" style="width: 796px; margin-top: 8px; margin-bottom: 16px;" alt="Screenshot of an email application mockup built with Joy UI" />
+<a href="/joy-ui/getting-started/templates/email/"><img src="/static/blog/first-look-at-joy/email.png" style="width: 692px; margin-top: 8px; margin-bottom: 16px;" loading="lazy" alt="Screenshot of an email application mockup built with Joy UI" /></a>
 
 - [Live demo](/joy-ui/getting-started/templates/email/)
 - [CodeSandbox](https://codesandbox.io/s/8gtttr?file=/App.tsx)
 
 ### File management
 
-<img src="/static/blog/first-look-at-joy/files.png" style="width: 796px; margin-top: 8px; margin-bottom: 16px;" alt="Screenshot of file management application mockup built with Joy UI" />
+<a href="/joy-ui/getting-started/templates/files/"><img src="/static/blog/first-look-at-joy/files.png" style="width: 692px; margin-top: 8px; margin-bottom: 16px;" loading="lazy" alt="Screenshot of file management application mockup built with Joy UI" /></a>
 
 - [Live demo](/joy-ui/getting-started/templates/files/)
 - [CodeSandbox](https://codesandbox.io/s/ro2b1t?file=/App.tsx)
 
 ### Team management
 
-<img src="/static/blog/first-look-at-joy/people.png" style="width: 796px; margin-top: 8px; margin-bottom: 16px;" alt="Screenshot of a team management application mockup built with Joy UI" />
+<a href="/joy-ui/getting-started/templates/team/"><img src="/static/blog/first-look-at-joy/people.png" style="width: 692px; margin-top: 8px; margin-bottom: 16px;" loading="lazy" alt="Screenshot of a team management application mockup built with Joy UI" /></a>
 
 - [Live demo](/joy-ui/getting-started/templates/team/)
 - [CodeSandbox](https://codesandbox.io/s/dclgbp?file=/App.tsx)

docs/pages/blog/introducing-mui-base.md

@@ -7,7 +7,7 @@ tags: ['News', 'MUI Core']
 card: true
 ---
 
-<img src="/static/blog/introducing-mui-base/hero-image.png" style="width: 692px; aspect-ratio: 132/61; margin-bottom: 24px;" alt="Demo components built with MUI Base, a newly introduced library of unstyled components and hooks" />
+<a href="/base/getting-started/overview/"><img src="/static/blog/introducing-mui-base/hero-image.png" style="width: 692px; aspect-ratio: 132/61; margin-bottom: 24px;" alt="Demo components built with MUI Base, a newly introduced library of unstyled components and hooks" /></a>
 
 While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults.
 We get it.

docs/pages/blog/making-customizable-components.md

@@ -30,14 +30,14 @@ Usually this means that the selector with more classes applied to it is more spe
 For example, if we look at the Material UI `Switch` component, we have multiple subcomponents that we could expect to modify.
 For each of them, we assign a specific CSS class:
 
-<img src="/static/blog/making-customizable-components/switchHighlighted.png" style="width: 692px; margin-top: 16px; margin-bottom: 16px;" alt="Switch component with highlighted sub components" />
+<img src="/static/blog/making-customizable-components/switchHighlighted.png" style="width: 692px; aspect-ratio: 173/80; margin-top: 16px; margin-bottom: 16px;" loading="lazy" alt="Switch component with highlighted sub components" />
 
 Notice that each element is styled using only one CSS class—the thumb style, for example, is applied with the `css-jsexje-MuiSwitch-thumb` class, so any CSS selector that includes more than one class will override its style.
 
 I'm not a designer, so I made an ugly switch example using only CSS—
 you can play around with it in [CodeSandbox](https://codesandbox.io/s/fast-http-kv85p5?file=/src/App.js):
 
-<img src="/static/blog/making-customizable-components/uglySwitches.png" style="width: 692px; margin-top: 16px; margin-bottom: 8px;" alt="Switch customized with CSS" />
+<img src="/static/blog/making-customizable-components/uglySwitches.png" style="width: 692px; aspect-ratio: 173/80; margin-top: 16px; margin-bottom: 8px;" loading="lazy" alt="Switch customized with CSS" />
 
 ```jsx
 <Switch className="uglySwitch" />
@@ -94,7 +94,7 @@ To give you an idea of how complex this component can get, let's look at an exam
 When I open the filter panel, the input listing the names of the columns is sorted according to column position.
 I would like to be able to sort it by alphabetical order.
 
-<img src="/static/blog/making-customizable-components/issueScreenshot.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="Screen shot of the filter panel with column selector un sorted" />
+<img src="/static/blog/making-customizable-components/issueScreenshot.png" style="width: 692px; aspect-ratio: 329/212; margin-top: 16px; margin-bottom: 8px;" loading="lazy" alt="Screen shot of the filter panel with column selector un sorted" />
 :::
 
 This request makes sense.
@@ -108,7 +108,7 @@ It just doesn't scale.
 There are too many different props that developers might need to modify.
 You will end up with API documentation so long that it will take an eternity to scroll to the end—meaning nobody will read it.
 
-<img src="/static/blog/making-customizable-components/bruce.gif" style="width: 500px; margin-top: 16px; margin-bottom: 8px;" alt="Your user opening the list of props" />
+<img src="/static/blog/making-customizable-components/bruce.gif" style="width: 500px; aspect-ratio: 500/281; margin-top: 16px; margin-bottom: 8px;" loading="lazy" alt="Your user opening the list of props" />
 
 Instead, consider these alternative solutions that can scale more efficiently with complex components:
 
@@ -188,9 +188,9 @@ But the reason why is quite simple: the `TextField` component is itself composed
 
 <FormControl>
   <FormControl>
-    <Label />
+    <InputLabel />
     <Input />
-    <HelperText />
+    <FormHelperText />
   </FormControl>
 </FormControl>
 ```
@@ -223,7 +223,7 @@ There's an **x** icon on the left side of the panel for deleting the current fil
 Say you want to replace this **x** with a trash icon.
 You can't do it with CSS—you need DOM modification to replace the SVG icon.
 
-<img src="/static/blog/making-customizable-components/FilterPanel.png" style="width: 796px; margin-top: 16px; margin-bottom: 16px;" alt="Default view of filter panel" />
+<img src="/static/blog/making-customizable-components/FilterPanel.png" style="width: 692px; aspect-ratio: ; margin-top: 16px; margin-bottom: 16px;" loading="lazy" alt="Default view of filter panel" />
 
 To manage such a scenario, the `DataGrid` has a prop called `components`.
 This prop lets you replace some internal grid components with your own custom ones.