fix(toolbar): skip image audit for framework components

.changeset/skip-framework-image-audit.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Skips "Use the Image component" audit warning for images inside framework components (React, Vue, Svelte, etc.)

packages/astro/e2e/dev-toolbar-audits.test.js

@@ -102,6 +102,23 @@ test.describe('Dev Toolbar - Audits', () => {
 		expect(auditHighlights).toHaveCount(1);
 	});
 
+	test('does not warn about image inside framework component', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/audits-perf-framework'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
+		await appButton.click();
+
+		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
+		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+
+		// Should only warn about the raw <img>, not the one inside the Preact component
+		await expect(auditHighlights).toHaveCount(1);
+
+		const auditCode = await auditHighlights.first().getAttribute('data-audit-code');
+		expect(auditCode).toBe('perf-use-image-component');
+	});
+
 	test('can handle mutations', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/audits-mutations'));
 

packages/astro/e2e/fixtures/dev-toolbar/src/components/ImageComponent.tsx

@@ -0,0 +1,4 @@
+export function ImageComponent() {
+	// This image is >20KB and would normally trigger the "Use Image component" audit
+	return <img src="/the-future.jpg" alt="The future" />;
+}

packages/astro/e2e/fixtures/dev-toolbar/src/pages/audits-perf-framework.astro

@@ -0,0 +1,9 @@
+---
+import { ImageComponent } from '../components/ImageComponent';
+---
+
+<!-- Image inside a framework component should NOT trigger the audit -->
+<ImageComponent client:load />
+
+<!-- Raw img tag should still trigger the audit -->
+<img src="/the-future.jpg" alt="The future" />

packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts

@@ -10,6 +10,10 @@ export const perf: AuditRuleWithSelector[] = [
 		message: 'This image could be replaced with the Image component to improve performance.',
 		selector: 'img:not([data-image-component])',
 		async match(element) {
+			// Skip images inside framework components (React, Vue, Svelte, etc.)
+			// These are wrapped in astro-island and can't directly use Astro's Image component
+			if (element.closest('astro-island')) return false;
+
 			const src = element.getAttribute('src');
 			if (!src) return false;