diff --git a/.circleci/config.yml b/.circleci/config.yml
index c33615ccb38a71..b8be5a472a645c 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -689,9 +689,9 @@ jobs:
                 value: << pipeline.git.branch >>
           steps:
             - aws-cli/setup:
-                aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: $AWS_REGION_ARTIFACTS
-                aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
+                aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                region: ${AWS_REGION_ARTIFACTS}
             # Upload distributables to S3
             - aws-s3/copy:
                 from: mui-material.tgz
@@ -718,9 +718,9 @@ jobs:
                 value: << pipeline.git.branch >>
           steps:
             - aws-cli/setup:
-                aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS
-                region: $AWS_REGION_ARTIFACTS
-                aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS
+                aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS
+                region: ${AWS_REGION_ARTIFACTS}
             # persist size snapshot on S3
             - aws-s3/copy:
                 arguments: --content-type application/json
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
index 8ab6163f0cb8be..1ed5a641a83a4a 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.js
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -13,8 +13,8 @@ export default function UnstyledSelectRichOptions() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             alt={`Flag of ${c.label}`}
           />
           {c.label} ({c.code}) +{c.phone}
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
index 5c9f3058715b68..8a673f1480ad4e 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -12,8 +12,8 @@ export default function UnstyledSelectRichOptions() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             alt={`Flag of ${c.label}`}
           />
           {c.label} ({c.code}) +{c.phone}
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
index c44e049a371c8f..31d481da995c63 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
@@ -4,8 +4,8 @@
       <img
         loading="lazy"
         width="20"
-        src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
         srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+        src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
         alt={`Flag of ${c.label}`}
       />
       {c.label} ({c.code}) +{c.phone}
diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.js b/docs/data/joy/components/aspect-ratio/CarouselRatio.js
index 6dd36bf6b53457..4cc30969b9afbc 100644
--- a/docs/data/joy/components/aspect-ratio/CarouselRatio.js
+++ b/docs/data/joy/components/aspect-ratio/CarouselRatio.js
@@ -42,8 +42,8 @@ export default function CarouselRatio() {
         <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
-              src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
               alt={item.title}
             />
           </AspectRatio>
diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
index 6dd36bf6b53457..4cc30969b9afbc 100644
--- a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
+++ b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
@@ -42,8 +42,8 @@ export default function CarouselRatio() {
         <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
-              src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
               alt={item.title}
             />
           </AspectRatio>
diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview
index eba9b94163d2d1..db4b39465714f0 100644
--- a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview
+++ b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview
@@ -2,8 +2,8 @@
   <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
     <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
       <img
-        src={`${item.src}?h=120&fit=crop&auto=format`}
         srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.src}?h=120&fit=crop&auto=format`}
         alt={item.title}
       />
     </AspectRatio>
diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.js b/docs/data/joy/components/aspect-ratio/ListStackRatio.js
index 040e2e7b7e424b..494726bc159c44 100644
--- a/docs/data/joy/components/aspect-ratio/ListStackRatio.js
+++ b/docs/data/joy/components/aspect-ratio/ListStackRatio.js
@@ -36,8 +36,8 @@ export default function ListStackRatio() {
               <ListItemButton sx={{ gap: 2 }}>
                 <AspectRatio sx={{ flexBasis: 120 }}>
                   <img
-                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     alt={item.title}
                   />
                 </AspectRatio>
diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx b/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
index 040e2e7b7e424b..494726bc159c44 100644
--- a/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
+++ b/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
@@ -36,8 +36,8 @@ export default function ListStackRatio() {
               <ListItemButton sx={{ gap: 2 }}>
                 <AspectRatio sx={{ flexBasis: 120 }}>
                   <img
-                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     alt={item.title}
                   />
                 </AspectRatio>
diff --git a/docs/data/joy/components/autocomplete/CountrySelect.js b/docs/data/joy/components/autocomplete/CountrySelect.js
index 3d0d980b6f6b3b..4a90f3cd76af86 100644
--- a/docs/data/joy/components/autocomplete/CountrySelect.js
+++ b/docs/data/joy/components/autocomplete/CountrySelect.js
@@ -25,8 +25,8 @@ export default function CountrySelect() {
             <img
               loading="lazy"
               width="20"
-              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               alt=""
             />
           </ListItemDecorator>
diff --git a/docs/data/joy/components/autocomplete/CountrySelect.tsx b/docs/data/joy/components/autocomplete/CountrySelect.tsx
index 3d0d980b6f6b3b..4a90f3cd76af86 100644
--- a/docs/data/joy/components/autocomplete/CountrySelect.tsx
+++ b/docs/data/joy/components/autocomplete/CountrySelect.tsx
@@ -25,8 +25,8 @@ export default function CountrySelect() {
             <img
               loading="lazy"
               width="20"
-              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               alt=""
             />
           </ListItemDecorator>
diff --git a/docs/data/joy/getting-started/templates/email/components/Mails.tsx b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
index 8e240067a651d3..d2ac9ffcada730 100644
--- a/docs/data/joy/getting-started/templates/email/components/Mails.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
@@ -48,8 +48,8 @@ export default function EmailList() {
               <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
                 <Avatar
                   alt=""
-                  src={item.avatar}
                   srcSet={item.avatar2x}
+                  src={item.avatar}
                   sx={{ borderRadius: 'sm' }}
                 />
               </ListItemDecorator>
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
index ffad77fc4fccae..b2040cf7bf2455 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
@@ -27,8 +27,8 @@ export default function ContrySelector({ sx, ...props }: FormControlProps) {
                 <img
                   loading="lazy"
                   width="20"
-                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   alt=""
                 />
               </AspectRatio>
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
index 76ae8b5083151e..788ec77f375c1a 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
@@ -25,8 +25,8 @@ export default function ContrySelector({ sx, ...props }: FormControlProps) {
                 <img
                   loading="lazy"
                   width="20"
-                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   alt=""
                 />
               </AspectRatio>
diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
index 7ee1aa5dec9240..b274edd394c33e 100644
--- a/docs/data/material/components/autocomplete/CountrySelect.js
+++ b/docs/data/material/components/autocomplete/CountrySelect.js
@@ -16,8 +16,8 @@ export default function CountrySelect() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             alt=""
           />
           {option.label} ({option.code}) +{option.phone}
diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
index 0ded6935207f79..52f628e15a9c04 100644
--- a/docs/data/material/components/autocomplete/CountrySelect.tsx
+++ b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -16,8 +16,8 @@ export default function CountrySelect() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             alt=""
           />
           {option.label} ({option.code}) +{option.phone}
diff --git a/docs/data/material/components/image-list/MasonryImageList.js b/docs/data/material/components/image-list/MasonryImageList.js
index a98a12a61a908f..ac4258fa09a678 100644
--- a/docs/data/material/components/image-list/MasonryImageList.js
+++ b/docs/data/material/components/image-list/MasonryImageList.js
@@ -10,8 +10,8 @@ export default function MasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />
diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx b/docs/data/material/components/image-list/MasonryImageList.tsx
index a98a12a61a908f..ac4258fa09a678 100644
--- a/docs/data/material/components/image-list/MasonryImageList.tsx
+++ b/docs/data/material/components/image-list/MasonryImageList.tsx
@@ -10,8 +10,8 @@ export default function MasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />
diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx.preview b/docs/data/material/components/image-list/MasonryImageList.tsx.preview
index 15833b26f6edf2..a56d1725430767 100644
--- a/docs/data/material/components/image-list/MasonryImageList.tsx.preview
+++ b/docs/data/material/components/image-list/MasonryImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=248&fit=crop&auto=format`}
         srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=248&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />
diff --git a/docs/data/material/components/image-list/StandardImageList.js b/docs/data/material/components/image-list/StandardImageList.js
index 7b275e751ba8e1..2f286fc6809ec9 100644
--- a/docs/data/material/components/image-list/StandardImageList.js
+++ b/docs/data/material/components/image-list/StandardImageList.js
@@ -8,8 +8,8 @@ export default function StandardImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/StandardImageList.tsx b/docs/data/material/components/image-list/StandardImageList.tsx
index 7b275e751ba8e1..2f286fc6809ec9 100644
--- a/docs/data/material/components/image-list/StandardImageList.tsx
+++ b/docs/data/material/components/image-list/StandardImageList.tsx
@@ -8,8 +8,8 @@ export default function StandardImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/StandardImageList.tsx.preview b/docs/data/material/components/image-list/StandardImageList.tsx.preview
index b5bd5036a6f7e8..613d25ded6ca18 100644
--- a/docs/data/material/components/image-list/StandardImageList.tsx.preview
+++ b/docs/data/material/components/image-list/StandardImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
         srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />
diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.js b/docs/data/material/components/image-list/TitlebarBelowImageList.js
index 64130c6ea7e015..4363c50690e36a 100644
--- a/docs/data/material/components/image-list/TitlebarBelowImageList.js
+++ b/docs/data/material/components/image-list/TitlebarBelowImageList.js
@@ -9,8 +9,8 @@ export default function TitlebarBelowImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx b/docs/data/material/components/image-list/TitlebarBelowImageList.tsx
index 64130c6ea7e015..4363c50690e36a 100644
--- a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx
+++ b/docs/data/material/components/image-list/TitlebarBelowImageList.tsx
@@ -9,8 +9,8 @@ export default function TitlebarBelowImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
index be826d7729a0ea..efdac65530cbe1 100644
--- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
+++ b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
@@ -11,8 +11,8 @@ export default function TitlebarBelowMasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />
diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx
index be826d7729a0ea..efdac65530cbe1 100644
--- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx
+++ b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx
@@ -11,8 +11,8 @@ export default function TitlebarBelowMasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />
diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
index 451af099ba2c3b..b58e789212f8cd 100644
--- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
+++ b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=248&fit=crop&auto=format`}
         srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=248&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />
diff --git a/docs/data/material/components/image-list/TitlebarImageList.js b/docs/data/material/components/image-list/TitlebarImageList.js
index e622271e8b2853..5e312988d0f2a7 100644
--- a/docs/data/material/components/image-list/TitlebarImageList.js
+++ b/docs/data/material/components/image-list/TitlebarImageList.js
@@ -15,8 +15,8 @@ export default function TitlebarImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/TitlebarImageList.tsx b/docs/data/material/components/image-list/TitlebarImageList.tsx
index e622271e8b2853..5e312988d0f2a7 100644
--- a/docs/data/material/components/image-list/TitlebarImageList.tsx
+++ b/docs/data/material/components/image-list/TitlebarImageList.tsx
@@ -15,8 +15,8 @@ export default function TitlebarImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/WovenImageList.js b/docs/data/material/components/image-list/WovenImageList.js
index 0c368b6b168d22..b1e8a6bae04da7 100644
--- a/docs/data/material/components/image-list/WovenImageList.js
+++ b/docs/data/material/components/image-list/WovenImageList.js
@@ -8,8 +8,8 @@ export default function WovenImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=161&fit=crop&auto=format`}
             srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=161&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/WovenImageList.tsx b/docs/data/material/components/image-list/WovenImageList.tsx
index 0c368b6b168d22..b1e8a6bae04da7 100644
--- a/docs/data/material/components/image-list/WovenImageList.tsx
+++ b/docs/data/material/components/image-list/WovenImageList.tsx
@@ -8,8 +8,8 @@ export default function WovenImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=161&fit=crop&auto=format`}
             srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=161&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />
diff --git a/docs/data/material/components/image-list/WovenImageList.tsx.preview b/docs/data/material/components/image-list/WovenImageList.tsx.preview
index 7ff0dc7262a427..329a1d42b3511a 100644
--- a/docs/data/material/components/image-list/WovenImageList.tsx.preview
+++ b/docs/data/material/components/image-list/WovenImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=161&fit=crop&auto=format`}
         srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=161&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />
