From 1f3b3d9f952047b5bd3e8a9b67598b50a8ea1a64 Mon Sep 17 00:00:00 2001 From: Simon Ihmig Date: Wed, 20 Nov 2024 21:27:31 +0100 Subject: [PATCH] Drop jpg, png as default image cdn formats --- .changeset/giant-lobsters-type.md | 5 +++++ .../responsive-image-cloudinary-provider-test.gts | 4 ++-- .../helpers/responsive-image-imgix-provider-test.gts | 4 ++-- .../helpers/responsive-image-netlify-provider-test.gts | 4 ++-- packages/cdn/src/cloudinary.ts | 2 +- packages/cdn/src/imgix.ts | 2 +- packages/cdn/src/netlify.ts | 2 +- packages/cdn/tests/cloudinary.test.ts | 10 ++++++---- packages/cdn/tests/imgix.test.ts | 8 ++++---- packages/cdn/tests/netlify.test.ts | 10 ++++++---- 10 files changed, 30 insertions(+), 21 deletions(-) create mode 100644 .changeset/giant-lobsters-type.md diff --git a/.changeset/giant-lobsters-type.md b/.changeset/giant-lobsters-type.md new file mode 100644 index 000000000..2035cd5d4 --- /dev/null +++ b/.changeset/giant-lobsters-type.md @@ -0,0 +1,5 @@ +--- +'@responsive-image/cdn': major +--- + +Drop jpg, png as default image cdn formats diff --git a/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts b/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts index 8b036cbd0..b2a154be0 100644 --- a/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts +++ b/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts @@ -15,7 +15,7 @@ module( data = argument; }; - test("it supports all image types", async function (assert) { + test("it supports default image types", async function (assert) { await render( , ); - assert.deepEqual(data?.imageTypes, ["png", "jpeg", "webp", "avif"]); + assert.deepEqual(data?.imageTypes, ["webp", "avif"]); }); test("it returns correct upload image URLs", async function (assert) { diff --git a/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts b/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts index b556da438..4ae00073b 100644 --- a/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts +++ b/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts @@ -14,14 +14,14 @@ module( data = argument; }; - test("it supports jpg, png and webp image types", async function (assert) { + test("it supports default image types", async function (assert) { await render( , ); - assert.deepEqual(data?.imageTypes, ["png", "jpeg", "webp"]); + assert.deepEqual(data?.imageTypes, ["webp", "avif"]); }); test("it returns correct image URLs", async function (assert) { diff --git a/apps/ember-test-app/tests/integration/helpers/responsive-image-netlify-provider-test.gts b/apps/ember-test-app/tests/integration/helpers/responsive-image-netlify-provider-test.gts index 955e95ca7..1541046b1 100644 --- a/apps/ember-test-app/tests/integration/helpers/responsive-image-netlify-provider-test.gts +++ b/apps/ember-test-app/tests/integration/helpers/responsive-image-netlify-provider-test.gts @@ -21,14 +21,14 @@ module( setConfig("cdn", { netlify: { domain: "dummy.netlify.app" } }); }); - test("it supports all image types", async function (assert) { + test("it supports default image types", async function (assert) { await render( , ); - assert.deepEqual(data?.imageTypes, ["png", "jpeg", "webp", "avif"]); + assert.deepEqual(data?.imageTypes, ["webp", "avif"]); }); test("it returns correct relative image URLs", async function (assert) { diff --git a/packages/cdn/src/cloudinary.ts b/packages/cdn/src/cloudinary.ts index 29658ab9b..c52c3918f 100644 --- a/packages/cdn/src/cloudinary.ts +++ b/packages/cdn/src/cloudinary.ts @@ -47,7 +47,7 @@ export function cloudinaryProvider( } return { - imageTypes: options.formats ?? ['png', 'jpeg', 'webp', 'avif'], + imageTypes: options.formats ?? ['webp', 'avif'], imageUrlFor(width: number, type: ImageType = 'jpeg'): string { const resizeParams: CloudinaryTransformation = { w: width, diff --git a/packages/cdn/src/imgix.ts b/packages/cdn/src/imgix.ts index 9d0aa6fbf..951538fdc 100644 --- a/packages/cdn/src/imgix.ts +++ b/packages/cdn/src/imgix.ts @@ -28,7 +28,7 @@ export function imgixProvider( assert('domain must be set for imgix provider!', typeof domain === 'string'); return { - imageTypes: options.formats ?? ['png', 'jpeg', 'webp'], + imageTypes: options.formats ?? ['webp', 'avif'], imageUrlFor(width: number, type: ImageType = 'jpeg'): string { const url = new URL(`https://${domain}/${normalizeSrc(image)}`); const params = url.searchParams; diff --git a/packages/cdn/src/netlify.ts b/packages/cdn/src/netlify.ts index a8ac27323..9038b8b4c 100644 --- a/packages/cdn/src/netlify.ts +++ b/packages/cdn/src/netlify.ts @@ -27,7 +27,7 @@ export function netlifyProvider( const url = image; return { - imageTypes: options.formats ?? ['png', 'jpeg', 'webp', 'avif'], + imageTypes: options.formats ?? ['webp', 'avif'], imageUrlFor(width: number, type: ImageType = 'jpeg'): string { const params = new URLSearchParams({ url, diff --git a/packages/cdn/tests/cloudinary.test.ts b/packages/cdn/tests/cloudinary.test.ts index a1878e442..325b880d4 100644 --- a/packages/cdn/tests/cloudinary.test.ts +++ b/packages/cdn/tests/cloudinary.test.ts @@ -7,16 +7,18 @@ describe('cloudinary', function () { setConfig('cdn', { cloudinary: { cloudName: 'dummy' } }); }); - test('it supports jpg, png, webp, avif image types by default', function () { + test('it supports webp, avif image types by default', function () { const result = cloudinaryProvider('foo/bar.jpg'); - expect(result?.imageTypes).toEqual(['png', 'jpeg', 'webp', 'avif']); + expect(result?.imageTypes).toEqual(['webp', 'avif']); }); test('it supports custom image types', function () { - const result = cloudinaryProvider('foo/bar.jpg', { formats: ['webp'] }); + const result = cloudinaryProvider('foo/bar.jpg', { + formats: ['jpeg', 'webp'], + }); - expect(result?.imageTypes).toEqual(['webp']); + expect(result?.imageTypes).toEqual(['jpeg', 'webp']); }); test('it returns correct fetch image URLs', function () { diff --git a/packages/cdn/tests/imgix.test.ts b/packages/cdn/tests/imgix.test.ts index a5bfbb624..64ed12073 100644 --- a/packages/cdn/tests/imgix.test.ts +++ b/packages/cdn/tests/imgix.test.ts @@ -7,16 +7,16 @@ describe('imgix', function () { setConfig('cdn', { imgix: { domain: 'dummy.imgix.net' } }); }); - test('it supports jpg, png and webp image types by default', function () { + test('it supports webp, avif image types by default', function () { const result = imgixProvider('foo/bar.jpg'); - expect(result?.imageTypes).toEqual(['png', 'jpeg', 'webp']); + expect(result?.imageTypes).toEqual(['webp', 'avif']); }); test('it supports custom image types', function () { - const result = imgixProvider('foo/bar.jpg', { formats: ['webp'] }); + const result = imgixProvider('foo/bar.jpg', { formats: ['jpeg', 'webp'] }); - expect(result?.imageTypes).toEqual(['webp']); + expect(result?.imageTypes).toEqual(['jpeg', 'webp']); }); test('it returns correct image URLs', function () { diff --git a/packages/cdn/tests/netlify.test.ts b/packages/cdn/tests/netlify.test.ts index f26a1a184..d8ec566d3 100644 --- a/packages/cdn/tests/netlify.test.ts +++ b/packages/cdn/tests/netlify.test.ts @@ -7,16 +7,18 @@ describe('netlify', function () { setConfig('cdn', { netlify: { domain: 'dummy.netlify.app' } }); }); - test('it supports jpg, png, webp, avif image types by default', function () { + test('it supports webp, avif image types by default', function () { const result = netlifyProvider('/foo/bar.jpg'); - expect(result?.imageTypes).toEqual(['png', 'jpeg', 'webp', 'avif']); + expect(result?.imageTypes).toEqual(['webp', 'avif']); }); test('it supports custom image types', function () { - const result = netlifyProvider('/foo/bar.jpg', { formats: ['webp'] }); + const result = netlifyProvider('/foo/bar.jpg', { + formats: ['jpeg', 'webp'], + }); - expect(result?.imageTypes).toEqual(['webp']); + expect(result?.imageTypes).toEqual(['jpeg', 'webp']); }); test('it returns correct relative image URLs', function () {