question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Difference between metadata sizes and toBuffer sizes of image ?

See original GitHub issue

Question about an existing feature

What are you trying to achieve?

I am confused in the sizes of image generated after metadata() and toBuffer(). what is the differnce between the sizes of images. I have provided the sample code with outputs, you can see the difference in sizes of image

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question


const file = fs.readFileSync("sample.png")
output: - 
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 13 88 00 00 13 88 08 03 00 00 00 6a 46 77 f9 00 00 03 00 50 4c 54 45 2f 1f 1d 2a 1a 19 29 19 18 ... 1676953 more bytes>

const sharpMetadata = await sharp(file).metadata()
output :-
{
  format: 'png',
  size: 1677003,
  width: 5000,
  height: 5000,
  space: 'srgb',
  channels: 4,
  depth: 'uchar',
  density: 72,
  isProgressive: false,
  paletteBitDepth: 8,
  hasProfile: false,
  hasAlpha: true
}


const {data, info} = await sharp(file).toBuffer({ resolveWithObject: true });
output : - 
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 13 88 00 00 13 88 08 06 00 00 00 5d 98 87 cb 00 00 00 09 70 48 59 73 00 00 0b 13 00 00 0b 13 01 ... 3270296 more bytes> {
  format: 'png',
  width: 5000,
  height: 5000,
  channels: 4,
  premultiplied: false,
  size: 3270346
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
g-abhishekcommented, Apr 21, 2022

As you said ‘A call to toFile or toBuffer will almost always generate different output compared with the input, so should be treated as a “lossy” operation. Whether the output is larger or smaller depends entirely upon the processing operations/options you’re using.’

But what if I don’t perform any operation and simply create the sharp image and then create file of that image, then how to achieve the same input size of the image in that file?

0reactions
lovellcommented, Apr 9, 2022

https://sharp.pixelplumbing.com/api-output#png

Set palette to true for slower, indexed PNG output.

Indexed PNG images that use a quantised palette are lossy.

https://en.wikipedia.org/wiki/Portable_Network_Graphics#Lossy_PNG_compression

Read more comments on GitHub >

github_iconTop Results From Across the Web

Input metadata - High performance Node.js image processing
Resize large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions.
Read more >
sharp.Metadata JavaScript and Node.js code examples
Resize image to width, height or width x height. Sharp.toBuffer. Write output to a Buffer. JPEG, PNG, WebP, TIFF and RAW output are...
Read more >
Can we get height and width of image using sharp?
Yes you can get the width and height of an image with sharp by using the metadata() function : const image = await...
Read more >
Image — pyvips 2.2.1 documentation - GitHub Pages
access (Access) – Hint the expected access pattern for the image. ... Get a list of all the metadata fields on an image....
Read more >
Using sharp with multer to reduce image sizes in NodeJS
Image files can get big, so you might want to think about reducing image sizes when you let users upload photos on your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found