diff --git a/app/assets/javascripts/rapid_diffs/adapters.js b/app/assets/javascripts/rapid_diffs/adapters.js
index bd76be708a2b23d2eb84a07c22945b0b59267e75..1911f55bcc49eb558c7a87500f32ee2f6dd4baeb 100644
--- a/app/assets/javascripts/rapid_diffs/adapters.js
+++ b/app/assets/javascripts/rapid_diffs/adapters.js
@@ -2,11 +2,13 @@ import { ExpandLinesAdapter } from '~/rapid_diffs/expand_lines/adapter';
 import { OptionsMenuAdapter } from '~/rapid_diffs/options_menu/adapter';
 import { ToggleFileAdapter } from '~/rapid_diffs/toggle_file/adapter';
 import { DisableDiffSideAdapter } from '~/rapid_diffs/disable_diff_side/adapter';
+import { ImageAdapter } from '~/rapid_diffs/image_viewer/adapter';
 
 const HEADER_ADAPTERS = [OptionsMenuAdapter, ToggleFileAdapter];
 
 export const VIEWER_ADAPTERS = {
   text_inline: [...HEADER_ADAPTERS, ExpandLinesAdapter],
   text_parallel: [...HEADER_ADAPTERS, ExpandLinesAdapter, DisableDiffSideAdapter],
+  image: [...HEADER_ADAPTERS, ImageAdapter],
   no_preview: HEADER_ADAPTERS,
 };
diff --git a/app/assets/javascripts/rapid_diffs/image_viewer/adapter.js b/app/assets/javascripts/rapid_diffs/image_viewer/adapter.js
new file mode 100644
index 0000000000000000000000000000000000000000..9186268237221efb5b37f972aace2ecc383983ec
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/image_viewer/adapter.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import ImageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue';
+import { MOUNTED } from '../events';
+
+export const ImageAdapter = {
+  [MOUNTED]() {
+    const data = JSON.parse(this.diffElement.querySelector('[data-image-data]').dataset.imageData);
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: this.diffElement.querySelector('[data-image-view]'),
+      render(h) {
+        return h(ImageDiffViewer, {
+          props: {
+            oldPath: data.old_path || '',
+            newPath: data.new_path || '',
+            oldSize: data.old_size ? parseInt(data.old_size, 10) : undefined,
+            newSize: data.new_size ? parseInt(data.new_size, 10) : undefined,
+            diffMode: data.diff_mode,
+            // URLs are already encoded on the backend
+            encodePath: false,
+          },
+        });
+      },
+    });
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index 9742118cd5f77a24a13766eb14477b7713bec289..cb126352a49295488d65579c720451ef8a6d18f4 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -26,6 +26,11 @@ export default {
       required: false,
       default: '',
     },
+    encodePath: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -47,6 +52,7 @@ export default {
       return this.width && this.height;
     },
     safePath() {
+      if (!this.encodePath) return this.path;
       return this.path.startsWith(BLOB_PREFIX) ? this.path : encodeSaferUrl(this.path);
     },
   },
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
index a3d9b0ace341a533cbbae01267283d9f6f663066..2a12b372c0e4c2519daa9831bba482cfc5541562 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -15,6 +15,11 @@ export default {
       type: String,
       required: true,
     },