diff --git a/docs/data/material/components/masonry/ImageMasonry.js b/docs/data/material/components/masonry/ImageMasonry.js
index 72b96e14f97535..268268ea63953b 100644
--- a/docs/data/material/components/masonry/ImageMasonry.js
+++ b/docs/data/material/components/masonry/ImageMasonry.js
@@ -22,8 +22,8 @@ export default function ImageMasonry() {
           <div key={index}>
             <Label>{index + 1}</Label>
             <img
-              src={`${item.img}?w=162&auto=format`}
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=162&auto=format`}
               alt={item.title}
               loading="lazy"
               style={{
diff --git a/docs/data/material/components/masonry/ImageMasonry.tsx b/docs/data/material/components/masonry/ImageMasonry.tsx
index 72b96e14f97535..268268ea63953b 100644
--- a/docs/data/material/components/masonry/ImageMasonry.tsx
+++ b/docs/data/material/components/masonry/ImageMasonry.tsx
@@ -22,8 +22,8 @@ export default function ImageMasonry() {
           <div key={index}>
             <Label>{index + 1}</Label>
             <img
-              src={`${item.img}?w=162&auto=format`}
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=162&auto=format`}
               alt={item.title}
               loading="lazy"
               style={{
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index 668fc633c68cd0..a07ce70773f838 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -126,8 +126,8 @@ function PostPreview(props: BlogPost) {
             <Avatar
               key={author}
               alt=""
-              src={`${AUTHORS[author].avatar}?s=${28}`}
               srcSet={`${AUTHORS[author].avatar}?s=${28 * 2} 2x`}
+              src={`${AUTHORS[author].avatar}?s=${28}`}
             />
           ))}
         </AvatarGroup>
