fix: passthroughImageService generate webp (#14776)

ktym4a · web-flow · commit 3537876fde3b · 2025-11-17T19:50:13.000+01:00
* test: Add passthrough-image-service fixture with config, assets, and page

* test: Add tests to verify passthrough image service preserves formats and tags

* fix: Add validateOptions to noopService to handle transform images

* chore: Add changeset

* chore: Fix changeset

* fix: Simplify noop service by removing ESM image check and format field
diff --git a/.changeset/ripe-friends-play.md b/.changeset/ripe-friends-play.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes the behavior of `passthroughImageService` so it does not generate webp.
diff --git a/packages/astro/src/assets/services/noop.ts b/packages/astro/src/assets/services/noop.ts
@@ -4,6 +4,12 @@ import { baseService, type LocalImageService } from './service.js';
 const noopService: LocalImageService = {
 	...baseService,
 	propertiesToHash: ['src'],
+	async validateOptions(options, imageConfig) {
+		const newOptions = await (baseService.validateOptions?.(options, imageConfig) ?? options);
+		delete newOptions.format;
+
+		return newOptions;
+	},
 	async transform(inputBuffer, transformOptions) {
 		return {
 			data: inputBuffer,
diff --git a/packages/astro/test/fixtures/passthrough-image-service/astro.config.mjs b/packages/astro/test/fixtures/passthrough-image-service/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig, passthroughImageService } from 'astro/config';
+
+export default defineConfig({
+	image: {
+		service: passthroughImageService(),
+	},
+});
diff --git a/packages/astro/test/fixtures/passthrough-image-service/package.json b/packages/astro/test/fixtures/passthrough-image-service/package.json
@@ -0,0 +1,8 @@
+{
+	"name": "@test/passthrough-image-service",
+	"version": "0.0.0",
+	"private": true,
+	"dependencies": {
+		"astro": "workspace:*"
+	}
+}
diff --git a/packages/astro/test/fixtures/passthrough-image-service/src/assets/penguin1.jpg b/packages/astro/test/fixtures/passthrough-image-service/src/assets/penguin1.jpg
diff --git a/packages/astro/test/fixtures/passthrough-image-service/src/pages/index.astro b/packages/astro/test/fixtures/passthrough-image-service/src/pages/index.astro
@@ -0,0 +1,15 @@
+---
+import { Image, Picture } from 'astro:assets';
+import myImage from '../assets/penguin1.jpg';
+---
+<html>
+<head></head>
+<body>
+	<div id="image">
+		<Image src={myImage} alt="a penguin" />
+	</div>
+	<div id="picture">
+		<Picture src={myImage} alt="a penguin" />
+	</div>
+</body>
+</html>
diff --git a/packages/astro/test/passthrough-image-service.test.js b/packages/astro/test/passthrough-image-service.test.js
@@ -0,0 +1,67 @@
+import assert from 'node:assert/strict';
+import { before, describe, it } from 'node:test';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('passthroughImageService', () => {
+	/** @type {import('./test-utils.js').Fixture} */
+	let fixture;
+
+	describe('build', () => {
+		let $;
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/passthrough-image-service/',
+			});
+
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+			$ = cheerio.load(html);
+		});
+
+		describe('Assets', () => {
+			it('does not generate webp images', async () => {
+				const webpImages = await fixture.glob('_astro/**/*.webp');
+				assert.equal(webpImages.length, 0);
+			});
+
+			it('preserves original image format', async () => {
+				const jpgImages = await fixture.glob('_astro/**/*.jpg');
+				assert.ok(jpgImages.length > 0);
+			});
+		});
+
+		describe('Image component', () => {
+			it('includes img element', () => {
+				const $img = $('#image img');
+				assert.equal($img.length, 1);
+			});
+
+			it('preserves original format', () => {
+				const $img = $('#image img');
+				const src = $img.attr('src');
+				assert.ok(src.endsWith('.jpg'), `Should preserve jpg format, got: ${src}`);
+			});
+		});
+
+		describe('Picture component', () => {
+			it('includes <picture> element', () => {
+				const $picture = $('#picture picture');
+				assert.equal($picture.length, 1);
+			});
+
+			it('includes <img> inside picture', () => {
+				const $img = $('#picture img');
+				assert.equal($img.length, 1);
+			});
+
+			it('preserves original format', () => {
+				const $img = $('#picture img');
+				const src = $img.attr('src');
+				assert.ok(src.endsWith('.jpg'), `Should preserve jpg format, got: ${src}`);
+			});
+		});
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes the behavior of `passthroughImageService` so it does not generate webp.