diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts index e24dc78f9..bda41beb7 100644 --- a/packages/astro/src/assets/services/service.ts +++ b/packages/astro/src/assets/services/service.ts @@ -243,34 +243,54 @@ export const baseService: Omit = { densityWidths.forEach((width, index) => { const maxTargetWidth = Math.min(width, maxWidth); - srcSet.push({ + + const srcSetValue = { transform: { ...options, - width: maxTargetWidth, - height: Math.round(maxTargetWidth / aspectRatio), - format: targetFormat, }, descriptor: `${densityValues[index]}x`, attributes: { type: `image/${targetFormat}`, }, - }); + }; + + // Only set width and height if they are different from the original image + if (maxTargetWidth !== imageWidth) { + srcSetValue.transform.width = maxTargetWidth; + srcSetValue.transform.height = Math.round(maxTargetWidth / aspectRatio); + } + + if (targetFormat !== options.format) { + srcSetValue.transform.format = targetFormat; + } + + srcSet.push(); }); } else if (widths) { widths.forEach((width) => { const maxTargetWidth = Math.min(width, maxWidth); - srcSet.push({ + + const srcSetValue = { transform: { ...options, - width, - height: Math.round(maxTargetWidth / aspectRatio), - format: targetFormat, }, descriptor: `${width}w`, attributes: { type: `image/${targetFormat}`, }, - }); + }; + + // Only set width and height if they are different from the original image + if (maxTargetWidth !== imageWidth) { + srcSetValue.transform.width = maxTargetWidth; + srcSetValue.transform.height = Math.round(maxTargetWidth / aspectRatio); + } + + if (targetFormat !== options.format) { + srcSetValue.transform.format = targetFormat; + } + + srcSet.push(srcSetValue); }); } diff --git a/packages/astro/src/assets/utils/transformToPath.ts b/packages/astro/src/assets/utils/transformToPath.ts index c998140fa..d9e11f322 100644 --- a/packages/astro/src/assets/utils/transformToPath.ts +++ b/packages/astro/src/assets/utils/transformToPath.ts @@ -17,7 +17,7 @@ export function propsToFilename(transform: ImageTransform, hash: string) { export function hashTransform(transform: ImageTransform, imageService: string) { // Extract the fields we want to hash - const { alt, class: className, style, ...rest } = transform; + const { alt, class: className, style, widths, densities, ...rest } = transform; const hashFields = { ...rest, imageService }; return shorthash(JSON.stringify(hashFields)); }