Home / Function/ emitOptimizedImages() — astro Function Reference

emitOptimizedImages() — astro Function Reference

Architecture documentation for the emitOptimizedImages() function in content-entry-type.ts from the astro codebase.

Entity Profile

Dependency Diagram

graph TD
  c2c7a61c_9a8b_d227_0cd0_3736afcea46d["emitOptimizedImages()"]
  b46411b3_6535_0116_92ac_cd60b744df11["content-entry-type.ts"]
  c2c7a61c_9a8b_d227_0cd0_3736afcea46d -->|defined in| b46411b3_6535_0116_92ac_cd60b744df11
  8da81c7c_4056_9a1c_b1a1_0ac3cbab6581["getContentEntryType()"]
  8da81c7c_4056_9a1c_b1a1_0ac3cbab6581 -->|calls| c2c7a61c_9a8b_d227_0cd0_3736afcea46d
  7f1744fb_a6a1_15cf_8327_df1c73786267["shouldOptimizeImage()"]
  c2c7a61c_9a8b_d227_0cd0_3736afcea46d -->|calls| 7f1744fb_a6a1_15cf_8327_df1c73786267
  style c2c7a61c_9a8b_d227_0cd0_3736afcea46d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/markdoc/src/content-entry-type.ts lines 293–351

async function emitOptimizedImages(
	nodeChildren: Node[],
	ctx: {
		hasDefaultImage: boolean;
		pluginContext: Rollup.PluginContext;
		filePath: string;
		astroConfig: AstroConfig;
	},
) {
	for (const node of nodeChildren) {
		let isComponent =
			(node.type === 'tag' && node.tag === 'image') ||
			(node.type === 'image' && ctx.hasDefaultImage);
		// Support either a ![]() or {% image %} syntax, and handle the `src` attribute accordingly.
		if ((node.type === 'image' || isComponent) && typeof node.attributes.src === 'string') {
			let attributeName = isComponent ? 'src' : '__optimizedSrc';

			// If the image isn't an URL or a link to public, try to resolve it.
			if (shouldOptimizeImage(node.attributes.src)) {
				// Attempt to resolve source with Vite.
				// This handles relative paths and configured aliases
				const resolved = await ctx.pluginContext.resolve(node.attributes.src, ctx.filePath);

				if (resolved?.id && fs.existsSync(new URL(prependForwardSlash(resolved.id), 'file://'))) {
					// Only emit files during build, not in dev mode
					const fileEmitter = ctx.pluginContext.meta.watchMode
						? undefined
						: (opts: Parameters<typeof ctx.pluginContext.emitFile>[0]) =>
								emitClientAsset(ctx.pluginContext, opts);
					const src = await emitImageMetadata(resolved.id, fileEmitter);

					const fsPath = resolved.id;

					if (src) {
						// We cannot track images in Markdoc, Markdoc rendering always strips out the proxy. As such, we'll always
						// assume that the image is referenced elsewhere, to be on safer side.
						if (ctx.astroConfig.output === 'static') {
							if (globalThis.astroAsset.referencedImages)
								globalThis.astroAsset.referencedImages.add(fsPath);
						}

						node.attributes[attributeName] = { ...src, fsPath };
					}
				} else {
					throw new MarkdocError({
						message: `Could not resolve image ${JSON.stringify(
							node.attributes.src,
						)} from ${JSON.stringify(ctx.filePath)}. Does the file exist?`,
					});
				}
			} else if (isComponent) {
				// If the user is using the {% image %} tag, always pass the `src` attribute as `__optimizedSrc`, even if it's an external URL or absolute path.
				// That way, the component can decide whether to optimize it or not.
				node.attributes[attributeName] = node.attributes.src;
			}
		}
		await emitOptimizedImages(node.children, ctx);
	}
}

Domain

Subdomains

Frequently Asked Questions

What does emitOptimizedImages() do?
emitOptimizedImages() is a function in the astro codebase, defined in packages/integrations/markdoc/src/content-entry-type.ts.
Where is emitOptimizedImages() defined?
emitOptimizedImages() is defined in packages/integrations/markdoc/src/content-entry-type.ts at line 293.
What does emitOptimizedImages() call?
emitOptimizedImages() calls 1 function(s): shouldOptimizeImage.
What calls emitOptimizedImages()?
emitOptimizedImages() is called by 1 function(s): getContentEntryType.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free