diff --git a/changelog/unreleased/enhancement-load-space-images-as-preview b/changelog/unreleased/enhancement-load-space-images-as-preview
new file mode 100644
index 00000000000..1d80c9cda07
--- /dev/null
+++ b/changelog/unreleased/enhancement-load-space-images-as-preview
@@ -0,0 +1,5 @@
+Enhancement: Load space images as preview
+
+We've added a new logic which renders space images as preview to minimize data traffic
+
+https://github.com/owncloud/web/pull/6529
diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
index 090f5f31859..8af2921ff43 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -11,9 +11,8 @@
       ref="spaceImageInput"
       type="file"
       name="file"
-      multiple
       tabindex="-1"
-      accept="image/*"
+      :accept="supportedSpaceImageMimeTypes"
       @change="$_uploadImage_uploadImageSpace"
     />
     <oc-list id="oc-spaces-actions-sidebar" class-name="oc-mt-s">
@@ -41,6 +40,7 @@ import UploadImage from '../../../mixins/spaces/actions/uploadImage'
 import EditQuota from '../../../mixins/spaces/actions/editQuota'
 import QuotaModal from '../../Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../../components/Spaces/ReadmeContentModal.vue'
+import { thumbnailService } from '../../../services'
 
 export default {
   name: 'SpaceActions',
@@ -80,6 +80,9 @@ export default {
     },
     quotaModalIsOpen() {
       return this.$data.$_editQuota_modalOpen
+    },
+    supportedSpaceImageMimeTypes() {
+      return thumbnailService.getSupportedMimeTypes('image/').join(',')
     }
   },
   methods: {
diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
index 7c6d177fc70..d868d8b7a76 100644
--- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -3,7 +3,7 @@
     <div class="oc-space-details-sidebar-image oc-text-center">
       <oc-spinner v-if="loadImageTask.isRunning" />
       <div v-else-if="spaceImage" class="oc-position-relative">
-        <img :src="'data:image/jpeg;base64,' + spaceImage" alt="" class="oc-mb-m" />
+        <img :src="spaceImage" alt="" class="oc-mb-m" />
       </div>
       <oc-icon
         v-else
@@ -71,9 +71,11 @@ import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
-import { buildWebDavSpacesPath } from '../../../helpers/resources'
+import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources'
 import { spaceRoleManager } from '../../../helpers/share'
 import SpaceQuota from '../../SpaceQuota.vue'
+import { loadPreview } from '../../../helpers/resource'
+import { ImageDimension } from '../../../constants'
 
 export default {
   name: 'SpaceDetails',
@@ -96,12 +98,17 @@ export default {
         .slice(webDavPathComponents.indexOf(ref.space.id) + 1)
         .join('/')
 
-      const fileContents = yield ref.$client.files.getFileContents(
-        buildWebDavSpacesPath(ref.space.id, path),
-        { responseType: 'arrayBuffer' }
-      )
+      const fileInfo = yield ref.$client.files.fileInfo(buildWebDavSpacesPath(ref.space.id, path))
+      const resource = buildResource(fileInfo)
 
-      spaceImage.value = Buffer.from(fileContents).toString('base64')
+      spaceImage.value = yield loadPreview({
+        resource,
+        isPublic: false,
+        dimensions: ImageDimension.Preview,
+        server: ref.configuration.server,
+        userId: ref.user.id,
+        token: ref.getToken
+      })
     })
 
     return { loadImageTask, spaceImage }
@@ -112,7 +119,7 @@ export default {
       'currentFileOutgoingCollaborators',
       'currentFileOutgoingLinks'
     ]),
-    ...mapGetters(['user']),
+    ...mapGetters(['user', 'getToken']),
 
     space() {
       return this.displayedItem.value
@@ -174,6 +181,17 @@ export default {
       )
     }
   },
+  watch: {
+    'space.spaceImageData': {
+      handler(val) {
+        if (!val) {
+          return
+        }
+        this.loadImageTask.perform(this)
+      },
+      deep: true
+    }
+  },
   mounted() {
     this.loadImageTask.perform(this)
   },
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index ccf5b0faffa..0dfb8419a9a 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -17,7 +17,7 @@ import quickActions from './quickActions'
 import store from './store'
 import { FilterSearch, SDKSearch } from './search'
 import { bus } from 'web-pkg/src/instance'
