diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index 11318d38fd..7aef9f11c8 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -131,7 +131,7 @@
 					<div class="cropper-preview">
 						<h3>{{ctx.Locale.Tr "preview"}}</h3>
 						<div>
-							<img id="cropper-result">
+							<img id="cropper-result" class="ui avatar tw-align-middle">
 						</div>
 					</div>
 					<div class="cropper-editor">
diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts
index f01583b700..235d24efbf 100644
--- a/web_src/js/features/comp/Cropper.ts
+++ b/web_src/js/features/comp/Cropper.ts
@@ -15,6 +15,7 @@ export function initCompCropper() {
 
   const done = function (url) {
     source.src = url;
+    result.src = url;
 
     if (cropper) {
       cropper.replace(url);
@@ -22,11 +23,12 @@ export function initCompCropper() {
       cropper = new Cropper(source, {
         aspectRatio: 1,
         viewMode: 1,
+        autoCrop: false,
         crop() {
           const canvas = cropper.getCroppedCanvas();
-          result.src = canvas.toDataURL();
+          result.src = canvas.toDataURL();  //The default format type is image/png.
           canvas.toBlob((blob) => {
-            const file = new File([blob], filename, {type: 'image/jpeg', lastModified: Date.now()});
+            const file = new File([blob], filename, {type: 'image/png', lastModified: Date.now()});
             const container = new DataTransfer();
             container.items.add(file);
             input.files = container.files;