diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 92f0b5147c158..d242b731f2501 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -1,6 +1,5 @@
import React from 'react'
import Head from '../shared/lib/head'
-import { toBase64 } from '../shared/lib/to-base-64'
import {
ImageConfigComplete,
imageConfigDefault,
@@ -535,7 +534,7 @@ export default function Image({
padding: 0,
}
let hasSizer = false
- let sizerSvg: string | undefined
+ let sizerSvgUrl: string | undefined
const imgStyle: ImgElementStyle = {
position: 'absolute',
top: 0,
@@ -596,7 +595,8 @@ export default function Image({
wrapperStyle.maxWidth = '100%'
hasSizer = true
sizerStyle.maxWidth = '100%'
- sizerSvg = ``
+ // url encoded svg is a little bit shorten than base64 encoding
+ sizerSvgUrl = `data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27${widthInt}%27 height=%27${heightInt}%27/%3e`
} else if (layout === 'fixed') {
//
wrapperStyle.display = 'inline-block'
@@ -661,7 +661,7 @@ export default function Image({
{hasSizer ? (
- {sizerSvg ? (
+ {sizerSvgUrl ? (
) : null}
diff --git a/packages/next/shared/lib/to-base-64.ts b/packages/next/shared/lib/to-base-64.ts
deleted file mode 100644
index f1fc94e1dbd87..0000000000000
--- a/packages/next/shared/lib/to-base-64.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Isomorphic base64 that works on the server and client
- */
-export function toBase64(str: string) {
- if (typeof window === 'undefined') {
- return Buffer.from(str).toString('base64')
- } else {
- return window.btoa(str)
- }
-}