Best Practices for Image Quality on Trellis

This article outlines best practices for preparing images on Trellis to help them display as clearly as possible.

If you’re uploading an image or graphic with embedded text (like a flyer, infographic, or chart), it’s important to prepare it so the text stays as clear as possible across different devices.

Because Trellis automatically scales and optimizes images for performance, some reduction in sharpness may occur—but by following best practices, you can ensure your visuals look polished and professional in most viewing contexts.

Why Images Are Getting Scaled Down

Most platforms (including Trellis) will automatically downscale or recompress images to:

• Reduce file size for faster page loads

• Normalize display sizes across devices

• Enforce max dimensions or storage limits

• Protect performance on mobile or low-bandwidth connections

While this may lead to reduced image quality, it ensures better online performance and a smoother viewing experience.

Recommended Image Settings

Most images on Trellis follow a 16:9 aspect ratio, such as silent auction item images, donation option images, and raffle prize images. These images then get scaled up or down depending on the size of the screen (for example, desktop or mobile).

For these images, in order to ensure the best resolution, we recommend the following: 

• Minimum resolution: 1920×1080 px (Full HD)

• Preferred resolution: 3840×2160 px (4K)

• File format: PNG-24 (preferred) or SVG (if supported)

These resolutions can help the image stays sharp even when scaled down, especially on high-DPI (Retina) displays.

Best Practices for Sharper Images

1. Avoid Small Text in Images

   • Text below 16 pt font size often becomes unreadable when scaled.

   • If possible, add important text directly in Trellis (as live text) instead of embedding it inside an image.

2. Optimize Before Uploading

   • Export images at the highest recommended resolution.

3. Stick to High-Contrast Designs

   • Low-contrast text (e.g., light gray on white) will look blurry when scaled down. Use bold colors with good contrast for maximum readability.

4. Test Across Devices

   • Always preview your event page on both desktop and mobile. What looks fine on a large screen may be unreadable on a phone.

5. Avoid Screenshots of Text

   • Instead of uploading screenshots of flyers or presentations, recreate the content using Trellis’s text editor + images. This ensures crispness and accessibility.