Skip to main content
Question

Issues importing images


Attila_Bodi

When importing an image as JPG it stays its true size and color.
When importing as PNG it is 1/4th the size and desaturated.

Is this a known issue?
I’m I not supposed to use PNG in figma?

in figma:

original files


12 replies

tank666
  • 4856 replies
  • June 15, 2021

It has nothing to do with the file extension. For example, now, having downloaded these images, they have the extension .jpg (apparently after being compressed by the forum). If you look at the metadata, you will notice that one image has a DPI: 22x22, while the second has a DPI: 144x144. It is because of this that images are imported at different resolutions.


Attila_Bodi

I changed the source file to 72dpi and got this result when importing to figma

the sizes aren’t being messed with but the colors are still off (i did the color invert to show the colors a bit better)


tank666
  • 4856 replies
  • June 15, 2021

Sorry, I can’t achieve this with your images. You can try changing the Figma color space. You can also try saving these images uncompressed and re-importing them into Figma.


Attila_Bodi

It dose this with all imgs. I save them out uncompressed from photoshop as png or jpg.

http://attilab.me/figma/Archive.zip


tank666
  • 4856 replies
  • June 15, 2021

PNG from the archive already has other colors (without import into Figma).


Attila_Bodi

I know that when they are different file types they are like 0.01% off (it’s not noticeable to most people)

but in figma it’s is so off, that it is very notable. its like 8% saturation difference and 3% hue difference

Note: if you are looking at this on a cheap monitor you might not see the difference as well


tank666
  • 4856 replies
  • June 15, 2021

Note that JPG has 3405 colors, while PNG only has 640 colors. Check the PNG export settings in Photoshop.

I resave your JPG to PNG (not Photoshop) and now the number of colors is the same, i.e. 3405 in both JPG and PNG. Try to import it into Figma, you won’t see the difference.

drive.google.com

Attila_Bodi

Your file seems to work> Back to the issue, I’m saving the png via default settings with no compression. In most cases photos are saved in Ps as industry standard. The end result is the file looks the same on every app or browser, but not in Figma. I’m glad that there is a workaround, although this seems like a Figma problem and not user error in any way.


tank666
  • 4856 replies
  • June 16, 2021

But Figma has nothing to do with it. In the video above, I showed your zipped images in FastStone Image Viewer on Windows without even loading them into Figma.

Figma doesn’t paint the missing (almost 3000) colors. By loading images into Figma, you will see those images as they are.

Could you send me the original PSD so that I can try exporting to JPG and PNG?


Attila_Bodi

From Ps. It looks like if png is exported to web as sRGB it shows up correct in Figma. If it’s saved as regular it png it’s incorrect colors in Figma only. If it’s exported as to web as regular, its incorrect on browsers and on Figma.


Ted_McDonald

It is a Figma issues surrounding how they handle color spaces. It has been posted many times if you search, but no official response yet.


  • 1 reply
  • October 18, 2023

The issue seems reconstructible when trying to encode an export as HDR image and then import it to Figma.
Changed to sRGB and everything came back to normal from this side


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings