sveltejs/kit · warning

Could not determine width of image ${pathname}

Error message

Could not determine width of image ${pathname}

What it means

The enhanced-img imagetools plugin needs an image width to generate a responsive <picture> with multiple srcset widths. It reads the width from the `imgWidth` query parameter or the image's intrinsic metadata; if neither yields a usable width it warns and returns empty search params, skipping width-based transformations for that image.

Source

Thrown at packages/enhanced-img/src/index.js:40

	}
	if (meta.hasAlpha) {
		return 'png';
	}
	return 'jpg';
}

function imagetools_plugin() {
	/** @type {Partial<import('vite-imagetools').VitePluginOptions>} */
	const imagetools_opts = {
		defaultDirectives: async ({ pathname, searchParams: qs }, metadata) => {
			if (!qs.has('enhanced')) return new URLSearchParams();

			const meta = await metadata();
			const img_width = qs.get('imgWidth');
			const width = img_width ? parseInt(img_width) : meta.width;

			if (!width) {
				console.warn(`Could not determine width of image ${pathname}`);
				return new URLSearchParams();
			}

			const { widths, kind } = get_widths(width, qs.get('imgSizes'));
			return new URLSearchParams({
				as: 'picture',
				format: `avif;webp;${fallback_format(meta)}`,
				w: widths.join(';'),
				...(kind === 'x' && !qs.has('w') && { basePixels: widths[0].toString() })
			});
		},
		namedExports: false
	};

	// TODO: should we make formats or sizes configurable besides just letting people override defaultDirectives?
	// TODO: generate img rather than picture if only a single format is provided
	//     by resolving the directives for the URL in the preprocessor
	return imagetools(imagetools_opts);

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Add an explicit `imgWidth` query parameter to the image import (e.g. `?imgWidth=1200&as=picture`).
2. Verify the image file is valid and opens in an image viewer; replace corrupt assets.
3. Check the image format is supported by sharp; convert exotic formats to png/jpeg/webp.
4. For SVGs, provide explicit width/height attributes in the SVG root.

Example fix

// before
import img from '$lib/assets/photo.jpg?as=picture';
// after
import img from '$lib/assets/photo.jpg?imgWidth=1600&as=picture';

import sharp from 'sharp';
const meta = await sharp(path).metadata();
if (!meta.width) console.warn(`${path}: no intrinsic width; pass imgWidth explicitly`);

When it happens

Trigger: Importing an image via enhanced-img (imagetools_plugin, wired by imagetools_instance) with directives that require a width (e.g. `?w=` producing a picture/srcset) when the query has no `imgWidth` and sharp's metadata() returns no width for the file.

Common situations: Corrupt or zero-byte image files; unsupported formats whose metadata sharp can't parse; SVGs without intrinsic dimensions; passing directives on non-raster assets.

Related errors

• Could not determine intrinsic dimensions for ${resolved_id}
• Cloudflare Pages Functions' includes/excludes exceeds _route
• No netlify.toml found. Using default publish directory. Cons
• Detected ${platform.name}. Please remove adapter-static opti
• Warning: The following routes have an ISR config which is i

AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/56a02d71fd108bdc. Report an issue: GitHub.