diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx
index aa6d89ad5f..6ed211e6fb 100644
--- a/components/ImageUploader.tsx
+++ b/components/ImageUploader.tsx
@@ -125,9 +125,9 @@ export default function ImageUploader({
           </div>
         </div>
         <div className="mb-4">
-          <div className="flex flex-col items-center justify-center p-8 mt-6 cropper bg-gray-50">
+          <div className="flex flex-col items-center justify-center p-8 mt-6 cropper">
             {!result && (
-              <div className="flex items-center justify-start w-20 h-20 bg-gray-500 rounded-full max-h-20">
+              <div className="flex items-center justify-start w-20 h-20 bg-gray-50 rounded-full max-h-20">
                 {!imageSrc && (
                   <p className="w-full text-sm text-center text-white sm:text-xs">
                     {t("no_target", { target })}
diff --git a/lib/cropImage.ts b/lib/cropImage.ts
index 1efedc0e5a..45a39ea487 100644
--- a/lib/cropImage.ts
+++ b/lib/cropImage.ts
@@ -45,7 +45,7 @@ export async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<
   // on very low ratios, the quality of the resize becomes awful. For this reason the resizeRatio is limited to 0.75
   if (resizeRatio <= 0.75) {
     // With a smaller image, thus improved ratio. Keep doing this until the resizeRatio > 0.75.
-    return getCroppedImg(canvas.toDataURL("image/jpeg"), {
+    return getCroppedImg(canvas.toDataURL("image/png"), {
       width: canvas.width,
       height: canvas.height,
       x: 0,
@@ -53,5 +53,5 @@ export async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<
     });
   }
 
-  return canvas.toDataURL("image/jpeg");
+  return canvas.toDataURL("image/png");
 }