diff --git a/frigate/api/media.py b/frigate/api/media.py
index 8222fddaf..790063ff6 100644
--- a/frigate/api/media.py
+++ b/frigate/api/media.py
@@ -146,8 +146,10 @@ def latest_frame(camera_name):
 
         frame = cv2.resize(frame, dsize=(width, height), interpolation=cv2.INTER_AREA)
 
+        extension = os.path.splitext(request.path)[1]
+
         ret, img = cv2.imencode(
-            ".webp", frame, [int(cv2.IMWRITE_WEBP_QUALITY), resize_quality]
+            f".{extension}", frame, [int(cv2.IMWRITE_WEBP_QUALITY), resize_quality]
         )
         response = make_response(img.tobytes())
         response.headers["Content-Type"] = "image/webp"
diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index b515cda2e..7994c19e1 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -47,7 +47,7 @@ export default function CameraImage({
       return;
     }
 
-    imgRef.current.src = `${apiHost}api/${name}/latest.jpg?h=${requestHeight}${
+    imgRef.current.src = `${apiHost}api/${name}/latest.webp?h=${requestHeight}${
       searchParams ? `&${searchParams}` : ""
     }`;
   }, [apiHost, name, imgRef, searchParams, requestHeight, config]);
diff --git a/web/src/components/camera/ResizingCameraImage.tsx b/web/src/components/camera/ResizingCameraImage.tsx
index e82d58e5d..f082c81c4 100644
--- a/web/src/components/camera/ResizingCameraImage.tsx
+++ b/web/src/components/camera/ResizingCameraImage.tsx
@@ -89,7 +89,7 @@ export default function CameraImage({
     if (!config || scaledHeight === 0 || !canvasRef.current) {
       return;
     }
-    img.src = `${apiHost}api/${name}/latest.jpg?h=${scaledHeight}${
+    img.src = `${apiHost}api/${name}/latest.webp?h=${scaledHeight}${
       searchParams ? `&${searchParams}` : ""
     }`;
   }, [apiHost, canvasRef, name, img, searchParams, scaledHeight, config]);
diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx
index bea79ed2c..9ac4bad70 100644
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/web/src/components/settings/PolygonCanvas.tsx
@@ -39,7 +39,7 @@ export function PolygonCanvas({
       const element = new window.Image();
       element.width = width;
       element.height = height;
-      element.src = `${apiHost}api/${camera}/latest.jpg`;
+      element.src = `${apiHost}api/${camera}/latest.webp`;
       return element;
     }
   }, [camera, width, height, apiHost]);