diff --git a/src/lib/converters/magick.svelte.ts b/src/lib/converters/magick.svelte.ts
index 283c96c..9cfedd7 100644
--- a/src/lib/converters/magick.svelte.ts
+++ b/src/lib/converters/magick.svelte.ts
@@ -5,14 +5,23 @@ import { browser } from "$app/environment";
 import type { WorkerMessage, OmitBetterStrict } from "$lib/types";
 import { MagickFormat } from "@imagemagick/magick-wasm";
 
+const sortFirst = [".png", ".jpeg", ".jpg", ".webp", ".gif"];
+
 export class MagickConverter extends Converter {
 	private worker: Worker = browser ? new MagickWorker() : null!;
 	private id = 0;
 	public name = "imagemagick";
 	public ready = $state(false);
-	public supportedFormats = Object.keys(MagickFormat).map(
-		(key) => `.${key.toLowerCase()}`,
-	);
+	public supportedFormats = Object.keys(MagickFormat)
+		.map((key) => `.${key.toLowerCase()}`)
+		.sort((a, b) => {
+			const aIndex = sortFirst.indexOf(a);
+			const bIndex = sortFirst.indexOf(b);
+			if (aIndex === -1 && bIndex === -1) return a.localeCompare(b);
+			if (aIndex === -1) return 1;
+			if (bIndex === -1) return -1;
+			return aIndex - bIndex;
+		});
 
 	constructor() {
 		super();
diff --git a/src/lib/converters/vips.svelte.ts b/src/lib/converters/vips.svelte.ts
index b56bb9f..8abe9f6 100644
--- a/src/lib/converters/vips.svelte.ts
+++ b/src/lib/converters/vips.svelte.ts
@@ -10,22 +10,22 @@ export class VipsConverter extends Converter {
 	public name = "libvips";
 	public ready = $state(false);
 	public supportedFormats = [
+		".png",
+		".jpeg",
+		".jpg",
+		".webp",
 		".gif",
 		".hdr",
 		".jpe",
-		".jpeg",
-		".jpg",
 		".mat",
 		".pbm",
 		".pfm",
 		".pgm",
-		".png",
 		".pnm",
 		".ppm",
 		".raw",
 		".tif",
 		".tiff",
-		".webp",
 	];
 
 	constructor() {