Question

Custom background image is blurry

  • 22 November 2021
  • 16 replies
  • 615 views

Hi,

 

I uploaded a custom background image, and even though it does not exceed the max image size requirements, seems like it’s still being resized because it looks very blurry.

What can I do to fix it?

 

Original Image:

Uploaded Image:

 

Thanks,

Avital


16 replies

Userlevel 7
Badge +5

Hi @avital_negev Welcome to the community! That image does look pretty blurry. Do you mind providing the specs for the original image so I can ask the support team if they have any recommendations? The downloaded one from the community won’t be the same as the original.

 

Thanks!

Hi @Liz,

The image size is 1269 × 714 px, I also tried 1680 × 946 but it also looks blurry.

 

Thanks!

 

Userlevel 7
Badge +5

Huh. Do you know if the image is really high quality? If so, this would cause the image to become compressed when added to the form, @avital_negev .

Userlevel 7
Badge +5

Hi @avital_negev! Can you let us know about the quality of the image? Like my friend Liz mentioned above, if the quality is really high then the image would be compressed when you add it to your form. Let us know if you were able to solve this! :wink:

Hi @Liz and @Gabi Amaral 

 

I created the image in Figma and then exported it as PNG or JPG. I tried many variations of image sizes  and tried x1, x2, 0.5x.. all these look blurry once uploaded to Typeform:

 

PNG, 36 KB, 1269 × 714px

PNG, 82KB, 2538 × 1428px

PNG, 134KB, 3807 × 2142px

PNG, 53KB, 1680 x 984px

 

JPG, 108KB, 1269 × 714px

JPG, 267KB, 2538 × 1428px

JPG, 154KB, 1680 x 984px

 

 

Userlevel 7
Badge +5

Hi @avital_negev Our support team let me know they’ve got a ticket open with you to look further into this, which might be the best help since they can test the image in your account. 

Let us know if they resolve the issue!

Thanks @Liz , unfortunately they weren’t able to assist.
All they suggested is to set the Brightness and Contrast...

Userlevel 7
Badge +5

Hi @avital_negev I have our tech team taking a second look at this for you. :grinning:

Hello! Has there been any known resolution to this? Having the same issue on my end - image looks terrible. 

Userlevel 7
Badge +5

Hi @AE Design Could you send the URL of your form and a screenshot of which image is blurry? Additionally, what devices/browsers are you testing on? 

Same issue with uploading custom images. I’ve tried multiple options, it just compresses them.

Here it the link

Userlevel 7
Badge +5

hi @tantify I’m not seeing any images on your form. (Or is it on the ending?) Do you mind sharing which question the images are on? 

Hi has this issue been resolved? I’ve spent HOURS trying to get my home page image to look crisp and tried every possible combination of resolution, screen size and file type. Exporting from figma to a PNG which is 35KB file size. It’s still blurry and when someone comes to this form from my website, it’s going to be a crappy visual experience. It’s jarring. 

The home page is just a very limited design in general. I want to add a title - but I’m stuck with some tiny bit of text that I can’t change the size of. I’ve tried adding text to the image, but that’s also blurry so that doesn’t work either. 

Here’s the link to the site: 

Can someone help me improve this image quality as everything I’ve tried is failing and I’m pulling my hair out over here. 

 

Userlevel 7
Badge +5

Hi @wearcoachable This issue tends to happen on a case by case basis. When I look at your form on Chrome on a Mac, I’m not seeing a blurry image. Are there certain devices/browsers where this is happening? 

This happens on mac and PCs. Have a look now: It’s a dogs dinner with text on it. 

I’ve uploaded probably 50 images to test them out.

I’ve rebuilt files in Illustrator to get bigger files than Figma can export.

I’ve tried 800 pixel width as recommended. Then tried 3200 pixel width to try and get something at a higher res to see if that works. Nope. No change, still looks blurry. 

My maximum file size is 1.9MB so it’s not even being compressed.

Whatever I try, when I upload an image to just the welcome screen the text and images look blurry. 

Even if that wasn’t a problem, the next challenge is working out where to put the text and image for different screen sizes so it doesn’t interfere with the logo, start button or welcome text. 

NOTHING SHOULD TAKE THIS MUCH TRIAL AND ERROR. 

Your welcome page design tool is just too hard to use and is creating a terrible user experience for me and for any potential people visiting my form. If this is the first screen they see...we’re not going to get any sign ups. 

I need someone from your support team to look into this because the easier solution right now is to cancel our subscription and use a competitor. I’ve never been so enraged by a piece of software before. 

 

 

 

Userlevel 7
Badge +5

Hi @wearcoachable Hm, I’m not seeing a different image on the form you shared above, and that image isn’t showing blurry for me. If you’d like further support 1-1 with this, you can contact our support team here. They have the ability to log into your account to test this on your form and get a better idea of what’s happening. 😀

Reply