baseService.getSrcSet() — astro Function Reference

Source Code

packages/astro/src/assets/services/service.ts lines 277–356

	getSrcSet(options): Array<UnresolvedSrcSetValue> {
		const { targetWidth, targetHeight } = getTargetDimensions(options);
		const aspectRatio = targetWidth / targetHeight;
		const { widths, densities } = options;
		const targetFormat = options.format ?? DEFAULT_OUTPUT_FORMAT;

		let transformedWidths = (widths ?? []).sort(sortNumeric);

		// For remote images, we don't know the original image's dimensions, so we cannot know the maximum width
		// It is ultimately the user's responsibility to make sure they don't request images larger than the original
		let imageWidth = options.width;
		let maxWidth = Infinity;

		// However, if it's an imported image, we can use the original image's width as a maximum width
		if (isESMImportedImage(options.src)) {
			imageWidth = options.src.width;
			maxWidth = imageWidth;

			// We've already sorted the widths, so we'll remove any that are larger than the original image's width
			if (transformedWidths.length > 0 && transformedWidths.at(-1)! > maxWidth) {
				transformedWidths = transformedWidths.filter((width) => width <= maxWidth);
				// If we've had to remove some widths, we'll add the maximum width back in
				transformedWidths.push(maxWidth);
			}
		}

		// Dedupe the widths
		transformedWidths = Array.from(new Set(transformedWidths));

		// Since `widths` and `densities` ultimately control the width and height of the image,
		// we don't want the dimensions the user specified, we'll create those ourselves.
		const {
			width: transformWidth,
			height: transformHeight,
			...transformWithoutDimensions
		} = options;

		// Collect widths to generate from specified densities or widths
		let allWidths: Array<{
			width: number;
			descriptor: `${number}x` | `${number}w`;
		}> = [];
		if (densities) {
			// Densities can either be specified as numbers, or descriptors (ex: '1x'), we'll convert them all to numbers
			const densityValues = densities.map((density) => {
				if (typeof density === 'number') {
					return density;
				} else {
					return parseFloat(density);
				}
			});

			// Calculate the widths for each density, rounding to avoid floats.
			const densityWidths = densityValues
				.sort(sortNumeric)
				.map((density) => Math.round(targetWidth * density));

			allWidths = densityWidths.map((width, index) => ({
				width,
				descriptor: `${densityValues[index]}x`,
			}));
		} else if (transformedWidths.length > 0) {
			allWidths = transformedWidths.map((width) => ({
				width,
				descriptor: `${width}w`,
			}));
		}

		return allWidths.map(({ width, descriptor }) => {
			const height = Math.round(width / aspectRatio);
			const transform = { ...transformWithoutDimensions, width, height };
			return {
				transform,
				descriptor,
				attributes: {
					type: `image/${targetFormat}`,
				},
			};
		});
	},