Community forum for knowledge and support

Updated last year

Updating feature section 28 with photo display issues

At a glance

The community member is working on updating a feature section on their website where new photos appear when a tab is clicked. They are experiencing an issue where there is white space around the photos, even after exporting them from Figma and trying different sizes. The community members have tried various methods, including exporting from Adobe Illustrator, but the issue persists only with JPEG images. After sharing a Webflow preview link and trying a different image, the issue was resolved. However, the community member is still confused about the cause of the white space, as they do not see any issues in the Figma preview. The community members suggest trying to export the images at 2x resolution to see if that resolves the issue.

Useful resources

Hey everyone! So I am working on updating feature_section28 on my site (where you click on a tab and a new photo appears), and no matter what size I export my photo/whether or not I try to internally update the size, it keeps showing some sort of whitespace on every photo. This is only happening in this section, so I'm wondering if there is a way to fix this?

1
P
N
M
41 comments

Hi Nicole,
Can you please Webflow link of this page?

Nicole, the white space is part of the image it self I think

It actually isn't! I have these exported from Figma, cropped down and put them on a colored background to ensure there was no white space while exporting.

All three images I exported

I am afraid but I still think it's part of the image, somehow while exporting something is going wrong

I will share an image and try using it and see if it solves the problem

This image is too large to place in webflow.

needs to be less than 4MB

ok let me share again

I also only upload jpgs to save on storage space and optimize the site more.

this might be not perfect, but I am sharing this for just test so we can confirm it is not webflow, but something going wrong with figma export

Cool. so when you are exporting, the images are exported with that white color border so you can remove it in figma and export it again

That's where I'm confused. I'm going in and I'm not seeing a white boarder, there is no stroke, and I check before exporting and it doesn't show a single issue until I place it in Webflow

Let me see if restarting figma helps

Sure. Let me know if I can help anymore.

Thank you so much!

Real quick ! How did you get that image cropped? Did you use something other than Figma?

I just used the screen shot tool to do that

Aaaahhh ok I see. Thank you!

But I will not recommend you to do that, Rather use any online tool for cropping so you can still maintain the image quality

Oh no I know. I'm using my adobe suite to do it now but I'm still having the same issue. Idk what's going on. It's like I can only put full size imagery in here, but then it won't let me re-size the box.

in the export preview, do you see any extra white space or borders or anything? The preview is usually your best spot to look for what is going to actually get exported from Figma.

The other thing to ask - how are the images placed in Figma? I have noticed some issues with frames and background image fills and other things like that exporting in odd ways.

You could try drawing a rectangle around the image, maybe coming in 1 pixel in width and 1 pixel in height and using masking and exporting that group together and maybe it wont have that odd export.

Hey Matt! So in the preview I don't see any white borders or anything, and I removed the images from frames and cropped them to size based on the mockups for reference. I'm having the same issue when I use Adobe Illustrator as well to export my images, and the issue only occurs with a JPEG. I'm incredibly lost

how are the images getting into figma? where did the images come from?

it could be as simple as the images being off by one pixel - somehow Figma or Adobe are fixing the issue in render of their app but on export its still actually there, hard to say.

by off I mean, there's a transparent pixel somewhere

The images are coming from Unsplash directly and I am using the image fill originally within the mockup, using the image option and cropping it from there. So usually it’s in a rectangle first. I am guessing I should try to crop the full image directly placed into Figma?

Jumping in to see if I can help... What are the dimensions of the image that you're exporting in Figma? Could it be that you've sized the image at a half or percentage of a pixel and not a full pixel?

Hey Dillon! That is something I’ve checked too unless I’m misunderstanding what that means. I’ve ensured that nothing is sized at a decimal point. Is there another way to check this?

Oh and the dimensions are 600x700

Yeah that shouldn't be the issue then if the frame is 600x700. Just throwing it out there but I wonder if it needs to be exported at 2x though? When I look at your About page I can see some bordering happening to the hero photo but when I download the image it's not in the image. The image frame on the website is sized at around 960x960 on my screen yet the photo is only 721x706 so it's being enlarged to accommodate the space but only has a resolution of 72dpi. I would try exporting the photos at 2x (making them 144dpi) and keeping the dimensions and see if that eliminates the unexpected bordering.

Add a reply
Sign up and join the conversation on Slack