@@ -264,13 +264,13 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       <main id="main-content">
         <Box
           sx={(theme) => ({
-            background: `linear-gradient(180deg, #FFF 50%, 
+            background: `linear-gradient(180deg, #FFF 50%,
           ${(theme.vars || theme).palette.primary[50]} 100%)
         `,
             ...theme.applyDarkStyles({
               background: `linear-gradient(180deg, ${
                 (theme.vars || theme).palette.primaryDark[800]
-              } 50%, 
+              } 50%,
           ${alpha(theme.palette.primary[900], 0.2)} 100%)
           `,
             }),
diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx
index a708cfd1269849..0f6b963bda358d 100644
--- a/docs/src/components/home/CompaniesGrid.tsx
+++ b/docs/src/components/home/CompaniesGrid.tsx
@@ -170,7 +170,7 @@ export default function CompaniesGrid({ data }: { data: Array<IconImageProps> })
             objectFit: 'contain',
           }}
         >
-          <IconImage alt={imgProps.alt || `${imgProps.name} logo`} {...imgProps} />
+          <IconImage alt={imgProps.alt || `${imgProps.name} logo`} loading="eager" {...imgProps} />
         </Grid>
       ))}
     </Grid>
diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx
index 1958d119791547..e1e51ea089bc7e 100644
--- a/docs/src/components/home/DesignKits.tsx
+++ b/docs/src/components/home/DesignKits.tsx
@@ -64,7 +64,8 @@ const Anchor = styled('a')(({ theme }) => [
 const DesignToolLink = React.forwardRef<
   HTMLAnchorElement,
   React.PropsWithChildren<{ brand: 'figma' | 'sketch' | 'adobexd' }>
->(function DesignToolLink({ brand, ...props }, ref) {
+>(function DesignToolLink(props, ref) {
+  const { brand, ...other } = props;
   return (
     <Anchor
       ref={ref}
@@ -80,10 +81,8 @@ const DesignToolLink = React.forwardRef<
         }[brand]
       }
       target="_blank"
-      {...props}
-    >
-      {props.children}
-    </Anchor>
+      {...other}
+    />
   );
 });
 
diff --git a/docs/src/components/home/References.tsx b/docs/src/components/home/References.tsx
index 290c13e6c61824..54a8d76e109410 100644
--- a/docs/src/components/home/References.tsx
+++ b/docs/src/components/home/References.tsx
@@ -15,7 +15,7 @@ export { CORE_CUSTOMERS, ADVANCED_CUSTOMERS, DESIGNKITS_CUSTOMERS, TEMPLATES_CUS
 
 const CompaniesGrid = dynamic(() => import('./CompaniesGrid'));
 
-function References({
+export default function References({
   companies,
 }: {
   companies:
@@ -50,5 +50,3 @@ function References({
     </Section>
   );
 }
-
-export default References;
diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx
index d00990c7441821..b71858367e3545 100644
--- a/docs/src/components/home/StoreTemplatesBanner.tsx
+++ b/docs/src/components/home/StoreTemplatesBanner.tsx
@@ -28,6 +28,7 @@ const Image = styled('img')(({ theme }) => ({
   borderColor: (theme.vars || theme).palette.grey[400],
   borderRadius: (theme.vars || theme).shape.borderRadius,
   objectFit: 'cover',
+  objectPosition: 'top',
   boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
   ...theme.applyDarkStyles({
     borderColor: (theme.vars || theme).palette.grey[800],
@@ -108,6 +109,7 @@ const StoreTemplateImage = React.forwardRef<
         Object.keys(linkMapping).indexOf(brand) + 1
       }light.jpg`}
       alt=""
+      loading="lazy"
       sx={(theme) =>
         theme.applyDarkStyles({
           content: `url(/static/branding/store-templates/template-${
diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx
index 7fb72e101a9b47..d0440eef182acc 100644
--- a/docs/src/components/home/UserFeedbacks.tsx
+++ b/docs/src/components/home/UserFeedbacks.tsx
@@ -26,8 +26,8 @@ function Feedback({
       </Typography>
       <Box sx={{ display: 'flex' }}>
         <Avatar
-          src={profile.avatarSrc}
           srcSet={profile.avatarSrcSet}
+          src={profile.avatarSrc}
           alt={`Picture of ${profile.name}`}
           imgProps={{ loading: 'lazy' }}
           sx={{
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 619633036f17c4..3e2c12975d1b15 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -57,7 +57,7 @@ export function PlanName({
         fontWeight="bold"
         sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', pr: 0.5 }}
       >
-        <IconImage name={iconName} sx={{ mr: 1 }} /> {title}
+        <IconImage name={iconName} loading="eager" sx={{ mr: 1 }} /> {title}
       </Typography>
       {!disableDescription && (
         <Typography
diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
index 1ca67b2e25f77e..71eb65e11592f1 100644
--- a/docs/src/components/productBaseUI/BaseUIHero.tsx
+++ b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -55,7 +55,7 @@ export default function BaseUIHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-core" />{' '}
+            <IconImage width={28} height={28} loading="eager" name="product-core" />{' '}
             <Link href={ROUTES.productCore}>MUI Core</Link>{' '}
             <Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
               /
diff --git a/docs/src/components/productCore/CoreHero.tsx b/docs/src/components/productCore/CoreHero.tsx
index 569ea94e531e1f..d370dd80f81a12 100644
--- a/docs/src/components/productCore/CoreHero.tsx
+++ b/docs/src/components/productCore/CoreHero.tsx
@@ -33,7 +33,7 @@ export default function CoreHero() {
             }),
           })}
         >
-          <IconImage width={28} height={28} name="product-core" /> MUI Core
+          <IconImage loading="eager" width={28} height={28} name="product-core" /> MUI Core
         </Typography>
         <Typography component="h1" variant="h2" sx={{ textAlign: 'center' }} gutterBottom>
           Ready to use components
diff --git a/docs/src/components/productCore/CoreHeroEnd.tsx b/docs/src/components/productCore/CoreHeroEnd.tsx
index cfadb5cb74ce1e..21c1ae09fd2a2d 100644
--- a/docs/src/components/productCore/CoreHeroEnd.tsx
+++ b/docs/src/components/productCore/CoreHeroEnd.tsx
@@ -19,7 +19,7 @@ export default function CoreHeroEnd() {
       data-mui-color-scheme="dark"
       sx={{
         background: (theme) =>
-          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%, 
+          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%,
         ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
             (theme.vars || theme).palette.primaryDark[800]
           }`,
@@ -47,7 +47,7 @@ export default function CoreHeroEnd() {
               endIcon={<KeyboardArrowRightRounded />}
               sx={{ width: { xs: '100%', sm: 'auto' } }}
             >
-              Learn more
+              Join our community
             </Button>
           </Box>
         </Grid>
diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx
index 9df73570a2d0a1..46b551a737e937 100644
--- a/docs/src/components/productCore/CoreProducts.tsx
+++ b/docs/src/components/productCore/CoreProducts.tsx
@@ -27,7 +27,7 @@ const content = [
     // logo:
     title: 'Base UI',
     description:
-      'A library of unstyled components with production-ready functionality, along with low-level hooks.',
+      'A library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app\'s CSS and accessibility features.',
     link: '/base-ui/',
   },
   {
@@ -59,13 +59,11 @@ export default function CoreProducts() {
                   theme.palette.primary[50],
                   0.3,
                 )} 40%, ${alpha(theme.palette.grey[50], 0.2)} 100%)`,
-
                 '&:hover': {
                   borderColor: 'primary.500',
                   boxShadow:
                     '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
                 },
-
                 ...theme.applyDarkStyles({
                   bgcolor: 'primaryDark.900',
                   borderColor: 'primaryDark.700',
@@ -73,7 +71,6 @@ export default function CoreProducts() {
                     theme.palette.primary[900],
                     0.1,
                   )} 40%, ${alpha(theme.palette.primaryDark[800], 0.2)} 100%)`,
-
                   '&:hover': {
                     boxShadow: '0px 1px 6px #0059B3, inset 0px 2px 30px rgba(0, 0, 0, 0.1)',
                   },
@@ -105,7 +102,7 @@ export default function CoreProducts() {
               </Box> */}
               <Typography
                 fontWeight="bold"
-                component="h3"
+                component="h2"
                 color="text.primary"
                 variant="body1"
                 // mt={2}
diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx
index cbb801f79cf5af..8651c294cca2cf 100644
--- a/docs/src/components/productDesignKit/DesignKitHero.tsx
+++ b/docs/src/components/productDesignKit/DesignKitHero.tsx
@@ -34,7 +34,7 @@ export default function TemplateHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-designkits" /> Design kits
+            <IconImage width={28} height={28} loading="eager" name="product-designkits" /> Design kits
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
             Material UI
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index 08f6218d55c07a..b0360b0fcd3d7c 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -237,7 +237,7 @@ export default function MaterialHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-core" />{' '}
+            <IconImage loading="eager" width={28} height={28} name="product-core" />{' '}
             <Link href={ROUTES.productCore}>MUI Core</Link>{' '}
             <Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
               /
diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
index 2cd600b2c3b53f..036acd556e6bc0 100644
--- a/docs/src/components/productTemplate/TemplateHero.tsx
+++ b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -32,7 +32,7 @@ export default function TemplateHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-templates" /> Templates
+            <IconImage width={28} height={28} loading="eager" name="product-templates" /> Templates
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
             <GradientText>Fully built</GradientText> Material&nbsp;UI templates
diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx
index dcaecbf0f57f09..f40e12ce0771fa 100644
--- a/docs/src/components/productX/XHero.tsx
+++ b/docs/src/components/productX/XHero.tsx
@@ -104,7 +104,7 @@ export default function XHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-advanced" /> MUI X
+            <IconImage width={28} height={28} loading="eager" name="product-advanced" /> MUI X
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
             Performant
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 46667eea7cffdb..4a5075ee4137d0 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -242,7 +242,7 @@ const Root = styled('div')(
     }),
 );
 
-function TopLayoutBlog(props) {
+export default function TopLayoutBlog(props) {
   const { className, docs } = props;
   const { description, rendered, title, headers } = docs.en;
   const finalTitle = title || headers.title;
@@ -331,6 +331,11 @@ function TopLayoutBlog(props) {
           </Link>
           {headers.title ? (
             <React.Fragment>
+              {/*
+                Depending on the timezone, the display date can change from one day to another.
+                e.g. Sunday vs. Monday
+                TODO: Move the date formating to the server.
+              */}
               <time dateTime={headers.date} className={classes.time}>
                 {new Intl.DateTimeFormat('en', {
                   weekday: 'long',
@@ -392,5 +397,3 @@ TopLayoutBlog.propTypes = {
 if (process.env.NODE_ENV !== 'production') {
   TopLayoutBlog.propTypes = exactProp(TopLayoutBlog.propTypes);
 }
-
-export default TopLayoutBlog;
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
index d3aee2856b9e1f..e20b5afcce024b 100644
--- a/packages/mui-material/src/Avatar/Avatar.js
+++ b/packages/mui-material/src/Avatar/Avatar.js
@@ -164,8 +164,8 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
     children = (
       <AvatarImg
         alt={alt}
-        src={src}
         srcSet={srcSet}
+        src={src}
         sizes={sizes}
         ownerState={ownerState}
         className={classes.img}