Skip navigation

Currently Being Moderated

Why do the images in my form look grainy or blurry?

Feb 21, 2012 3:34 PM

View All Frequently Asked Questions

UPDATE: As of 12/03/2013 this FAQ should not be necessary.  The full size image is now used in FormsCentral and there should be no degradation in the quality. 

 

There are a couple of things that could be causing the quality of your images to be reduced.

 

The first thing to know is that if you have a very high resolution image (whose width is greater than 1024px), FormsCentral will automatically create a smaller version of the file so that when the form loads it's as quick as possible.  When that happens, we save the resulting file as a JPG.  The issue arises sometimes when the file you started with was a graphic rather than a photo (usually saved as a PNG), and it is converted to a JPG, which can create some less than perfect results on some types of images (particularly line art and logos). 

 

If this is happens you will see an alert like this:

ImageReformatAlert.png

 

 

And the re-compressed image would look something like this (notice how the color is not uniform because it's been saved as a JPG):

jpg_compression.png

 

 

The other thing that might be happening is if the image that you are placing is indeed less than 1024px, but is still a PNG image and doesn't fit on the form width, so is being resized by HTML.  When that happens, particularly for bitmap images in PNG, the browser resizes the image but does not anti-alias the resulting smaller image, and you end up with something like this:

bitmap_edge.png

When what you really want is this:

smooth_edge.png

 

If this is what's happening, you'd be noticing jagged edges. 

 

The solution for both is to resize your image outside of FormsCentral before you upload the image, where you have much greater control over the possible settings and quality. 

 

If you are on a mac

 

Open the image up in the application "Preview", from the "Tools" menu select "Adjust Size…" and enter your target size (smaller than 1024 px wide).  And then select "Save as…" from the "File" Menu.  For Photographs select JPG, and for logos select PNG.  (If you are saving a JPG, be sure to set the quality to 80% or higher)

 

If you are on Windows 7

 

Open the file in the application "Paint" (start menu --> All Programs --> Accessories --> Paint).  On the Home tab in the Image group, click Resize.  In the Resize and Skew dialog box, make sure to select "Maintain Aspect Ratio" and then enter the desired size, and then select "Save as" and then save as either JPG (for a photo) or PNG (for a logo/graphic). 

 

If you are on Windows XP

 

Open the file in the application Paint (start menu --> All Programs --> Accessories --> Paint).  From the "Image" menu, select "Stretch/Skew". With Paint in XP, you'll only be able to resize by percentage unfortunately, but select a percentage that will create a smaller image and then select "Save as" and then save as either JPG (for a photo) or PNG (for a logo/graphic).

 
Comments (0)