diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 8fac981ab29f2..6a86cbb2652fa 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2958,6 +2958,9 @@ function pushImg(
if (
headers &&
headers.remainingCapacity > 0 &&
+ // browsers today don't support preloading responsive images from link headers so we bail out
+ // if the img has srcset defined
+ typeof props.srcSet !== 'string' &&
// this is a hueristic similar to capping element preloads to 10 unless explicitly
// fetchPriority="high". We use length here which means it will fit fewer images when
// the urls are long and more when short. arguably byte size is a better hueristic because
@@ -5703,6 +5706,10 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
if (
headers &&
headers.remainingCapacity > 0 &&
+ // browsers today don't support preloading responsive images from link headers so we bail out
+ // if the img has srcset defined
+ typeof imageSrcSet !== 'string' &&
+ // We only include high priority images in the link header
fetchPriority === 'high' &&
// Compute the header since we might be able to fit it in the max length
((header = getPreloadAsHeader(href, as, options)),
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d64167015eec9..38cb7798d5f6f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3723,23 +3723,43 @@ describe('ReactDOMFizzServer', () => {
});
});
- it('encodes img srcset and sizes into preload header params', async () => {
+ it('omits images from preload headers if they contain srcset and sizes', async () => {
let headers = null;
function onHeaders(x) {
headers = x;
}
function App() {
- ReactDOM.preload('presrc', {
+ ReactDOM.preload('responsive-preload-set-only', {
+ as: 'image',
+ fetchPriority: 'high',
+ imageSrcSet: 'srcset',
+ });
+ ReactDOM.preload('responsive-preload', {
+ as: 'image',
+ fetchPriority: 'high',
+ imageSrcSet: 'srcset',
+ imageSizes: 'sizes',
+ });
+ ReactDOM.preload('non-responsive-preload', {
as: 'image',
fetchPriority: 'high',
- imageSrcSet: 'presrcset',
- imageSizes: 'presizes',
});
return (
- 
+ 
+ 
+ 
);
@@ -3751,8 +3771,8 @@ describe('ReactDOMFizzServer', () => {
expect(headers).toEqual({
Link: `
-; rel=preload; as="image"; fetchpriority="high"; imagesrcset="presrcset"; imagesizes="presizes",
- ; rel=preload; as="image"; imagesrcset="srcset"; imagesizes="sizes"
+; rel=preload; as="image"; fetchpriority="high",
+; rel=preload; as="image"; fetchpriority="high"
`
.replaceAll('\n', '')
.trim(),