Skip to content
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.

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

fix(image): warn when animated image is missing unoptimized prop #61045

Merged
merged 2 commits into from
Jan 23, 2024

Conversation

styfle
Copy link
Member

@styfle styfle commented Jan 23, 2024

This PR adds a warning when attempting to optimize an animated image.

<Image src="/image.gif" />

The warning looks like the following:

The requested resource "/image.gif" is an animated image so it will not be optimized. Consider adding the "unoptimized" property to the <Image>.

To remove the warning, add the unoptimized prop.

<Image src="/image.gif" unoptimized />

We don't attempt to optimized animated images because it can be very slow (30+ seconds) and sometimes deoptimizeds (the output is larger than the input) so its best to serve the animated image as-is.

Closes NEXT-2199

@ijjk
Copy link
Member

ijjk commented Jan 23, 2024

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
buildDuration 11.5s 11.5s N/A
buildDurationCached 6s 4.8s N/A
nodeModulesSize 200 MB 200 MB ⚠️ +2.53 kB
nextStartRea..uration (ms) 420ms 417ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
193.HASH.js gzip 181 B 182 B N/A
3f784ff6-HASH.js gzip 53.4 kB 53.4 kB
433-HASH.js gzip 29 kB 29 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 240 B 242 B N/A
main-HASH.js gzip 31.8 kB 31.8 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB N/A
Overall change 98.6 kB 98.6 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 183 B 181 B N/A
amp-HASH.js gzip 504 B 502 B N/A
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 255 B 253 B N/A
head-HASH.js gzip 350 B 349 B N/A
hooks-HASH.js gzip 369 B 369 B
image-HASH.js gzip 4.18 kB 4.18 kB N/A
index-HASH.js gzip 255 B 256 B N/A
link-HASH.js gzip 2.61 kB 2.61 kB
routerDirect..HASH.js gzip 312 B 311 B N/A
script-HASH.js gzip 385 B 383 B N/A
withRouter-HASH.js gzip 307 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.4 kB 3.4 kB
Client Build Manifests
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
_buildManifest.js gzip 484 B 485 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
index.html gzip 528 B 525 B N/A
link.html gzip 540 B 538 B N/A
withRouter.html gzip 524 B 522 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
edge-ssr.js gzip 94 kB 94 kB N/A
page.js gzip 149 kB 149 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
middleware-b..fest.js gzip 625 B 628 B N/A
middleware-r..fest.js gzip 151 B 151 B
middleware.js gzip 37.5 kB 37.5 kB N/A
edge-runtime..pack.js gzip 1.92 kB 1.92 kB
Overall change 2.07 kB 2.07 kB
Next Runtimes
vercel/next.js canary vercel/next.js warn-animated-image-unoptimized Change
app-page-exp...dev.js gzip 169 kB 169 kB
app-page-exp..prod.js gzip 95.6 kB 95.6 kB
app-page-tur..prod.js gzip 96.3 kB 96.3 kB
app-page-tur..prod.js gzip 90.9 kB 90.9 kB
app-page.run...dev.js gzip 142 kB 142 kB
app-page.run..prod.js gzip 90.2 kB 90.2 kB
app-route-ex...dev.js gzip 24.2 kB 24.2 kB
app-route-ex..prod.js gzip 16.9 kB 16.9 kB
app-route-tu..prod.js gzip 16.9 kB 16.9 kB
app-route-tu..prod.js gzip 16.4 kB 16.4 kB
app-route.ru...dev.js gzip 23.6 kB 23.6 kB
app-route.ru..prod.js gzip 16.4 kB 16.4 kB
pages-api-tu..prod.js gzip 9.41 kB 9.41 kB
pages-api.ru...dev.js gzip 9.68 kB 9.68 kB
pages-api.ru..prod.js gzip 9.4 kB 9.4 kB
pages-turbo...prod.js gzip 22 kB 22 kB
pages.runtim...dev.js gzip 22.6 kB 22.6 kB
pages.runtim..prod.js gzip 22 kB 22 kB
server.runti..prod.js gzip 49.7 kB 49.7 kB
Overall change 944 kB 944 kB
Commit: 6d57cf6

@ijjk
Copy link
Member

ijjk commented Jan 23, 2024

Tests Passed

@styfle styfle marked this pull request as ready for review January 23, 2024 21:13
@styfle styfle requested review from jh3y and molebox and removed request for a team January 23, 2024 21:13
@styfle styfle merged commit 6c611fe into canary Jan 23, 2024
67 checks passed
@styfle styfle deleted the warn-animated-image-unoptimized branch January 23, 2024 22:31
@github-actions github-actions bot added the locked label Feb 7, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants