diff --git a/src/components/VAllResultsGrid/VImageCellSquare.vue b/src/components/VAllResultsGrid/VImageCellSquare.vue
index 424a984707..f85da78f97 100644
--- a/src/components/VAllResultsGrid/VImageCellSquare.vue
+++ b/src/components/VAllResultsGrid/VImageCellSquare.vue
@@ -7,7 +7,7 @@
   >
     <figure
       itemprop="image"
-      itemscope=""
+      itemscope
       itemtype="https://schema.org/ImageObject"
       class="aspect-square relative rounded-sm"
     >
@@ -16,11 +16,11 @@
         class="w-full h-full object-cover rounded-sm bg-dark-charcoal-10 text-dark-charcoal-10"
         loading="lazy"
         :alt="image.title"
-        :src="getImageUrl(image)"
+        :src="getImageUrl()"
         :width="250"
         :height="250"
         itemprop="thumbnailUrl"
-        @error="onImageLoadError($event, image)"
+        @error="onImageLoadError($event)"
       />
       <figcaption
         class="absolute left-0 bottom-0 invisible group-hover:visible group-focus:visible bg-white p-1 text-dark-charcoal"
@@ -32,44 +32,54 @@
   </VLink>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import type { ImageDetail } from '~/models/media'
+
 import VLink from '~/components/VLink.vue'
 import VLicense from '~/components/VLicense/VLicense.vue'
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const errorImage = require('~/assets/image_not_available_placeholder.png')
+import errorImage from '~/assets/image_not_available_placeholder.png'
 
