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
Image Component: Support for Akamai image CDN #18100
Conversation
Stats from current PRDefault Server Mode (Increase detected
|
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
buildDuration | 11.2s | 11.4s | |
nodeModulesSize | 91.2 MB | 91.2 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.127 | 2.075 | -0.05 |
/ avg req/sec | 1175.56 | 1204.8 | +29.24 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.179 | 1.178 | 0 |
/error-in-render avg req/sec | 2119.68 | 2122.84 | +3.16 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
677f882d2ed8..35e7.js gzip | 11.1 kB | 11.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-0297b89..3d55.js gzip | 7.34 kB | 7.34 kB | ✓ |
webpack-e067..f178.js gzip | 751 B | 751 B | ✓ |
Overall change | 58.1 kB | 58.1 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
677f882d2ed8..dule.js gzip | 6.94 kB | 6.94 kB | ✓ |
framework.HA..dule.js gzip | 39 kB | 39 kB | ✓ |
main-8539e6d..dule.js gzip | 6.32 kB | 6.32 kB | ✓ |
webpack-07c5..dule.js gzip | 751 B | 751 B | ✓ |
Overall change | 53 kB | 53 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
polyfills-4b..e242.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | azukaru/next.js image-component-add-akamai | 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-89ad9e7..25bb.js gzip | 1.34 kB | 1.34 kB | ✓ |
routerDirect..924c.js gzip | 284 B | 284 B | ✓ |
withRouter-7..c13d.js gzip | 284 B | 284 B | ✓ |
Overall change | 7.74 kB | 7.74 kB | ✓ |
Client Pages Modern
vercel/next.js canary | azukaru/next.js image-component-add-akamai | 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-aeb707b..dule.js gzip | 1.29 kB | 1.29 kB | ✓ |
routerDirect..dule.js gzip | 284 B | 284 B | ✓ |
withRouter-f..dule.js gzip | 282 B | 282 B | ✓ |
Overall change | 5.39 kB | 5.39 kB | ✓ |
Client Build Manifests
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
_buildManifest.js gzip | 322 B | 322 B | ✓ |
_buildManife..dule.js gzip | 329 B | 329 B | ✓ |
Overall change | 651 B | 651 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
index.html gzip | 1 kB | 1 kB | ✓ |
link.html gzip | 1.01 kB | 1.01 kB | ✓ |
withRouter.html gzip | 996 B | 996 B | ✓ |
Overall change | 3.01 kB | 3.01 kB | ✓ |
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
buildDuration | 13s | 12.9s | -15ms |
nodeModulesSize | 91.2 MB | 91.2 MB |
Client Bundles (main, webpack, commons)
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
677f882d2ed8..35e7.js gzip | 11.1 kB | 11.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-0297b89..3d55.js gzip | 7.34 kB | 7.34 kB | ✓ |
webpack-e067..f178.js gzip | 751 B | 751 B | ✓ |
Overall change | 58.1 kB | 58.1 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
677f882d2ed8..dule.js gzip | 6.94 kB | 6.94 kB | ✓ |
framework.HA..dule.js gzip | 39 kB | 39 kB | ✓ |
main-8539e6d..dule.js gzip | 6.32 kB | 6.32 kB | ✓ |
webpack-07c5..dule.js gzip | 751 B | 751 B | ✓ |
Overall change | 53 kB | 53 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
polyfills-4b..e242.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | azukaru/next.js image-component-add-akamai | 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-89ad9e7..25bb.js gzip | 1.34 kB | 1.34 kB | ✓ |
routerDirect..924c.js gzip | 284 B | 284 B | ✓ |
withRouter-7..c13d.js gzip | 284 B | 284 B | ✓ |
Overall change | 7.74 kB | 7.74 kB | ✓ |
Client Pages Modern
vercel/next.js canary | azukaru/next.js image-component-add-akamai | 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-aeb707b..dule.js gzip | 1.29 kB | 1.29 kB | ✓ |
routerDirect..dule.js gzip | 284 B | 284 B | ✓ |
withRouter-f..dule.js gzip | 282 B | 282 B | ✓ |
Overall change | 5.39 kB | 5.39 kB | ✓ |
Client Build Manifests
vercel/next.js canary | azukaru/next.js image-component-add-akamai | Change | |
---|---|---|---|
_buildManifest.js gzip | 322 B | 322 B | ✓ |
_buildManife..dule.js gzip | 329 B | 329 B | ✓ |
Overall change | 651 B | 651 B | ✓ |
Serverless bundles
vercel/next.js canary | azukaru/next.js image-component-add-akamai | 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 | ✓ |
@@ -308,6 +309,10 @@ function imgixLoader({ root, src, width, quality }: LoaderProps): string { | |||
return `${root}${normalizeSrc(src)}${paramsString}` | |||
} | |||
|
|||
function akamaiLoader({ root, src, width }: LoaderProps): string { | |||
return `${root}${normalizeSrc(src)}${width ? '?imwidth=' + width : ''}` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does Akamai support an auto-format feature like imgix or cloudinary?
Also, what about the q
quality param?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope, as far as I can tell Akamai only supports width as a URL parameter (https://developer.akamai.com/api/web_performance/image_manager/v2.html). Quality is something the app developers will have to set using their own Akamai image policies.
I mentioned that in the description for this PR, but maybe I should add it as a comment in the code as well
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see. I misunderstood "your side". Sounds like that means the "Akamai Dashboard" or something where its the same quality across all images?
This PR is a simple addition that adds support for using "akamai" as a loader option with the image component. That CDN only supports width as a URL parameter, so the "quality" attribute is simply ignored if you use Akamai (and you can configure the CDN on your side as you normally would to control compression).