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

Jump to bottom

Bypass image optimization for vector images #18179

Merged
merged 2 commits into from Oct 24, 2020
Merged

Bypass image optimization for vector images #18179

merged 2 commits into from Oct 24, 2020

Conversation

styfle
Copy link
Member

@styfle styfle commented Oct 23, 2020 •
edited

Previously, vector images like svg were being converted to webp and resized.

However, vector images already handle any size so we can bypass the same we do for animated images.

Related to #18122

@styfle styfle mentioned this pull request Oct 23, 2020
Closed
24 tasks
@ijjk
Copy link
Member

ijjk commented Oct 23, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
buildDuration 12.3s 13.2s ⚠️ +882ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +461 B
Page Load Tests Overall increase ✓
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.814 2.548 -0.27
/ avg req/sec 888.29 981.27 +92.98
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.6 1.647 ⚠️ +0.05
/error-in-render avg req/sec 1562.2 1518.06 ⚠️ -44.14
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
677f882d2ed8..574c.js gzip 11.2 kB 11.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-af76201..828d.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
677f882d2ed8..dule.js gzip 7.02 kB 7.02 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-3ba933e..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 995 B 995 B ✓
Overall change 3 kB 3 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
buildDuration 15.2s 15.5s ⚠️ +290ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +461 B
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
677f882d2ed8..574c.js gzip 11.2 kB 11.2 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-af76201..828d.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
677f882d2ed8..dule.js gzip 7.02 kB 7.02 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-3ba933e..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Serverless bundles
vercel/next.js canary vercel/next.js image-api-bypass-svg Change
_error.js 1.06 MB 1.06 MB ✓
404.html 4.73 kB 4.73 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.06 MB 1.06 MB ✓
link.js 1.1 MB 1.1 MB ✓
routerDirect.js 1.1 MB 1.1 MB ✓
withRouter.js 1.1 MB 1.1 MB ✓
Overall change 5.42 MB 5.42 MB ✓
Commit: f86449e

@kodiakhq kodiakhq bot merged commit 0dff7de into canary Oct 24, 2020
@kodiakhq kodiakhq bot deleted the image-api-bypass-svg branch October 24, 2020 01:26
@kaykdm kaykdm mentioned this pull request Dec 26, 2020
Merged
kodiakhq bot pushed a commit that referenced this pull request Jan 13, 2021
@kaykdm
Fix image cache for vector and animated images (#20480)
e1184fb 
Fixes: #19100
> According to https://nextjs.org/docs/basic-features/image-optimization#caching Next.js populates a cache dir when using the new <Image /> component. This is not the case when using SVG files. This results in a performance penalty.

I created a function for writing images to cache directory (`wrirteToCacheDir`) and it is called for all images.
However, vector and animated images are not optimized before writing them to cache dir

Related to #18179
@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk ijjk approved these changes

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens timneutkens is a code owner

@pacocoursey pacocoursey Awaiting requested review from pacocoursey

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@styfle @ijjk @timneutkens