Image Size Recommendations and Tips for Web Forms


When designing your Eleo web forms, using properly sized and optimized images helps your forms look professional and load quickly across all devices. 


  • Image dimensions: Online images are measured in pixels (px) — the higher the pixel dimensions, the larger and more detailed the image. If you upload an image that’s smaller than the recommended size, it will be stretched to fill the screen, which can cause it to look blurry or pixelated. It’s similar to blowing up a balloon with a small image printed on it—once it’s stretched too far, the details become distorted and unclear.
  • Image sizes: Online images also have a file size, measured in kilobytes (KB) or megabytes (MB), where 1 MB equals 1,024 KB. The larger the file size, the longer it can take your web form to load—especially for users on mobile or slower internet. It’s like carrying a heavy suitcase up the stairs—the heavier it is, the longer it takes to reach the top.

Below are recommended image dimensions, image sizes, and best practices for each template and image.


Logo Image

Floating Template — Background Image

Standard and Side-by-Side Templates — Header Image

File Format and Optimization Tips


Logo Image

Your logo appears at the top of your web form and helps reinforce your nonprofit’s brand. Eleo automatically resizes the logo based on the display height you select—50, 100, 150, or 200 pixels. The width adjusts proportionally to maintain the logo’s original shape.


Recommended logo dimensions:

  • Upload a logo that is at least twice the height you plan to display it at. For example, if you choose a display height of 100 px, upload a logo that is 200 px tall or more to ensure it looks sharp on high-resolution (retina) screens.

Recommended file size:

  • Keep the logo image under 300 KB

Recommended file format:

  • PNG file: This allows your logo to have a transparent background and appear clear over any background color. File formats like JPEGs do not support transparency and may display with a white box around the logo.

Tips

  • Avoid small or intricate text: Logos with very small text, taglines, or thin lines may not display clearly at smaller sizes, especially on mobile devices.
  • Use a high-contrast version: Make sure your logo has enough contrast to stand out against the background of your form. This ensures it remains visible and legible.

Preview after uploading: Confirm that your logo appears crisp and properly scaled.



Floating Template — Background Image

The Floating template displays your form on the left side of the screen with your background image filling the entire page behind it.


Recommended background dimensions:

  • 1920 x 1080 px for standard screens (Full HD)
  • 2560 x 1440 px for high-resolution screens

Recommended file size:

  • Keep the image under 500 KB (100–300 KB is best)

Tips:

  • Choose the right image layout: Since the form floats on the left side, it’s best to pick an image with the main visual focus on the right side. For example, a person, logo, or object on the right creates balance and keeps the form readable.
  • Keep the form short and simple: This template works best for shorter forms (including header text), like donation pages, where visitors won’t be scrolling much. Longer forms can cause the image to stretch awkwardly.

Account for responsiveness: The background image may appear cropped, stretched, or repositioned depending on the screen size and the length of your form. Be sure to test your form design on different screen sizes—including desktop, laptop, and mobile—to ensure it looks good across all devices.



Standard and Side-by-Side Templates — Header Image

The header image appears at the top of your form page, just below your logo. It helps create a polished, branded experience for visitors. Both the Standard and Side-by-Side templates include a header image section, but the layout of the page below it is slightly different.

Standard template layout: Your page will display the logo, then the header image, followed by your text or context, and then the form itself. This layout is stacked vertically and works well for donation, registration, and membership forms.

Side-by-Side template layout: This version also shows the logo and header image first, but then splits the rest of the page into two columns—text and content on the left, and the form on the right. This layout is helpful when you want to include a lot of context alongside the form (event details, donation levels, membership types, etc.).


Recommended header dimensions:

  • Width: 1920 px for standard screens (Full HD) OR 2560 px for high-resolution screens
  • Height: 350–500 pixels (depending on desired look)

Recommended file size:

  • Keep the image under 500 KB (100–300 KB is best)

Tips:

  • Keep the design clean: Avoid placing too much text directly inside the image. If you do include text, it should be important or a call-to-action. Make sure it’s large enough to remain legible on mobile devices, where the image will appear much smaller due to responsive scaling.
  • Be mindful of layout spacing: If your header image is too tall or your text section is too long, it may push the form further down the page, requiring visitors to scroll. If you have a lot of text to include, the Side-by-Side layout may be a better option to keep the form visible without as much vertical space.

Test on multiple devices: Always preview your form on desktop, laptop, and mobile to ensure the image appears as intended and any text within the image remains legible.



File Format and Optimization Tips


File format recommendations

  • JPEG: Use for most images — good quality with small file sizes
  • WebP: Use for the best balance of quality and speed (modern browsers support it)
  • PNG: High quality, but avoid unless transparency is needed — PNG files are typically much larger in size

Performance and load time

  • 500 KB and under: Ideal
  • 500 KB - 1 MB: May cause slight loading delays
  • Over 1 MB: Will noticeably slow down page loads, especially on mobile or slow connections

Ways to optimize your images

Use online tool like Canva (hyperlink: https://www.canva.com/ )  to easily create graphics in the correct size

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.