How to copy pixel perfect PNG?

Would assert this is the nature of PNG images. There are only two type of images pixel base or vector base. Many different formats like bmp, gif, png, tiff, and 100’s more. May hear them called raster/pixel or vector/proportional base images. All raster formats are lossy. Vector images internally are a series of points that may be resized allowing lossless scaling. Both hare good for different scenarios. Behind the scene bitmap/pixel base are great/simple as the browser or what ever program to display they only need to read the file and copy it to the display device. Vectors tend to be smaller, but not always, but will need additional processing to resize/scale the image, then copy the image to the display device…

The only way to guarantee you get a pixel/display perfect image when sized is with a vector based image, which PNG files are not. Two options, convert your image(s) to one of the vector based images like SVG, or if wanting to stick with a PNG format you’ll need have ‘x’ different sized images based on the size you want to display 16x16, 32x32, 64x64 or ?x? you need one sized exactly to what you want to display…

My advice would be switch over to use vector images only. There are tools and drawing program to convert PNG to SVG (Inkscape for example). Or if you’re creating the images check out Affinity Designer, it is a vector based drawing program. Last 6 months my two favorite new tools are Figma and Affinity.

HTH,
dan 🙂

Hi Dan,

not sure if your answer is actually tackling the problem. I do understand the limits and differences between vector and or pixels.

Place a little image (rasterized picture) on your Figma canvas, rightclick → copy PNG and then Paste…boom…the image will show up next to your source image but upscaled/blurry.

If I press “Select all” in Photoshop and copy this selection to the clipboard and paste it into a new file, it has the same “dimensions” in pixels. It used to work like this in Figma for years until people loved the idea of directly copying png@2x for hidpi screenshots.

That’s when Figma decided the new “Copy PNG” will default to the @2x version. It makes total sense but breaks older workflows because the naming is inconsistent now compared to what happens when you export png (without @2x). 🙂

Hi, good feature, didn’t notice it before. It actually does solves the problem, but we have to set the scale on each and every frame we want to copy. Annotating the “copy as PNG” with “@2x” as the OP suggests would be a great way to show users what is actually happening. Ideally, the default scale should be set via a preference, I believe that’s probably what the OP wanted. Thanks anyway!

P. S. sorry for the truncated post (my very first!), I accidentally pressed some key combination and the post was sent in the middle of my toughts…