From 3f07e554f4347240bf594f801e5de0499413f8ab Mon Sep 17 00:00:00 2001 From: Steven Date: Wed, 21 Oct 2020 15:39:12 -0400 Subject: [PATCH] Fix Image component defaults & remove autoOptimize (#18101) --- packages/next/build/webpack-config.ts | 1 - packages/next/client/image.tsx | 46 ++++++++----------- packages/next/next-server/server/config.ts | 3 +- .../image-component/basic/next.config.js | 1 - .../image-component/basic/test/index.test.js | 22 ++++----- 5 files changed, 32 insertions(+), 41 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 2a496da5a061..272ff411f253 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -994,7 +994,6 @@ export default async function getBaseWebpackConfig( sizes: config.images.sizes, path: config.images.path, loader: config.images.loader, - autoOptimize: config.images.autoOptimize, }), 'process.env.__NEXT_ROUTER_BASEPATH': JSON.stringify(config.basePath), 'process.env.__NEXT_HAS_REWRITES': JSON.stringify(hasRewrites), diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 7e50cf6085be..db30fe3a688a 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -1,18 +1,19 @@ import React, { ReactElement, useEffect, useRef } from 'react' import Head from '../next-server/lib/head' -const loaders: { [key: string]: (props: LoaderProps) => string } = { - imgix: imgixLoader, - cloudinary: cloudinaryLoader, - akamai: akamaiLoader, - default: defaultLoader, -} +const loaders = new Map string>([ + ['imgix', imgixLoader], + ['cloudinary', cloudinaryLoader], + ['akamai', akamaiLoader] + ['default', defaultLoader], +]) + +type LoaderKey = 'imgix' | 'cloudinary' | 'akamai' | 'default' type ImageData = { - sizes?: number[] - loader?: string - path?: string - autoOptimize?: boolean + sizes: number[] + loader: LoaderKey + path: string } type ImageProps = Omit< @@ -30,11 +31,7 @@ type ImageProps = Omit< ) const imageData: ImageData = process.env.__NEXT_IMAGE_OPTS as any -const breakpoints = imageData.sizes || [640, 1024, 1600] -// Auto optimize defaults to on if not specified -if (imageData.autoOptimize === undefined) { - imageData.autoOptimize = true -} +const { sizes: configSizes, loader: configLoader, path: configPath } = imageData let cachedObserver: IntersectionObserver const IntersectionObserver = @@ -89,8 +86,8 @@ type CallLoaderProps = { } function callLoader(loaderProps: CallLoaderProps) { - let loader = loaders[imageData.loader || 'default'] - return loader({ root: imageData.path || '/_next/image', ...loaderProps }) + let load = loaders.get(configLoader) || defaultLoader + return load({ root: configPath, ...loaderProps }) } type SrcSetData = { @@ -187,7 +184,7 @@ export default function Image({ const imgSrcSet = !unoptimized ? generateSrcSet({ src, - widths: breakpoints, + widths: configSizes, quality, }) : undefined @@ -266,7 +263,7 @@ export default function Image({ {shouldPreload ? generatePreload({ src, - widths: breakpoints, + widths: configSizes, unoptimized, sizes, }) @@ -292,7 +289,7 @@ function normalizeSrc(src: string) { } function imgixLoader({ root, src, width, quality }: LoaderProps): string { - const params = [] + const params = ['auto=format'] let paramsString = '' if (width) { params.push('w=' + width) @@ -300,9 +297,7 @@ function imgixLoader({ root, src, width, quality }: LoaderProps): string { if (quality) { params.push('q=' + quality) } - if (imageData.autoOptimize) { - params.push('auto=compress') - } + if (params.length) { paramsString = '?' + params.join('&') } @@ -314,11 +309,8 @@ function akamaiLoader({ root, src, width }: LoaderProps): string { } function cloudinaryLoader({ root, src, width, quality }: LoaderProps): string { - const params = [] + const params = ['f_auto'] let paramsString = '' - if (!quality && imageData.autoOptimize) { - quality = 'auto' - } if (width) { params.push('w_' + width) } diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts index c65065db610f..2890b4a6b818 100644 --- a/packages/next/next-server/server/config.ts +++ b/packages/next/next-server/server/config.ts @@ -26,7 +26,8 @@ const defaultConfig: { [key: string]: any } = { images: { sizes: [320, 420, 768, 1024, 1200], domains: [], - hosts: { default: { path: '/_next/image' } }, + path: '/_next/image', + loader: 'default', }, devIndicators: { buildActivity: true, diff --git a/test/integration/image-component/basic/next.config.js b/test/integration/image-component/basic/next.config.js index 45c304157512..8f260dea043f 100644 --- a/test/integration/image-component/basic/next.config.js +++ b/test/integration/image-component/basic/next.config.js @@ -1,7 +1,6 @@ module.exports = { images: { sizes: [480, 1024, 1600], - autoOptimize: false, path: 'https://example.com/myaccount/', loader: 'imgix', }, diff --git a/test/integration/image-component/basic/test/index.test.js b/test/integration/image-component/basic/test/index.test.js index a358202ee223..0e1ce43e59c3 100644 --- a/test/integration/image-component/basic/test/index.test.js +++ b/test/integration/image-component/basic/test/index.test.js @@ -33,26 +33,26 @@ function runTests() { }) it('should modify src with the loader', async () => { expect(await browser.elementById('basic-image').getAttribute('src')).toBe( - 'https://example.com/myaccount/foo.jpg?q=60' + 'https://example.com/myaccount/foo.jpg?auto=format&q=60' ) }) it('should correctly generate src even if preceding slash is included in prop', async () => { expect( await browser.elementById('preceding-slash-image').getAttribute('src') - ).toBe('https://example.com/myaccount/fooslash.jpg') + ).toBe('https://example.com/myaccount/fooslash.jpg?auto=format') }) it('should add a srcset based on the loader', async () => { expect( await browser.elementById('basic-image').getAttribute('srcset') ).toBe( - 'https://example.com/myaccount/foo.jpg?w=480&q=60 480w, https://example.com/myaccount/foo.jpg?w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?w=1600&q=60 1600w' + 'https://example.com/myaccount/foo.jpg?auto=format&w=480&q=60 480w, https://example.com/myaccount/foo.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?auto=format&w=1600&q=60 1600w' ) }) it('should add a srcset even with preceding slash in prop', async () => { expect( await browser.elementById('preceding-slash-image').getAttribute('srcset') ).toBe( - 'https://example.com/myaccount/fooslash.jpg?w=480 480w, https://example.com/myaccount/fooslash.jpg?w=1024 1024w, https://example.com/myaccount/fooslash.jpg?w=1600 1600w' + 'https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1600 1600w' ) }) it('should support the unoptimized attribute', async () => { @@ -70,10 +70,10 @@ function runTests() { function lazyLoadingTests() { it('should have loaded the first image immediately', async () => { expect(await browser.elementById('lazy-top').getAttribute('src')).toBe( - 'https://example.com/myaccount/foo1.jpg' + 'https://example.com/myaccount/foo1.jpg?auto=format' ) expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe( - 'https://example.com/myaccount/foo1.jpg?w=480 480w, https://example.com/myaccount/foo1.jpg?w=1024 1024w, https://example.com/myaccount/foo1.jpg?w=1600 1600w' + 'https://example.com/myaccount/foo1.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo1.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/foo1.jpg?auto=format&w=1600 1600w' ) }) it('should not have loaded the second image immediately', async () => { @@ -101,11 +101,11 @@ function lazyLoadingTests() { await check(() => { return browser.elementById('lazy-mid').getAttribute('src') - }, 'https://example.com/myaccount/foo2.jpg') + }, 'https://example.com/myaccount/foo2.jpg?auto=format') await check(() => { return browser.elementById('lazy-mid').getAttribute('srcset') - }, 'https://example.com/myaccount/foo2.jpg?w=480 480w, https://example.com/myaccount/foo2.jpg?w=1024 1024w, https://example.com/myaccount/foo2.jpg?w=1600 1600w') + }, 'https://example.com/myaccount/foo2.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo2.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/foo2.jpg?auto=format&w=1600 1600w') }) it('should not have loaded the third image after scrolling down', async () => { expect( @@ -166,14 +166,14 @@ describe('Image Component Tests', () => { it('should add a preload tag for a priority image', async () => { expect( await hasPreloadLinkMatchingUrl( - 'https://example.com/myaccount/withpriority.png' + 'https://example.com/myaccount/withpriority.png?auto=format' ) ).toBe(true) }) it('should add a preload tag for a priority image with preceding slash', async () => { expect( await hasPreloadLinkMatchingUrl( - 'https://example.com/myaccount/fooslash.jpg' + 'https://example.com/myaccount/fooslash.jpg?auto=format' ) ).toBe(true) }) @@ -197,7 +197,7 @@ describe('Image Component Tests', () => { it('should NOT add a preload tag for a priority image', async () => { expect( await hasPreloadLinkMatchingUrl( - 'https://example.com/myaccount/withpriorityclient.png' + 'https://example.com/myaccount/withpriorityclient.png?auto=format' ) ).toBe(false) })