-const toAbsolutePath = (url, prefix = 'https://') => {
+const toAbsolutePath = (url: string, prefix = 'https://') => {
   if (url.indexOf('http://') >= 0 || url.indexOf('https://') >= 0) {
     return url
   }
   return `${prefix}${url}`
 }
 
-export default {
+export default defineComponent({
   name: 'VImageCell',
   components: { VLink, VLicense },
-  props: ['image'],
-  methods: {
-    getImageUrl(image) {
-      if (!image) return ''
-      const url = image.thumbnail || image.url
-      return toAbsolutePath(url)
+  props: {
+    image: {
+      type: Object as PropType<ImageDetail>,
+      required: true,
     },
-    getImageForeignUrl(image) {
-      return toAbsolutePath(image.foreign_landing_url)
-    },
-    onImageLoadError(event, image) {
-      const element = event.target
-      if (element.src !== image.url) {
-        element.src = image.url
+  },
+  setup(props) {
+    const getImageUrl = () => {
+      if (!props.image) return ''
+      const url = props.image.thumbnail || props.image.url
+      return toAbsolutePath(url)
+    }
+    const getImageForeignUrl = () =>
+      toAbsolutePath(props.image.foreign_landing_url)
+
+    const onImageLoadError = (event: Event) => {
+      const element = event.target as HTMLImageElement
+      if (element.src !== props.image.url) {
+        element.src = props.image.url
       } else {
         element.src = errorImage
       }
-    },
-    onFocusLeave(event) {
-      this.$emit('focus-leave', event)
-    },
+    }
+    return {
+      getImageUrl,
+      getImageForeignUrl,
+      onImageLoadError,
+    }
   },
-}
+})
 </script>
diff --git a/src/components/VImageGrid/VImageCell.vue b/src/components/VImageGrid/VImageCell.vue
index 52194f54cc..bfade0a960 100644
--- a/src/components/VImageGrid/VImageCell.vue
+++ b/src/components/VImageGrid/VImageCell.vue
@@ -3,26 +3,20 @@
     :href="'/image/' + image.id"
     class="w-full block group relative overflow-hidden rounded-sm focus:ring-[3px] focus:ring-pink focus:ring-offset-[3px] focus:outline-none bg-dark-charcoal-10 text-dark-charcoal-10"
     :aria-label="image.title"
-    :style="`width: ${containerAspect * widthBasis}px;flex-grow: ${
-      containerAspect * widthBasis
-    }`"
-    @click="onGotoDetailPage($event, image)"
+    :style="containerStyle"
     @keydown.native.shift.tab.exact="$emit('shift-tab', $event)"
   >
-    <figure
-      class="absolute w-full"
-      :style="`width: ${imageWidth}%; top: ${imageTop}%; left:${imageLeft}%;`"
-    >
+    <figure class="absolute w-full" :style="figureStyle">
       <img
         ref="img"
         loading="lazy"
         class="margin-auto block w-full"
         :alt="image.title"
-        :src="getImageUrl(image)"
+        :src="imageUrl"
         :width="imgWidth"
         :height="imgHeight"
         @load="getImgDimension"
-        @error="onImageLoadError($event, image)"
+        @error="onImageLoadError($event)"
       />
       <figcaption
         class="absolute left-0 bottom-0 invisible group-hover:visible group-focus:visible bg-white p-1 text-dark-charcoal"
@@ -35,101 +29,130 @@
   </VLink>
 </template>
 
-<script>
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from '@nuxtjs/composition-api'
+
+import type { ImageDetail } from '~/models/media'
+
 import VLicense from '~/components/VLicense/VLicense.vue'
 import VLink from '~/components/VLink.vue'
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const errorImage = require('~/assets/image_not_available_placeholder.png')
+import errorImage from '~/assets/image_not_available_placeholder.png'
 
 const minAspect = 3 / 4
 const maxAspect = 16 / 9
-const panaromaAspect = 21 / 9
+const panoramaAspect = 21 / 9
 const minRowWidth = 450
+const widthBasis = minRowWidth / maxAspect
 
-const toAbsolutePath = (url, prefix = 'https://') => {
+const toAbsolutePath = (url: string, prefix = 'https://') => {
   if (url.indexOf('http://') >= 0 || url.indexOf('https://') >= 0) {
     return url
   }
   return `${prefix}${url}`
 }
 
-export default {
+export default defineComponent({
   name: 'VImageCell',
   components: { VLicense, VLink },
-  props: ['image'],
-  data() {
-    return {
-      widthBasis: minRowWidth / maxAspect,
-      imgHeight: this.image.height || 100,
-      imgWidth: this.image.width || 100,
-    }
-  },
-  computed: {
-    imageAspect() {
-      return this.imgWidth / this.imgHeight
+  props: {
+    image: {
+      type: Object as PropType<ImageDetail>,
+      required: true,
     },
-    containerAspect() {
-      if (this.imageAspect > maxAspect) return maxAspect
-      if (this.imageAspect < minAspect) return minAspect
-      return this.imageAspect
-    },
-    iPadding() {
-      if (this.imageAspect < minAspect) return (1 / minAspect) * 100
-      if (this.imageAspect > maxAspect) return (1 / maxAspect) * 100
-      return (1 / this.imageAspect) * 100
-    },
-    imageWidth() {
-      if (this.imageAspect < maxAspect) return 100
-      return (this.imageAspect / maxAspect) * 100
-    },
-    imageTop() {
-      if (this.imageAspect > minAspect) return 0
+  },
+  setup(props) {
+    const imgHeight = ref(props.image.height || 100)
+    const imgWidth = ref(props.image.width || 100)
+
+    const imageAspect = computed(() => imgWidth.value / imgHeight.value)
+
+    const containerAspect = computed(() => {
+      if (imageAspect.value > maxAspect) return maxAspect
+      if (imageAspect.value < minAspect) return minAspect
+      return imageAspect.value
+    })
+    const iPadding = computed(() => {
+      if (imageAspect.value < minAspect) return (1 / minAspect) * 100
+      if (imageAspect.value > maxAspect) return (1 / maxAspect) * 100
+      return (1 / imageAspect.value) * 100
+    })
+    const imageWidth = computed(() => {
+      if (imageAspect.value < maxAspect) return 100
+      return (imageAspect.value / maxAspect) * 100
+    })
+    const imageTop = computed(() => {
+      if (imageAspect.value > minAspect) return 0
       return (
-        ((minAspect - this.imageAspect) /
-          (this.imageAspect * minAspect * minAspect)) *
+        ((minAspect - imageAspect.value) /
+          (imageAspect.value * minAspect * minAspect)) *
         -50
       )
-    },
-    imageLeft() {
-      if (this.imageAspect < maxAspect) return 0
-      return ((this.imageAspect - maxAspect) / maxAspect) * -50
-    },
-  },
-  methods: {
-    getImageUrl(image) {
-      if (!image) {
-        return ''
-      }
-      const url = image.thumbnail || image.url
-      if (this.imageAspect > panaromaAspect) return toAbsolutePath(url)
+    })
+    const imageLeft = computed(() => {
+      if (imageAspect.value < maxAspect) return 0
+      return ((imageAspect.value - maxAspect) / maxAspect) * -50
+    })
+
+    const imageUrl = computed(() => {
+      // TODO: check if we have blurry panorama thumbnails
+      // fix for blurry panorama thumbnails, introduced in
+      // https://github.com/cc-archive/cccatalog-frontend/commit/4c9bdac5
+      if (imageAspect.value > panoramaAspect)
+        return toAbsolutePath(props.image.url)
+      const url = props.image.thumbnail || props.image.url
       return toAbsolutePath(url)
-    },
-    getImageForeignUrl(image) {
-      return toAbsolutePath(image.foreign_landing_url)
-    },
-    onGotoDetailPage(event, image) {
-      if (!event.metaKey && !event.ctrlKey) {
-        event.preventDefault()
-        const detailRoute = this.localeRoute({
-          name: 'PhotoDetailPage',
-          params: { id: image.id, location: window.scrollY },
-        })
-        this.$router.push(detailRoute)
-      }
-    },
-    onImageLoadError(event, image) {
-      const element = event.target
-      if (element.src !== image.url) {
-        element.src = image.url
+    })
+
+    const getImageForeignUrl = () =>
+      toAbsolutePath(props.image.foreign_landing_url)
+
+    /**
+     * If the thumbnail fails to load, try replacing it with the original image URL.
+     * If the original image fails, too, use the error image placeholder.
+     * @param event - the error event.
+     */
+    const onImageLoadError = (event: Event) => {
+      const element = event.target as HTMLImageElement
+      if (element.src !== props.image.url) {
+        element.src = props.image.url
       } else {
         element.src = errorImage
       }
-    },
-    getImgDimension(e) {
-      this.imgHeight = e.target.naturalHeight
-      this.imgWidth = e.target.naturalWidth
-    },
+    }
+    const getImgDimension = (event: Event) => {
+      const element = event.target as HTMLImageElement
+      imgHeight.value = element.naturalHeight
+      imgWidth.value = element.naturalWidth
+    }
+
+    const containerStyle = computed(() => {
+      const containerWidth = containerAspect.value * widthBasis
+      return `width: ${containerWidth}px;flex-grow: ${containerWidth}`
+    })
+
+    const figureStyle = computed(
+      () =>
+        `width: ${imageWidth.value}%; top: ${imageTop.value}%; left:${imageLeft.value}%;`
+    )
+
+    return {
+      imgHeight,
+      imgWidth,
+      containerStyle,
+      figureStyle,
+      iPadding,
+      imageUrl,
+
+      getImageForeignUrl,
+      onImageLoadError,
+      getImgDimension,
+    }
   },
-}
+})
 </script>
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 453cc8fdc4..ea4d38e420 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-06-27T05:00:35+00:00\n"
+"POT-Creation-Date: 2022-06-28T13:04:47+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -467,12 +467,12 @@ msgid "Genre"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:46
+#: src/pages/image/_id.vue:47
 msgctxt "image-details.creator"
 msgid "by ###name###"
 msgstr ""
 
-#: src/pages/image/_id.vue:38
+#: src/pages/image/_id.vue:39
 msgctxt "image-details.weblink"
 msgid "Go to image's website"
 msgstr ""
@@ -654,7 +654,7 @@ msgid "Open form"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:51
+#: src/pages/image/_id.vue:52
 msgctxt "media-details.aria.creator-url"
 msgid "author ###name###"
 msgstr ""
@@ -1199,7 +1199,7 @@ msgid "An error occurred"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/image/_id.vue:193
+#: src/pages/image/_id.vue:222
 msgctxt "error.image-not-found"
 msgid "Couldn't find image with id ###id###"
 msgstr ""
diff --git a/src/pages/image/_id.vue b/src/pages/image/_id.vue
index 04f898c3c0..b33afd0c34 100644
--- a/src/pages/image/_id.vue
+++ b/src/pages/image/_id.vue
@@ -11,12 +11,13 @@
       <img
         v-if="!sketchFabUid"
         id="main-image"
-        :src="isLoadingFullImage ? image.thumbnail : image.url"
+        :src="imageSrc"
         :alt="image.title"
         class="h-full w-full max-h-[500px] mx-auto rounded-t-sm object-contain"
         :width="imageWidth"
         :height="imageHeight"
         @load="onImageLoaded"
+        @error="onImageError"
       />
       <VSketchFabViewer
         v-if="sketchFabUid"
@@ -83,9 +84,9 @@ import {
 } from '@nuxtjs/composition-api'
 
 import { IMAGE } from '~/constants/media'
+import type { ImageDetail } from '~/models/media'
 import { useSingleResultStore } from '~/stores/media/single-result'
 import { useRelatedMediaStore } from '~/stores/media/related-media'
-import type { ImageDetail } from '~/models/media'
 import { createDetailPageMeta } from '~/utils/og'
 
 import VButton from '~/components/VButton.vue'
@@ -96,6 +97,8 @@ import VRelatedImages from '~/components/VImageDetails/VRelatedImages.vue'
 import VSketchFabViewer from '~/components/VSketchFabViewer.vue'
 import VBackToSearchResultsLink from '~/components/VBackToSearchResultsLink.vue'
 
+import errorImage from '~/assets/image_not_available_placeholder.png'
+
 export default defineComponent({
   name: 'VImageDetailsPage',
   components: {
@@ -131,7 +134,12 @@ export default defineComponent({
     const imageWidth = ref(0)
     const imageHeight = ref(0)
     const imageType = ref('Unknown')
-    const isLoadingFullImage = ref(true)
+    /**
+     * To make sure that image is loaded fast, we `src` to `image.thumbnail`,
+     * and then replace it with the provider image once it is loaded.
+     */
+    const imageSrc = ref(image.value.thumbnail)
+    const isLoadingMainImage = ref(true)
     const sketchFabfailure = ref(false)
 
     const sketchFabUid = computed(() => {
@@ -143,16 +151,36 @@ export default defineComponent({
         .split('/')[0]
     })
 
+    /**
+     * On image error, fall back on image thumbnail or the error image.
+     * @param event - image load error event.
+     */
+    const onImageError = (event: Event) => {
+      if (!(event.target instanceof HTMLImageElement)) {
+        return
+      }
+      imageSrc.value =
+        event.target.src === image.value.url
+          ? image.value.thumbnail
+          : errorImage
+    }
+    /**
+     * When the load event is fired for the thumbnail image, we set the dimensions
+     * of the image, and replace the image src attribute with the `image.url`
+     * to load the original provider image.
+     * @param event - the image load event.
+     */
     const onImageLoaded = (event: Event) => {
       if (!(event.target instanceof HTMLImageElement)) {
         return
       }
-      imageWidth.value = image.value?.width || event.target.naturalWidth
-      imageHeight.value = image.value?.height || event.target.naturalHeight
-      if (image.value?.filetype) {
-        imageType.value = image.value.filetype
-      } else {
-        if (event.target) {
+      if (isLoadingMainImage.value) {
+        imageWidth.value = image.value?.width || event.target.naturalWidth
+        imageHeight.value = image.value?.height || event.target.naturalHeight
+
+        if (image.value?.filetype) {
+          imageType.value = image.value.filetype
+        } else {
           axios
             .head(event.target.src)
             .then((res) => {
@@ -165,21 +193,22 @@ export default defineComponent({
                */
             })
         }
+        imageSrc.value = image.value.url
+        isLoadingMainImage.value = false
       }
-      isLoadingFullImage.value = false
     }
-
     return {
       image,
       relatedMedia,
       relatedFetchState,
       imageWidth,
       imageHeight,
+      imageSrc,
       imageType,
-      isLoadingFullImage,
       sketchFabfailure,
       sketchFabUid,
       onImageLoaded,
+      onImageError,
       backToSearchPath,
     }
   },
diff --git a/tsconfig.json b/tsconfig.json
index dd7b0f7cab..0a40b292f8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -56,6 +56,7 @@
     "src/components/VCheckbox/**.vue",
     "src/components/VGlobalAudioSection/**.vue",
     "src/components/VIcon/**.vue",
+    "src/components/VImageGrid/**.vue",
     "src/components/VIconButton/**.vue",
     "src/components/VLicense/**.vue",
     "src/components/VLogoLoader/**.vue",
@@ -65,6 +66,7 @@
     "src/components/VSkeleton/**.vue",
     "src/components/VTabs/**.vue",
     "src/components/VAllResultsGrid/VAudioCell.vue",
+    "src/components/VAllResultsGrid/VImageCellSquare.vue",
     "src/components/VContentLink/**.vue",
     "src/components/VContentReport/VReportDescForm.vue",
     "src/components/VErrorSection/VErrorImage.vue",