use text data url instead of base64 for shorter encoding

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 = `<svg width="${widthInt}" height="${heightInt}" xmlns="http://www.w3.org/2000/svg" version="1.1"/>`
+      // 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') {
       // <Image src="i.png" width="100" height="100" layout="fixed" />
       wrapperStyle.display = 'inline-block'
@@ -661,7 +661,7 @@ export default function Image({
     <span style={wrapperStyle}>
       {hasSizer ? (
         <span style={sizerStyle}>
-          {sizerSvg ? (
+          {sizerSvgUrl ? (
             <img
               style={{
                 display: 'block',
@@ -676,7 +676,7 @@ export default function Image({
               }}
               alt=""
               aria-hidden={true}
-              src={`data:image/svg+xml;base64,${toBase64(sizerSvg)}`}
+              src={sizerSvgUrl}
             />
           ) : null}
         </span>