Skip to main content

Recommended Image & Video Dimensions for Your SupaPass Website and app

Want your site to look amazing and load fast? Here's your complete guide to image and video dimensions that work best on SupaPass

Updated over 3 weeks ago

Introduction

To make your SupaPass website look amazing and importantly, load quickly, it’s important to use the right image and video sizes. Here’s your go-to guide for uploading visuals that look sharp, load fast, and work beautifully across all devices.

Logo Files

Type

Recommended Size or Ratio

File Type

Max File Size

Where It Appears

Brand Logo

5:1 ratio (e.g., 1000x200 px)

PNG (preferred)

≤ 0.75MB

Top left corner of your website menu

Square Logo

500x500 px

PNG or JPEG

≤ 0.75MB

Used as your app icon

Favicon

32x32 px

PNG

≤ 0.75MB

Browser tab, bookmarks, history, and search bar

💡 Tips

  • PNG is best for logos with text or transparency.

  • Keep logos lightweight for fast site loading.

  • Always center your logo with padding around the edges. However keep in mind that the more padding used, the smaller your logo will be.

Background Images & Videos

Type

Recommended Size

File Type

Max File Size

Where It Appears

Background Image

1920×1080 px (16:9 ratio)

PNG or JPEG

≤ 5MB

As a Page block background

Background Video

Max 1920×1080 px

MP4 or WebM

≤ 5MB, max 20 sec

As a Page block background

💡 Tips

  • Use short, loopable videos without sound for best results. More information and recommendations for your background video you can find here

  • Compress files without losing visual quality (tools like TinyPNG or HandBrake).

Product & Content Images

Type

Recommended Size

Format

Max File Size

Where It Appears

Product Thumbnail

800×800 px (square)

JPEG or PNG

≤ 1MB

Product listing previews

Content Feature Image

1280×720 px (16:9)

JPEG or PNG

≤ 2MB

Hero areas, video previews, etc.

Content list Image

At least 1000px wide

JPEG or PNG

≤ 2MB

Image blocks, product detail pages

💡 Tips

Stick to consistent sizing across similar products for a polished look.

Best Practices for Web-Ready Media

These recommendations are based on SupaPass-specific needs and industry best practices:

✅ Use PNG for logos and images with transparency
✅ Use JPEG for photos – smaller file size, faster loading times
Compress files without losing quality
✅ Always optimize for mobile – so your site looks great on all screens

Need Help?

If you're unsure what to upload, reach out via chat 💬 on your SupaPass Dashboard. We’re happy to help you get it right!


Did this answer your question?