Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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`
  • Loading branch information
sokra committed Jan 12, 2022
1 parent 5572eb3 commit 628e6ac
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 15 deletions.
10 changes: 5 additions & 5 deletions 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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -661,7 +661,7 @@ export default function Image({
<span style={wrapperStyle}>
{hasSizer ? (
<span style={sizerStyle}>
{sizerSvg ? (
{sizerSvgUrl ? (
<img
style={{
display: 'block',
Expand All @@ -676,7 +676,7 @@ export default function Image({
}}
alt=""
aria-hidden={true}
src={`data:image/svg+xml;base64,${toBase64(sizerSvg)}`}
src={sizerSvgUrl}
/>
) : null}
</span>
Expand Down
10 changes: 0 additions & 10 deletions packages/next/shared/lib/to-base-64.ts

This file was deleted.

0 comments on commit 628e6ac

Please sign in to comment.