diff --git a/src/vite-plugin.js b/src/vite-plugin.js
index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..bf32bbd37d85e6d0d003c15e312ba74f7f3daad6 100644
--- a/src/vite-plugin.js
+++ b/src/vite-plugin.js
@@ -8,6 +8,8 @@

 // TODO: expose this in vite-imagetools rather than duplicating it
 const OPTIMIZABLE = /^[^?]+\.(avif|heif|gif|jpeg|jpg|png|tiff|webp)(\?.*)?$/;
+// Animated formats that should bypass imagetools processing to preserve animation
+const ANIMATED = /^[^?]+\.(gif|webp)(\?.*)?$/;

 /**
  * Creates the Svelte image plugin.
@@ -81,7 +83,9 @@
 					const original_url = src_attribute.raw.trim();
 					let url = original_url;

-					if (OPTIMIZABLE.test(url)) {
+					const is_animated = ANIMATED.test(original_url);
+
+					if (OPTIMIZABLE.test(url) && !is_animated) {
 						const sizes = get_attr_value(node, 'sizes');
 						const width = get_attr_value(node, 'width');
 						url += url.includes('?') ? '&' : '?';
@@ -110,11 +114,11 @@
 						);
 					}

-					if (OPTIMIZABLE.test(url)) {
+					if (OPTIMIZABLE.test(url) && !is_animated) {
 						const image = await process_id(resolved_id, plugin_context, imagetools_plugin);
 						s.update(node.start, node.end, img_to_picture(content, node, image));
 					} else {
-						const metadata = await sharp(resolved_id).metadata();
+						const metadata = await sharp(resolved_id, { animated: true }).metadata();
 						// this must come after the await so that we don't hand off processing between getting
 						// the imports.size and incrementing the imports.size
 						const name = imports.get(original_url) || '__IMPORTED_ASSET_' + imports.size + '__';