Skip to content

Add fetchpriority="high" when next/image has priority prop #40887

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sanjaiyan-dev wants to merge 9 commits into from
Closed

Add fetchpriority="high" when next/image has priority prop #40887

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
26b4849
sanjaiyan img improve
sanjaiyan-dev Sep 25, 2022
cd04e4d
Update image.tsx
sanjaiyan-dev Sep 25, 2022
0511c8b
Update image.tsx
sanjaiyan-dev Sep 25, 2022
7cb7499
revert
sanjaiyan-dev Sep 27, 2022
b01e26d
fetchPriority={priority ? "high" : null}
sanjaiyan-dev Sep 27, 2022
487a7be
image image
sanjaiyan-dev Sep 27, 2022
bb342fb
sanjaiyan: minor update
sanjaiyan-dev Oct 8, 2022
35832e0
Merge branch 'canary' into sanjaiyan-img-loading-improvement
sanjaiyan-dev Oct 8, 2022
5edeb4c
fix fallback
sanjaiyan-dev Oct 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/next/client/future/image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,7 @@ const ImageElement = ({
isLazy,
fill,
placeholder,
priority,
loading,
srcString,
config,
Expand All @@ -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" : undefined}
style={{ ...imgStyle, ...blurStyle }}
ref={useCallback(
(img: ImgElementWithDataProp | null) => {
Expand Down Expand Up @@ -857,6 +860,7 @@ export default function Image({
fill,
unoptimized,
placeholder,
priority,
loader,
srcString,
onLoadingCompleteRef,
Expand Down
5 changes: 5 additions & 0 deletions packages/next/client/image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,6 +479,7 @@ const ImageElement = ({
blurStyle,
isLazy,
placeholder,
priority,
loading,
srcString,
config,
Expand All @@ -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" : undefined}
ref={useCallback(
(img: ImgElementWithDataProp) => {
if (process.env.NODE_ENV !== 'production') {
Expand Down Expand Up @@ -569,6 +572,7 @@ const ImageElement = ({
sizes: noscriptSizes,
loader,
})}
fetchPriority={priority ? "high" : undefined}
decoding="async"
data-nimg={layout}
style={imgStyle}
Expand Down Expand Up @@ -1020,6 +1024,7 @@ export default function Image({
config,
unoptimized,
placeholder,
priority,
loader,
srcString,
onLoadingCompleteRef,
Expand Down