From 628e6aca97c845305cfcd8055751d9e88e686615 Mon Sep 17 00:00:00 2001
From: Tobias Koppers <tobias.koppers@googlemail.com>
Date: Wed, 12 Jan 2022 20:51:38 +0100
Subject: [PATCH] use text data url instead of base64 for shorter encoding
 (#33218)

and text is easier to gzip

and it avoid the reference to `Buffer` from next

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 packages/next/client/image.tsx         | 10 +++++-----
 packages/next/shared/lib/to-base-64.ts | 10 ----------
 2 files changed, 5 insertions(+), 15 deletions(-)
 delete mode 100644 packages/next/shared/lib/to-base-64.ts

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 = `<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>
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)
-  }
-}