+    encodePath: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -123,6 +128,7 @@ export default {
           key="onionOldImg"
           :render-info="false"
           :path="oldPath"
+          :encode-path="encodePath"
           @imgLoaded="onionOldImgLoaded"
         />
       </div>
@@ -139,6 +145,7 @@ export default {
           key="onionNewImg"
           :render-info="false"
           :path="newPath"
+          :encode-path="encodePath"
           @imgLoaded="onionNewImgLoaded"
         >
           <template #image-overlay="{ renderedWidth, renderedHeight }">
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
index 1746b5d421edda6c87c5eee4fe80b2490ce51f78..a0d59e7477a4a2f14de04a1c8d985fb48c757033 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -16,6 +16,11 @@ export default {
       type: String,
       required: true,
     },
+    encodePath: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -121,6 +126,7 @@ export default {
         :render-info="false"
         :path="oldPath"
         class="frame deleted"
+        :encode-path="encodePath"
         @imgLoaded="swipeOldImgLoaded"
       />
       <div
@@ -138,6 +144,7 @@ export default {
             width: swipeMaxPixelWidth,
           }"
           class="frame added"
+          :encode-path="encodePath"
           @imgLoaded="swipeNewImgLoaded"
         >
           <template #image-overlay="{ renderedWidth, renderedHeight }">
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
index 11c59eb349679a245a3945fa3a70a43f6eff398f..bb72b899923e7ea3bff309d61d30e782cd78bbdf 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
@@ -24,6 +24,11 @@ export default {
       required: false,
       default: 0,
     },
+    encodePath: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 };
 </script>
@@ -35,6 +40,7 @@ export default {
       :file-size="oldSize"
       :render-info="true"
       inner-css-classes="frame deleted"
+      :encode-path="encodePath"
       class="wrap w-50"
     />
     <image-viewer
@@ -42,6 +48,7 @@ export default {
       :file-size="newSize"
       :render-info="true"
       :inner-css-classes="['frame', 'added']"
+      :encode-path="encodePath"
       class="wrap w-50"
     >
       <template #image-overlay="{ renderedWidth, renderedHeight }">
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
index f5ac65bcd1fde8229b7c88ac1f9d3bef5e151514..f375c8bcac0958254551fce89682a7d886ad4b27 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
@@ -32,6 +32,11 @@ export default {
       required: false,
       default: 0,
     },
+    encodePath: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -126,6 +131,7 @@ export default {
               deleted: diffMode === $options.diffModes.deleted,
             },
           ]"
+          :encode-path="encodePath"
         >
           <template v-if="isNew || isRenamed" #image-overlay="{ renderedWidth, renderedHeight }">
             <slot
diff --git a/app/assets/stylesheets/components/rapid_diffs/_index.scss b/app/assets/stylesheets/components/rapid_diffs/_index.scss
index ba7eb003d18383a70c8bca55bec50ea20416c810..f3b639269a2d8366830943d2e703c1ed8147914e 100644
--- a/app/assets/stylesheets/components/rapid_diffs/_index.scss
+++ b/app/assets/stylesheets/components/rapid_diffs/_index.scss
@@ -3,3 +3,4 @@
 @import './text_file_viewers';
 @import './no_preview';
 @import './empty_state';
+@import './image_viewer';
diff --git a/app/assets/stylesheets/components/rapid_diffs/image_viewer.scss b/app/assets/stylesheets/components/rapid_diffs/image_viewer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5011466fadc7b5dfd67829ddd25fc4c43877787d
--- /dev/null
+++ b/app/assets/stylesheets/components/rapid_diffs/image_viewer.scss
@@ -0,0 +1,9 @@
+.rd-image-diff {
+  margin: 0;
+  overflow: hidden;
+}
+
+.rd-image-diff-fallback {
+  @apply gl-p-5;
+  text-align: center;
+}
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index cf727bc2144f9ce28965f50ba5401a6f9ebc763c..f234f2e490cc847e5dddd533ce84a8688b0afed1 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -339,12 +339,10 @@ $diff-file-header: 41px;
   .diff-file-container {
     .frame.deleted {
       border: 1px solid var(--gl-status-danger-icon-color);
-      background-color: inherit;
     }
 
     .frame.added {
       border: 1px solid var(--gl-status-success-icon-color);
-      background-color: inherit;
     }
 
     .swipe.view,
diff --git a/app/components/rapid_diffs/diff_file_component.rb b/app/components/rapid_diffs/diff_file_component.rb
index 72c4ee913df79a7d9fefe0af58044ca5bc9e0c96..837a9abd16825d00b3829a39b952851a8b584039 100644
--- a/app/components/rapid_diffs/diff_file_component.rb
+++ b/app/components/rapid_diffs/diff_file_component.rb
@@ -34,6 +34,8 @@ def viewer_component
         return Viewers::Text::InlineViewComponent
       end
 
+      return Viewers::ImageViewComponent if @diff_file.image_diff?
+
       Viewers::NoPreviewComponent
     end
 
diff --git a/app/components/rapid_diffs/merge_request_diff_file_component.rb b/app/components/rapid_diffs/merge_request_diff_file_component.rb
index ea997634a7497add1b7482cb7732844fc8869dd1..866389afe556d050d6ee5078edde9da48d0e9a4a 100644
--- a/app/components/rapid_diffs/merge_request_diff_file_component.rb
+++ b/app/components/rapid_diffs/merge_request_diff_file_component.rb
@@ -13,19 +13,23 @@ def initialize(diff_file:, merge_request:, parallel_view: false)
     end
 
     def additional_menu_items
+      [edit_in_sfe].compact
+    end
+
+    def edit_in_sfe
+      return unless @diff_file.text?
+
       editor_path = helpers.project_edit_blob_path(
         @diff_file.repository.project,
         helpers.tree_join(@merge_request.source_branch, @diff_file.new_path),
         from_merge_request_iid: @merge_request.iid
       )
 
-      [
-        {
-          text: _('Edit in single-file editor'),
-          href: editor_path,
-          position: 1
-        }
-      ]
+      {
+        text: _('Edit in single-file editor'),
+        href: editor_path,
+        position: 1
+      }
     end
   end
 end
diff --git a/app/components/rapid_diffs/viewers/image_view_component.html.haml b/app/components/rapid_diffs/viewers/image_view_component.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..e70508f0e6e870d879ca03632ed19abd99586354
--- /dev/null
+++ b/app/components/rapid_diffs/viewers/image_view_component.html.haml
@@ -0,0 +1,4 @@
+-# .diff-file class used for compatibility with legacy styles for now
+.rd-image-diff.diff-file{ data: { image_data: image_data.to_json } }
+  .rd-image-diff-fallback{ data: { image_view: true } }
+    = s_('RapidDiffs|Loading image diff...')
diff --git a/app/components/rapid_diffs/viewers/image_view_component.rb b/app/components/rapid_diffs/viewers/image_view_component.rb
new file mode 100644
index 0000000000000000000000000000000000000000..8e62c1f36662e5b3f17cf19e506e96a3f1668c2a
--- /dev/null
+++ b/app/components/rapid_diffs/viewers/image_view_component.rb
@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module RapidDiffs
+  module Viewers
+    class ImageViewComponent < ViewerComponent
+      include TreeHelper
+
+      def self.viewer_name
+        'image'
+      end
+
+      def image_data
+        {
+          old_path: diff_file_old_blob_raw_url,
+          new_path: diff_file_blob_raw_url,
+          old_size: @diff_file.old_blob&.size,
+          new_size: @diff_file.new_blob&.size,
+          diff_mode: diff_mode
+        }
+      end
+
+      def diff_file_old_blob_raw_url
+        sha = @diff_file.old_content_sha
+        return unless sha
+
+        project_raw_url(
+          @diff_file.repository.project,
+          tree_join(@diff_file.old_content_sha, @diff_file.old_path),
+          only_path: true
+        )
+      end
+
+      def diff_file_blob_raw_url
+        project_raw_url(
+          @diff_file.repository.project,
+          tree_join(@diff_file.content_sha, @diff_file.file_path),
+          only_path: true
+        )
+      end
+
+      def diff_mode
+        return 'new' if @diff_file.new_file?
+        return 'deleted' if @diff_file.deleted_file?
+        return 'renamed' if @diff_file.renamed_file?
+        return 'mode_changed' if @diff_file.mode_changed?
+
+        'replaced'
+      end
+    end
+  end
+end
diff --git a/lib/gitlab/diff/file.rb b/lib/gitlab/diff/file.rb
index 46ef6d2b102c4bff22dd067f15c01b449101499b..aa331f5cd682281865b3eb8f105c86ea9684aa47 100644
--- a/lib/gitlab/diff/file.rb
+++ b/lib/gitlab/diff/file.rb
@@ -462,6 +462,12 @@ def whitespace_only?
         !collapsed? && diff_lines_for_serializer.nil? && (added_lines != 0 || removed_lines != 0)
       end
 
+      def image_diff?
+        return false if different_type? || external_storage_error?
+
+        DiffViewer::Image.can_render?(self, verify_binary: !stored_externally?)
+      end
+
       private
 
       def diffable_by_attribute?
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6b7ec2c5c142b0938d5a3f81ed1f22b97fa6f6ad..8926d00cca2cc79c480a8e9726b203d5624e3b2a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -50187,6 +50187,9 @@ msgstr ""
 msgid "RapidDiffs|Line %d"
 msgstr ""
 
+msgid "RapidDiffs|Loading image diff..."
+msgstr ""
+
 msgid "RapidDiffs|Original line"
 msgstr ""
 
diff --git a/spec/components/rapid_diffs/merge_request_diff_file_component_spec.rb b/spec/components/rapid_diffs/merge_request_diff_file_component_spec.rb
index a53219d3a2c0ec3fbe9ced2cd0d3a5346b73eaf2..84ce40c5fc8289c775f4bd3b01266613f00f7e4b 100644
--- a/spec/components/rapid_diffs/merge_request_diff_file_component_spec.rb
+++ b/spec/components/rapid_diffs/merge_request_diff_file_component_spec.rb
@@ -25,16 +25,37 @@
     )
   end
 
-  describe 'rendering' do
-    it 'renders additional options in the header menu' do
-      render_component
+  describe 'header menu options' do
+    context 'with text diff file' do
+      before do
+        allow(diff_file).to receive(:text?).and_return(true)
+      end
 
-      options_menu_items = Gitlab::Json.parse(page.find('script', visible: false).text)
+      it 'renders additional options' do
+        render_component
 
-      expect(options_menu_items.length).to eq(2)
-      expect(options_menu_items[0]['text']).to eq('View file @ abc123')
-      expect(options_menu_items[1]['text']).to eq('Edit in single-file editor')
-      expect(options_menu_items[1]['href']).to include("#{edit_path_base}#{merge_request.iid}")
+        options_menu_items = Gitlab::Json.parse(page.find('script', visible: false).text)
+
+        expect(options_menu_items.length).to eq(2)
+        expect(options_menu_items[0]['text']).to eq('View file @ abc123')
+        expect(options_menu_items[1]['text']).to eq('Edit in single-file editor')
+        expect(options_menu_items[1]['href']).to include("#{edit_path_base}#{merge_request.iid}")
+      end
+    end
+
+    context 'with non text diff file' do
+      before do
+        allow(diff_file).to receive(:text?).and_return(false)
+      end
+
+      it 'renders no additional options' do
+        render_component
+
+        options_menu_items = Gitlab::Json.parse(page.find('script', visible: false).text)
+
+        expect(options_menu_items.length).to eq(1)
+        expect(options_menu_items[0]['text']).to eq('View file @ abc123')
+      end
     end
   end
 
diff --git a/spec/components/rapid_diffs/shared.rb b/spec/components/rapid_diffs/shared.rb
index ac98d83690df63225caefb627ea64771d3523feb..a50fc14a2aad3608dae5c6bb33779fc8b74729e8 100644
--- a/spec/components/rapid_diffs/shared.rb
+++ b/spec/components/rapid_diffs/shared.rb
@@ -70,6 +70,17 @@ def render_component
     end
   end
 
+  context "when is image diff" do
+    before do
+      allow(diff_file).to receive_messages(diffable_text?: false, image_diff?: true)
+    end
+
+    it "renders image viewer" do
+      render_component
+      expect(file_data['viewer']).to eq('image')
+    end
+  end
+
   context "when no viewer found" do
     before do
       allow(diff_file).to receive_messages(text?: false, content_changed?: false)
diff --git a/spec/components/rapid_diffs/viewers/image_view_component_spec.rb b/spec/components/rapid_diffs/viewers/image_view_component_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..16e8e4e152c3eebbb57bff0784c456b5115731b1
--- /dev/null
+++ b/spec/components/rapid_diffs/viewers/image_view_component_spec.rb
@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe RapidDiffs::Viewers::ImageViewComponent, type: :component, feature_category: :code_review_workflow do
+  let_it_be(:diff_file) { build(:diff_file) }
+  let(:viewer) { page.find('[data-image-data]') }
+
+  before do
+    allow(diff_file).to receive_message_chain(:old_blob, :size).and_return('200')
+    allow(diff_file).to receive_message_chain(:new_blob, :size).and_return('300')
+  end
+
+  it 'provides image diff data' do
+    render_component
+    project = diff_file.repository.container
+    namespace = project.namespace
+    old_path = "/#{namespace.to_param}/#{project.to_param}/-/raw/#{diff_file.old_content_sha}/#{diff_file.file_path}"
+    new_path = "/#{namespace.to_param}/#{project.to_param}/-/raw/#{diff_file.content_sha}/#{diff_file.file_path}"
+    expect(image_data).to eq({
+      "old_path" => old_path,
+      "new_path" => new_path,
+      "old_size" => '200',
+      "new_size" => '300',
+      "diff_mode" => 'replaced'
+    })
+  end
+
+  it 'renders image app mount element' do
+    render_component
+    expect(page).to have_css('[data-image-view]')
+  end
+
+  def image_data
+    Gitlab::Json.parse(viewer['data-image-data'])
+  end
+
+  def render_component(**args)
+    render_inline(described_class.new(diff_file: diff_file, **args))
+  end
+end
diff --git a/spec/frontend/rapid_diffs/image_viewer/adapter.spec.js b/spec/frontend/rapid_diffs/image_viewer/adapter.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cbbad91defff20834f31c8fe8e71eab8166aca2
--- /dev/null
+++ b/spec/frontend/rapid_diffs/image_viewer/adapter.spec.js
@@ -0,0 +1,67 @@
+import { ImageAdapter } from '~/rapid_diffs/image_viewer/adapter';
+import { setHTMLFixture } from 'helpers/fixtures';
+import { DiffFile } from '~/rapid_diffs/diff_file';
+
+jest.mock('~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue', () => ({
+  props: jest.requireActual('~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue')
+    .default.props,
+  render(h) {
+    return h('div', {
+      attrs: {
+        'data-image-diff-viewer': true,
+        'data-old-path': this.oldPath,
+        'data-new-path': this.newPath,
+        'data-old-size': this.oldSize,
+        'data-new-size': this.newSize,
+        'data-diff-mode': this.diffMode,
+        'data-encode-path': this.encodePath.toString(),
+      },
+    });
+  },
+}));
+
+describe('ImageAdapter', () => {
+  const imageData = {
+    old_path: '/old',
+    new_path: '/old',
+    old_size: '10',
+    new_size: '20',
+    diff_mode: 'replaced',
+  };
+
+  const getDiffFile = () => document.querySelector('diff-file');
+  const getDiffViewerApp = () => document.querySelector('[data-image-diff-viewer]');
+
+  const mount = () => {
+    setHTMLFixture(`
+      <diff-file data-file-data='${JSON.stringify({ viewer: 'image' })}'>
+        <div>
+          <div data-image-data='${JSON.stringify(imageData)}'>
+            <div data-image-view></div>
+          </div>
+        </div>
+      </diff-file>
+    `);
+    getDiffFile().mount({
+      adapterConfig: { image: [ImageAdapter] },
+      appData: {},
+      unobserve: jest.fn(),
+    });
+  };
+
+  beforeAll(() => {
+    customElements.define('diff-file', DiffFile);
+  });
+
+  it('shows image diff', () => {
+    mount();
+    expect(getDiffViewerApp().dataset).toMatchObject({
+      oldPath: imageData.old_path,
+      newPath: imageData.new_path,
+      oldSize: imageData.old_size,
+      newSize: imageData.new_size,
+      diffMode: imageData.diff_mode,
+      encodePath: 'false',
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js b/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js
index 2eeb587cb5141a8f6495946a34ff74593db70b60..b131c723dcd5cf42f452745e91e0dc048a837ce5 100644
--- a/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js
@@ -44,6 +44,7 @@ describe('Image Viewer', () => {
 
       expect(wrapper.find('img').element.src).toBe('/url/hello%231.jpg');
     });
+
     it('outputs path without transformations when outputting a Blob', () => {
       const file = new File([], DUMMY_IMAGE_BLOB_PATH);
       const path = window.URL.createObjectURL(file);
@@ -52,5 +53,13 @@ describe('Image Viewer', () => {
       });
       expect(wrapper.find('img').element.src).toBe(path);
     });
+
+    it('outputs path without transformations when a prop is set', () => {
+      wrapper = shallowMount(ImageViewer, {
+        propsData: { path: '/url/hello%20.jpg', encodePath: false },
+      });
+
+      expect(wrapper.find('img').element.src).toBe('/url/hello%20.jpg');
+    });
   });
 });
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
index 6cdd41644e611867ad33e951176cf658ccec5bfc..5b57cc2eba1ac67042403b3fb6461c2168e0d278 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
 import ImageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue';
+import ImageViewer from '~/vue_shared/components/content_viewer/viewers/image_viewer.vue';
 
 describe('ImageDiffViewer component', () => {
   const requiredProps = {
@@ -56,6 +57,11 @@ describe('ImageDiffViewer component', () => {
     expect(metaInfoElements.at(1).text()).toBe('1.00 KiB');
   });
 
+  it('renders unencoded image path', () => {
+    createComponent({ ...allProps, encodePath: false });
+    expect(wrapper.findComponent(ImageViewer).props('encodePath')).toBe(false);
+  });
+
   it('renders image diff for new', () => {
     createComponent({ ...allProps, diffMode: 'new', oldPath: '' });
 
diff --git a/spec/lib/gitlab/diff/file_spec.rb b/spec/lib/gitlab/diff/file_spec.rb
index 13e9ccdc53f60648dcb602e149b92c4798930508..b786d8c12f0b1dd87f63dc8261da0177a54e48ea 100644
--- a/spec/lib/gitlab/diff/file_spec.rb
+++ b/spec/lib/gitlab/diff/file_spec.rb
@@ -1312,6 +1312,28 @@ def popen(cmd, path=nil)
     end
   end
 
+  describe '#image_diff?' do
+    subject(:image_diff?) { diff_file.image_diff? }
+
+    it 'returns true for image diffs' do
+      allow(diff_file).to receive_messages(different_type?: false, external_storage_error?: false)
+      allow(DiffViewer::Image).to receive(:can_render?).and_return(true)
+      expect(image_diff?).to eq(true)
+    end
+
+    it 'returns false for different types' do
+      allow(diff_file).to receive_messages(different_type?: true, external_storage_error?: false)
+      allow(DiffViewer::Image).to receive(:can_render?).and_return(true)
+      expect(image_diff?).to eq(false)
+    end
+
+    it 'returns false for storage error' do
+      allow(diff_file).to receive_messages(different_type?: false, external_storage_error?: true)
+      allow(DiffViewer::Image).to receive(:can_render?).and_return(true)
+      expect(image_diff?).to eq(false)
+    end
+  end
+
   describe '#modified_file?' do
     subject(:modified_file?) { diff_file.modified_file? }