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/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/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}