How can I get the bytes size of an image to match the size of the image when it is being exported as PNG at 1x quality?

Plugin and Widget API Questions
1

I am trying to create a plugin, in which we are displaying the bytes size of the image. We want to match the bytes size of an image to the bytes size when we export an image as PNG at 1x quality.

For example, the size of an image in my Figma design file is 4MB. The size dimensions of this image in the file is 300 x 300px. When I scale it down to 100 x 100px, the quality and bytes size of the image is same. But I want the bytes size to be propotionally reduced with the image size.
When I export this 4MB image at 100 x 100px size at 1x quality, then the size is around 1.5MB. But when I calculate the size of the image at 100 x 100px size within the design file using getBytesAsync, it is showing as 4MB.

Is it possible to match the image bytes size to the bytes size we export at 1x quality.

Please help me get through this.

2

This function gives you the original image, no matter the export settings. To get the image at desired size you need to use exportAsync

1 Like
3

Thanks a lot Gleb. I was able to achieve the output using exportAsync.

4

The size of the exported file isn’t something that can be precisely calculated without actually performing the export. You can use exportAsync to produce an accurate value, but it will cost memory and performance and may slow your plugin down. Depending on your use case, this may or may not be okay.

I’d recommend that you present the byte count to your users as an estimate, rather than a precise value. You can use some common heuristics for estimating compressed sizes for images, such as this method for PNG. The Plugin API doesn’t have any built-in functionality for this.

1 Like
5

Thank you so much Jeflee.
This is a super simple plugin. So exportAsync did not cause much impact on the perf. Anyways, thanks a lot for the insights and headsup about memory and perf. I will also try the compressed sizes method.