diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index e1dfae03cfb32..1180493a86275 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -262,26 +262,27 @@ function defaultImageLoader(loaderProps: ImageLoaderProps) {
 // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
 // handler instead of the img's onLoad attribute.
 function removePlaceholder(
-  element: HTMLImageElement | null,
+  img: HTMLImageElement | null,
   placeholder: PlaceholderValue
 ) {
-  if (placeholder === 'blur' && element) {
+  if (placeholder === 'blur' && img) {
     const handleLoad = () => {
-      if (!element.src.startsWith('data:')) {
-        ;(element.decode || Promise.resolve)().then(() => {
-          element.style.filter = 'none'
-          element.style.backgroundSize = 'none'
-          element.style.backgroundImage = 'none'
+      if (!img.src.startsWith('data:')) {
+        const p = 'decode' in img ? img.decode() : Promise.resolve()
+        p.then(() => {
+          img.style.filter = 'none'
+          img.style.backgroundSize = 'none'
+          img.style.backgroundImage = 'none'
         })
       }
     }
-    if (element.complete) {
+    if (img.complete) {
       // If the real image fails to load, this will still remove the placeholder.
       // This is the desired behavior for now, and will be revisited when error
       // handling is worked on for the image component itself.
       handleLoad()
     } else {
-      element.onload = handleLoad
+      img.onload = handleLoad
     }
   }
 }