diff --git a/wallpapers/image/imagepackage/contents/ui/main.qml b/wallpapers/image/imagepackage/contents/ui/main.qml
index f6a2d794e..107f31c11 100644
--- a/wallpapers/image/imagepackage/contents/ui/main.qml
+++ b/wallpapers/image/imagepackage/contents/ui/main.qml
@@ -9,7 +9,6 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1 as QQC2
 import QtQuick.Window 2.2
-import QtGraphicalEffects 1.0
 import org.kde.plasma.wallpapers.image 2.0 as Wallpaper
 import org.kde.plasma.core 2.0 as PlasmaCore
 
@@ -104,15 +103,22 @@ QQC2.StackView {
 
     function loadImage(skipAnimation) {
         const _skipAnimation = root.currentItem == undefined || !!skipAnimation;
+        const baseImage = Qt.createComponent("mediacomponent/ImageComponent.qml");
         var pendingImage = baseImage.createObject(root, { "source": root.modelImage,
                         "fillMode": root.fillMode,
                         "sourceSize": root.sourceSize,
                         "color": root.configColor,
                         "blur": root.blur,
-                        "opacity": _skipAnimation ? 1: 0});
+            "opacity": _skipAnimation ? 1: 0,
+            "width": root.width,
+            "height": root.height,
+        });
 
         function replaceWhenLoaded() {
             if (pendingImage.status !== Image.Loading) {
+                // BUG 454908: Update accent color
+                pendingImage.QQC2.StackView.onActivated.connect(wallpaper.repaintNeeded);
+                pendingImage.QQC2.StackView.onRemoved.connect(pendingImage.destroy);
                 root.replace(pendingImage, {},
                     _skipAnimation ? QQC2.StackView.Immediate : QQC2.StackView.Transition);
                 pendingImage.statusChanged.disconnect(replaceWhenLoaded);
@@ -128,64 +134,6 @@ QQC2.StackView {
         replaceWhenLoaded();
     }
 
-    Component {
-        id: baseImage
-
-        Image {
-            id: mainImage
-
-            property alias color: backgroundColor.color
-            property bool blur: false
-
-            asynchronous: true
-            cache: false
-            autoTransform: true
-            z: -1
-
-            QQC2.StackView.onActivated: {
-                // BUG 454908: Update accent color
-                wallpaper.repaintNeeded();
-            }
-            QQC2.StackView.onRemoved: destroy()
-
-            Rectangle {
-                id: backgroundColor
-                anchors.fill: parent
-                visible: mainImage.status === Image.Ready && !blurLoader.active
-                z: -2
-            }
-
-            Loader {
-                id: blurLoader
-                anchors.fill: parent
-                z: -3
-                active: mainImage.blur && (mainImage.fillMode === Image.PreserveAspectFit || mainImage.fillMode === Image.Pad)
-                sourceComponent: Item {
-                    Image {
-                        id: blurSource
-                        anchors.fill: parent
-                        asynchronous: true
-                        cache: false
-                        autoTransform: true
-                        fillMode: Image.PreserveAspectCrop
-                        source: mainImage.source
-                        sourceSize: mainImage.sourceSize
-                        visible: false // will be rendered by the blur
-                    }
-
-                    GaussianBlur {
-                        id: blurEffect
-                        anchors.fill: parent
-                        source: blurSource
-                        radius: 32
-                        samples: 65
-                        visible: blurSource.status === Image.Ready
-                    }
-                }
-            }
-        }
-    }
-
     replaceEnter: Transition {
         OpacityAnimator {
             id: replaceEnterOpacityAnimator
diff --git a/wallpapers/image/imagepackage/contents/ui/mediacomponent/ImageComponent.qml b/wallpapers/image/imagepackage/contents/ui/mediacomponent/ImageComponent.qml
new file mode 100644
index 000000000..c6b7e342f
--- /dev/null
+++ b/wallpapers/image/imagepackage/contents/ui/mediacomponent/ImageComponent.qml
@@ -0,0 +1,64 @@
+/*
+    SPDX-FileCopyrightText: 2013 Marco Martin <mart@kde.org>
+    SPDX-FileCopyrightText: 2014 Sebastian Kügler <sebas@kde.org>
+    SPDX-FileCopyrightText: 2014 Kai Uwe Broulik <kde@privat.broulik.de>
+
+    SPDX-License-Identifier: GPL-2.0-or-later
+*/
+
+import QtQuick 2.15
+import QtGraphicalEffects 1.15
+
+Rectangle {
+    id: backgroundColor
+
+    color: "black"
+    z: -2
+
+    property bool blur: false
+    property alias mainImage: mainImage
+    property alias source: mainImage.source
+    property alias fillMode: mainImage.fillMode
+    property alias sourceSize: mainImage.sourceSize
+    property alias status: mainImage.status
+
+    Image {
+        id: mainImage
+        anchors.fill: parent
+
+        asynchronous: true
+        cache: false
+        autoTransform: true
+        z: 0
+    }
+
+    Loader {
+        id: blurLoader
+        anchors.fill: parent
+        z: -1
+        active: backgroundColor.blur && (mainImage.fillMode === Image.PreserveAspectFit || mainImage.fillMode === Image.Pad)
+        visible: active
+        sourceComponent: Item {
+            Image {
+                id: blurSource
+                anchors.fill: parent
+                asynchronous: true
+                cache: false
+                autoTransform: true
+                fillMode: Image.PreserveAspectCrop
+                source: mainImage.source
+                sourceSize: mainImage.sourceSize
+                visible: false // will be rendered by the blur
+            }
+
+            GaussianBlur {
+                id: blurEffect
+                anchors.fill: parent
+                source: blurSource
+                radius: 32
+                samples: 65
+                visible: blurSource.status === Image.Ready
+            }
+        }
+    }
+}