diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx index 49fea2b31e179..e67da59c73040 100644 --- a/packages/next/client/future/image.tsx +++ b/packages/next/client/future/image.tsx @@ -326,6 +326,7 @@ const ImageElement = ({ isLazy, fill, placeholder, + priority, loading, srcString, config, @@ -351,6 +352,8 @@ const ImageElement = ({ className={className} // @ts-ignore - TODO: upgrade to `@types/react@17` loading={loading} + // https://web.dev/priority-hints/#increase-the-priority-of-the-lcp-image + fetchPriority={priority ? "high" : rest.fetchPriority} style={{ ...imgStyle, ...blurStyle }} ref={useCallback( (img: ImgElementWithDataProp | null) => { @@ -857,6 +860,7 @@ export default function Image({ fill, unoptimized, placeholder, + priority, loader, srcString, onLoadingCompleteRef, diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 0d4e55f04e17e..bb1620b9dac6e 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -479,6 +479,7 @@ const ImageElement = ({ blurStyle, isLazy, placeholder, + priority, loading, srcString, config, @@ -503,6 +504,8 @@ const ImageElement = ({ data-nimg={layout} className={className} style={{ ...imgStyle, ...blurStyle }} + // https://web.dev/priority-hints/#increase-the-priority-of-the-lcp-image + fetchPriority={priority ? "high" : rest.fetchPriority} ref={useCallback( (img: ImgElementWithDataProp) => { if (process.env.NODE_ENV !== 'production') { @@ -569,6 +572,7 @@ const ImageElement = ({ sizes: noscriptSizes, loader, })} + fetchPriority={priority ? "high" : rest.fetchPriority} decoding="async" data-nimg={layout} style={imgStyle} @@ -1020,6 +1024,7 @@ export default function Image({ config, unoptimized, placeholder, + priority, loader, srcString, onLoadingCompleteRef,