-import { archiverService, Registry } from './services'
+import { archiverService, thumbnailService, Registry } from './services'
 import fileSideBars from './fileSideBars'
 import { buildRoutes } from './router'
 import get from 'lodash-es/get'
@@ -138,5 +138,13 @@ export default {
       store.getters.configuration.server || window.location.origin,
       get(store, 'getters.capabilities.files.archivers', [])
     )
+    // FIXME: Remove mock data
+    thumbnailService.initialize(
+      get(store, 'getters.capabilities.files.thumbnail', {
+        enabled: true,
+        version: 'v0.1',
+        supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain']
+      })
+    )
   }
 }
diff --git a/packages/web-app-files/src/mixins/spaces/actions/setImage.js b/packages/web-app-files/src/mixins/spaces/actions/setImage.js
index b5a9d45fe1e..17a41b3f692 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/setImage.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/setImage.js
@@ -3,6 +3,7 @@ import { clientService } from 'web-pkg/src/services'
 import { mapMutations, mapActions, mapGetters } from 'vuex'
 import { buildResource } from '../../../helpers/resources'
 import { bus } from 'web-pkg/src/instance'
+import { thumbnailService } from '../../../services'
 
 export default {
   computed: {
@@ -20,7 +21,10 @@ export default {
             if (resources.length !== 1) {
               return false
             }
-            if (!resources[0].mimeType?.startsWith('image/')) {
+            if (!resources[0].mimeType) {
+              return false
+            }
+            if (!thumbnailService.isMimetypeSupported(resources[0].mimeType, true)) {
               return false
             }
             return isLocationSpacesActive(this.$router, 'files-spaces-project')
diff --git a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js
index 13fd2ec631d..e78ec866819 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/uploadImage.js
@@ -1,6 +1,7 @@
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 import { bus } from 'web-pkg/src/instance'
+import { thumbnailService } from '../../../services'
 
 export default {
   data: function () {
@@ -42,6 +43,17 @@ export default {
       const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
       const file = ev.currentTarget.files[0]
 
+      if (!file) {
+        return
+      }
+
+      if (!thumbnailService.isMimetypeSupported(file.type, true)) {
+        return this.showMessage({
+          title: this.$gettext('The file type is unsupported'),
+          status: 'danger'
+        })
+      }
+
       const extraHeaders = {}
       if (file.lastModifiedDate) {
         extraHeaders['X-OC-Mtime'] = '' + file.lastModifiedDate.getTime() / 1000
diff --git a/packages/web-app-files/src/services/index.ts b/packages/web-app-files/src/services/index.ts
index 49585377684..9d90901a517 100644
--- a/packages/web-app-files/src/services/index.ts
+++ b/packages/web-app-files/src/services/index.ts
@@ -1,3 +1,4 @@
 export * from './archiver'
+export * from './thumbnail'
 export * from './cache'
 export { default as Registry } from './registry'
diff --git a/packages/web-app-files/src/services/thumbnail.ts b/packages/web-app-files/src/services/thumbnail.ts
new file mode 100644
index 00000000000..d27283de570
--- /dev/null
+++ b/packages/web-app-files/src/services/thumbnail.ts
@@ -0,0 +1,33 @@
+interface ThumbnailCapability {
+  enabled: boolean
+  version: string // version is just a major version, e.g. `v2`
+  supportedMimeTypes: string[]
+}
+
+export class ThumbnailService {
+  serverUrl: string
+  capability?: ThumbnailCapability
+
+  public initialize(thumbnailCapability: ThumbnailCapability = null): void {
+    this.capability = thumbnailCapability
+  }
+
+  public get available(): boolean {
+    return !!this.capability?.version
+  }
+
+  public isMimetypeSupported(mimeType: string, onlyImages = false) {
+    return onlyImages
+      ? mimeType.startsWith('image/') && this.capability.supportedMimeTypes.includes(mimeType)
+      : this.capability.supportedMimeTypes.includes(mimeType)
+  }
+
+  public getSupportedMimeTypes(filter?: string) {
+    if (!filter) {
+      return this.capability.supportedMimeTypes
+    }
+    return this.capability.supportedMimeTypes.filter((mimeType) => mimeType.startsWith(filter))
+  }
+}
+
+export const thumbnailService = new ThumbnailService()
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 28563b5a2e9..97c9d49e0d4 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -16,7 +16,7 @@
               :class="{ expanded: imageExpanded }"
               class="space-overview-image oc-cursor-pointer"
               alt=""
-              :src="'data:' + imageContent.mimeType + ';base64,' + imageContent.data"
+              :src="imageContent"
               @click="toggleImageExpanded"
             />
           </div>
@@ -49,7 +49,7 @@
                     name="file"
                     multiple
                     tabindex="-1"
-                    accept="image/*"
+                    :accept="supportedSpaceImageMimeTypes"
                     @change="$_uploadImage_uploadImageSpace"
                   />
                   <ul class="oc-list oc-files-context-actions">
@@ -85,11 +85,13 @@
             </div>
             <p v-if="space.description" class="oc-mt-rm">{{ space.description }}</p>
             <div>
+              <!-- eslint-disable vue/no-v-html -->
               <div
                 ref="markdownContainer"
                 class="markdown-container"
                 v-html="markdownContent"
               ></div>
+              <!-- eslint-enable -->
               <div v-if="showMarkdownCollapse" class="markdown-collapse oc-text-center oc-mt-s">
                 <oc-button appearance="raw" @click="toggleCollapseMarkdown">
                   <oc-icon :name="markdownCollapseIcon" />
@@ -149,6 +151,7 @@ import sanitizeHtml from 'sanitize-html'
 import MixinAccessibleBreadcrumb from '../../mixins/accessibleBreadcrumb'
 import { bus } from 'web-pkg/src/instance'
 import { buildResource, buildSpace, buildWebDavSpacesPath } from '../../helpers/resources'
+import { loadPreview } from '../../helpers/resource'
 import ResourceTable, { determineSortFields } from '../../components/FilesList/ResourceTable.vue'
 import { createLocationSpaces } from '../../router'
 import { usePagination, useSort } from '../../composables'
@@ -173,6 +176,7 @@ import EditQuota from '../../mixins/spaces/actions/editQuota'
 import EditReadmeContent from '../../mixins/spaces/actions/editReadmeContent'
 import QuotaModal from '../../components/Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../components/Spaces/ReadmeContentModal.vue'
+import { thumbnailService } from '../../services'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -312,6 +316,7 @@ export default {
       'totalFilesSize',
       'currentFileOutgoingCollaborators'
     ]),
+    ...mapGetters(['user', 'getToken']),
 
     selected: {
       get() {
@@ -355,6 +360,9 @@ export default {
     },
     readmeContentModalIsOpen() {
       return this.$data.$_editReadmeContent_modalOpen
+    },
+    supportedSpaceImageMimeTypes() {
+      return thumbnailService.getSupportedMimeTypes('image/').join(',')
     }
   },
   watch: {
@@ -376,16 +384,20 @@ export default {
         const path = webDavPathComponents
           .slice(webDavPathComponents.indexOf(this.space.id) + 1)
           .join('/')
-        this.$client.files
-          .getFileContents(buildWebDavSpacesPath(this.space.id, path), {
-            responseType: 'arrayBuffer'
-          })
-          .then((fileContents) => {
-            this.imageContent = {
-              data: Buffer.from(fileContents).toString('base64'),
-              mimeType: this.space.spaceImageData.file.mimeType
-            }
+
+        this.$client.files.fileInfo(buildWebDavSpacesPath(this.space.id, path)).then((data) => {
+          const resource = buildResource(data)
+          loadPreview({
+            resource,
+            isPublic: false,
+            dimensions: ImageDimension.Preview,
+            server: this.configuration.server,
+            userId: this.user.id,
+            token: this.getToken
+          }).then((imageBlob) => {
+            this.imageContent = imageBlob
           })
+        })
       },
       deep: true
     },
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 2e2edc7ce28..41ba1334bb6 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -73,12 +73,7 @@
                   <img
                     v-if="imageContentObject[space.id]"
                     class="space-image oc-rounded-top"
-                    :src="
-                      'data:' +
-                      imageContentObject[space.id]['mimeType'] +
-                      ';base64,' +
-                      imageContentObject[space.id]['data']
-                    "
+                    :src="imageContentObject[space.id]['data']"
                     alt=""
                   />
                   <oc-icon
@@ -168,7 +163,7 @@ import { computed } from '@vue/composition-api'
 import { useStore } from 'web-pkg/src/composables'
 import { useTask } from 'vue-concurrency'
 import { createLocationSpaces } from '../../router'
-import { mapMutations, mapActions } from 'vuex'
+import { mapMutations, mapActions, mapGetters } from 'vuex'
 import Rename from '../../mixins/spaces/actions/rename'
 import Delete from '../../mixins/spaces/actions/delete'
 import Disable from '../../mixins/spaces/actions/disable'
@@ -176,8 +171,10 @@ import Restore from '../../mixins/spaces/actions/restore'
 import EditDescription from '../../mixins/spaces/actions/editDescription'
 import ShowDetails from '../../mixins/spaces/actions/showDetails'
 import UploadImage from '../../mixins/spaces/actions/uploadImage'
-import { buildSpace, buildWebDavSpacesPath } from '../../helpers/resources'
+import { buildResource, buildSpace, buildWebDavSpacesPath } from '../../helpers/resources'
 import { clientService } from 'web-pkg/src/services'
+import { loadPreview } from '../../helpers/resource'
+import { ImageDimension } from '../../constants'
 
 export default {
   components: {
@@ -215,6 +212,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['user', 'getToken']),
     hasCreatePermission() {
       // @TODO
       return true
@@ -238,17 +236,23 @@ export default {
           const path = webDavPathComponents
             .slice(webDavPathComponents.indexOf(space.id) + 1)
             .join('/')
-          this.$client.files
-            .getFileContents(buildWebDavSpacesPath(space.id, path), {
-              responseType: 'arrayBuffer'
-            })
-            .then((fileContents) => {
+
+          this.$client.files.fileInfo(buildWebDavSpacesPath(space.id, path)).then((fileInfo) => {
+            const resource = buildResource(fileInfo)
+            loadPreview({
+              resource,
+              isPublic: false,
+              dimensions: ImageDimension.Preview,
+              server: this.configuration.server,
+              userId: this.user.id,
+              token: this.getToken
+            }).then((imageBlob) => {
               this.$set(this.imageContentObject, space.id, {
                 fileId: space.spaceImageData.id,
-                data: Buffer.from(fileContents).toString('base64'),
-                mimeType: space.spaceImageData.file.mimeType
+                data: imageBlob
               })
             })
+          })
         }
       },
       deep: true
diff --git a/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js b/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js
index b3d4b342303..59268650e92 100644
--- a/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js
+++ b/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.js
@@ -8,6 +8,7 @@ import mockAxios from 'jest-mock-axios'
 import sdkMock from '@/__mocks__/sdk'
 import fileFixtures from '__fixtures__/files'
 import { bus } from 'web-pkg/src/instance'
+import { thumbnailService } from '../../../../src/services'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -68,6 +69,14 @@ describe('setImage', () => {
     })
   }
 
+  beforeAll(() => {
+    thumbnailService.initialize({
+      enabled: true,
+      version: '0.1',
+      supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain']
+    })
+  })
+
   afterEach(() => jest.clearAllMocks())
 
   describe('isEnabled property', () => {
diff --git a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js
index e4fa8c7067c..b23da1375c0 100644
--- a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js
+++ b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.js
@@ -6,6 +6,7 @@ import { createLocationSpaces } from '../../../../src/router'
 import mockAxios from 'jest-mock-axios'
 // eslint-disable-next-line jest/no-mocks-import
 import sdkMock from '@/__mocks__/sdk'
+import { thumbnailService } from '../../../../src/services'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -73,6 +74,14 @@ describe('uploadImage', () => {
     })
   }
 
+  beforeAll(() => {
+    thumbnailService.initialize({
+      enabled: true,
+      version: '0.1',
+      supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain']
+    })
+  })
+
   afterEach(() => jest.clearAllMocks())
 
   describe('method "$_uploadImage_uploadImageSpace"', () => {
@@ -85,7 +94,7 @@ describe('uploadImage', () => {
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.$_uploadImage_uploadImageSpace({
         currentTarget: {
-          files: [{ name: 'image.png', lastModifiedDate: new Date() }]
+          files: [{ name: 'image.png', lastModifiedDate: new Date(), type: 'image/png' }]
         }
       })
 
@@ -98,7 +107,7 @@ describe('uploadImage', () => {
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.$_uploadImage_uploadImageSpace({
         currentTarget: {
-          files: [{ name: 'image.png', lastModifiedDate: new Date() }]
+          files: [{ name: 'image.png', lastModifiedDate: new Date(), type: 'image/png' }]
         }
       })
 
diff --git a/packages/web-app-files/tests/unit/services/thumbnail.spec.ts b/packages/web-app-files/tests/unit/services/thumbnail.spec.ts
new file mode 100644
index 00000000000..a75a9003c13
--- /dev/null
+++ b/packages/web-app-files/tests/unit/services/thumbnail.spec.ts
@@ -0,0 +1,52 @@
+import { thumbnailService, ThumbnailService } from '../../../src/services'
+
+describe('thumbnail', () => {
+  describe('thumbnailService', () => {
+    it('creates an ArchiverService instance exported as `archiverService`', () => {
+      expect(thumbnailService).toBeInstanceOf(ThumbnailService)
+    })
+    describe('when not being initialized', () => {
+      it('is announcing itself as unavailable', () => {
+        expect(thumbnailService.available).toBe(false)
+      })
+    })
+    describe('when initialized', () => {
+      let service
+      beforeEach(() => {
+        service = new ThumbnailService()
+      })
+      describe('without thumbnail capability', () => {
+        beforeEach(() => {
+          service.initialize(null)
+        })
+        it('is announcing itself as unavailable', () => {
+          expect(service.available).toBe(false)
+        })
+      })
+      describe('with capability', () => {
+        const capability = {
+          enabled: true,
+          version: 'v0.1',
+          supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain']
+        }
+        beforeEach(() => {
+          service.initialize(capability)
+        })
+        it('is announcing itself as available', () => {
+          expect(service.available).toBe(true)
+        })
+        describe('method isMimetypeSupported', () => {
+          it('should be true if mimeType is supported', () => {
+            expect(service.isMimetypeSupported('image/png')).toBe(true)
+          })
+          it('should be false if mimeType is not supported', () => {
+            expect(service.isMimetypeSupported('image/pdf')).toBe(false)
+          })
+          it('should be false if mimeType is supported but excluded via onlyImages property', () => {
+            expect(service.isMimetypeSupported('text/plain', true)).toBe(false)
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
index c8bfa13aa4b..51a7e25de4f 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
@@ -7,12 +7,21 @@ import mockAxios from 'jest-mock-axios'
 import SpaceProject from '../../../../src/views/spaces/Project.vue'
 import Vuex from 'vuex'
 import { ShareTypes, spaceRoleManager } from '../../../../src/helpers/share'
+import { thumbnailService } from '../../../../src/services'
 
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
   silent: true
 })
 
+beforeAll(() => {
+  thumbnailService.initialize({
+    enabled: true,
+    version: '0.1',
+    supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain']
+  })
+})
+
 beforeEach(mockAxios.reset)
 
 afterEach(() => {
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
index 48b24954bea..759e4ad52c5 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -6,7 +6,7 @@ exports[`Spaces project view space image should show if given 1`] = `
     <!---->
     <!---->
     <div class="oc-px-m oc-mt-m oc-flex">
-      <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
+      <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=" class="space-overview-image oc-cursor-pointer"></div>
       <div class="oc-width-3-4">
         <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
           <div class="oc-flex oc-flex-middle">
@@ -14,7 +14,7 @@ exports[`Spaces project view space image should show if given 1`] = `
             <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
               <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
             </oc-button-stub>
-            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
+            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/png,image/jpg,image/jpeg,image/gif">
               <ul class="oc-list oc-files-context-actions">
                 <li class="oc-spaces-context-action oc-py-xs oc-px-s">
                   <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
@@ -79,7 +79,7 @@ exports[`Spaces project view space readme should show if given 1`] = `
     <!---->
     <!---->
     <div class="oc-px-m oc-mt-m oc-flex">
-      <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
+      <!---->
       <div class="oc-width-3-4">
         <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
           <div class="oc-flex oc-flex-middle">
@@ -87,7 +87,7 @@ exports[`Spaces project view space readme should show if given 1`] = `
             <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
               <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
             </oc-button-stub>
-            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
+            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/png,image/jpg,image/jpeg,image/gif">
               <ul class="oc-list oc-files-context-actions">
                 <li class="oc-spaces-context-action oc-py-xs oc-px-s">
                   <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">