diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1c67b00b..f5bbf0ca 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9929,8 +9929,7 @@
     "pako": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.8.tgz",
-      "integrity": "sha512-6i0HVbUfcKaTv+EG8ZTr75az7GFXcLYk9UyLEg7Notv/Ma+z/UG3TCoz6GiNeOrn1E/e63I0X/Hpw18jHOTUnA==",
-      "dev": true
+      "integrity": "sha512-6i0HVbUfcKaTv+EG8ZTr75az7GFXcLYk9UyLEg7Notv/Ma+z/UG3TCoz6GiNeOrn1E/e63I0X/Hpw18jHOTUnA=="
     },
     "parallel-transform": {
       "version": "1.1.0",
@@ -12895,6 +12894,14 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "utif": {
+      "version": "3.1.0",
+      "resolved": "http://mirrors.cloud.tencent.com/npm/utif/-/utif-3.1.0.tgz",
+      "integrity": "sha512-WEo4D/xOvFW53K5f5QTaTbbiORcm2/pCL9P6qmJnup+17eYfKaEhDeX9PeQkuyEoIxlbGklDuGl8xwuXYMrrXQ==",
+      "requires": {
+        "pako": "^1.0.5"
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0aea1e0d..4de1f63e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta",
     "qrcode.vue": "^1.7.0",
+    "utif": "^3.1.0",
     "vue": "^2.6.10",
     "vue-i18n": "^8.15.3",
     "vue-lazyload": "^1.3.3",
diff --git a/frontend/src/components/files/ExtendedImage.vue b/frontend/src/components/files/ExtendedImage.vue
index 0270c49b..112e2de4 100644
--- a/frontend/src/components/files/ExtendedImage.vue
+++ b/frontend/src/components/files/ExtendedImage.vue
@@ -10,11 +10,12 @@
     @mouseup="mouseUp"
     @wheel="wheelMove"
   >
-    <img :src="src" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
+    <img src="" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
   </div>
 </template>
 <script>
 import throttle from 'lodash.throttle'
+import UTIF from 'utif'
 
 export default {
   props: {
@@ -61,6 +62,9 @@ export default {
     }
   },
   mounted() {
+    if (!this.decodeUTIF()) {
+      this.$refs.imgex.src = this.src
+    }
     let container = this.$refs.container
     this.classList.forEach(className => container.classList.add(className))
     // set width and height if they are zero
@@ -85,6 +89,20 @@ export default {
     }
   },
   methods: {
+    // Modified from UTIF.replaceIMG
+    decodeUTIF() {
+      const sufs = ["tif", "tiff", "dng", "cr2", "nef"]
+      let suff = document.location.pathname.split(".").pop().toLowerCase()
+      if (sufs.indexOf(suff) == -1) return false
+      let xhr = new XMLHttpRequest()
+      UTIF._xhrs.push(xhr)
+      UTIF._imgs.push(this.$refs.imgex)
+      xhr.open("GET", this.src)
+      xhr.responseType = "arraybuffer"
+      xhr.onload = UTIF._imgLoaded
+      xhr.send()
+      return true
+    },
     onLoad() {
       let img = this.$refs.imgex