service.getSrcSet() — astro Function Reference

Source Code

packages/integrations/vercel/src/image/build-service.ts lines 67–173

	getSrcSet(options, imageConfig) {
		const { inputtedWidth, densities, widths, ...props } = options;

		// If `validateOptions` returned a different width than the one of the image, use it for attributes
		if (inputtedWidth) {
			props.width = inputtedWidth;
		}

		let targetWidth = props.width;
		let targetHeight = props.height;
		if (isESMImportedImage(props.src)) {
			const aspectRatio = props.src.width / props.src.height;
			if (targetHeight && !targetWidth) {
				// If we have a height but no width, use height to calculate the width
				targetWidth = Math.round(targetHeight * aspectRatio);
			} else if (targetWidth && !targetHeight) {
				// If we have a width but no height, use width to calculate the height
				targetHeight = Math.round(targetWidth / aspectRatio);
			} else if (!targetWidth && !targetHeight) {
				// If we have neither width or height, use the original image's dimensions
				targetWidth = props.src.width;
				targetHeight = props.src.height;
			}
		}

		// 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;

		// Get the configured sizes from the Vercel image config
		const vercelConfig = imageConfig.service.config as VercelImageConfig;
		const configuredWidths = (vercelConfig.sizes ?? []).sort((a: number, b: number) => a - b);

		// 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 calculatedWidths = densityValues
				.sort((a, b) => a - b)
				.map((density) => Math.round(targetWidth! * density));

			// Vercel only supports a fixed set of widths, so map each calculated width to the nearest configured width
			const sortedDensityValues = densityValues.sort((a, b) => a - b);
			allWidths = calculatedWidths.map((width, index) => {
				// Check if this width is already in the configured widths
				if (configuredWidths.includes(width)) {
					return {
						width,
						descriptor: `${sortedDensityValues[index]}x`,
					};
				}
				// Otherwise, find the nearest configured width
				const nearestWidth = configuredWidths.reduce((prev, curr) => {
					return Math.abs(curr - width) < Math.abs(prev - width) ? curr : prev;
				});
				return {
					width: nearestWidth,
					descriptor: `${sortedDensityValues[index]}x`,
				};
			});

			// Dedupe widths but keep all density descriptors by grouping
			const widthToDescriptors = new Map<number, string[]>();
			for (const { width, descriptor } of allWidths) {