> For the complete documentation index, see [llms.txt](https://docs.rafflex.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rafflex.io/helpful-info/image-size-guide.md). # Image Size Guide To keep your raffle site looking great and running smoothly, it's important to use the right image sizes. This quick reference guide shows the recommended size, file type and upload limit for every im Using the right image sizes keeps your site looking sharp, stops images being awkwardly cropped, and helps your pages load quickly for customers on their phones. *** ### The Basics * **File types:** JPG or PNG for almost every image upload. Use **PNG** when you need a transparent background (logos and icons). * **File size limits:** most uploads accept files up to **872KB**, but a few (such as homepage slider and gallery images) have lower limits. Check the tables below. * **Dimensions:** the sizes below are recommendations for the best look, not strict rules. The upload forms do not force exact sizes, but sticking to these keeps everything sharp and consistent. {% hint style="info" %} **What does 872KB mean?** KB stands for kilobytes, a measure of file size. 872KB is a little under 1MB. A typical photo straight from a phone or camera is often several MB, so it will usually need shrinking first. See [How to Make Your Images Smaller](#how-to-make-your-images-smaller) below. {% endhint %} *** ### Branding Images These are uploaded in the admin panel under **Settings**, then **Branding** (the **Branding & Theme** page). See [Add Your Logo](/customise-your-site/add-your-logo.md) for step by step instructions. | Image | Recommended size | File type | Max file size | Notes | | ----------------------- | ---------------------------------------- | ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | | **Site Logo** | 480 x 120 pixels, transparent background | PNG or JPG | 872KB | Required. A wide logo works best. Trim away any empty space around the edges. | | **Email Logo Override** | Same as your Site Logo | PNG or JPG | 872KB | Optional. Emails have a white background, so use a darker version of your logo. If left empty, your Site Logo is used. | | **Custom Icon** | 100 x 100 pixels, transparent background | PNG | 872KB | Optional. Replaces the coin icon next to a customer's credit balance, and appears on some card styles' progress bars. | *** ### Other Site Settings Images | Image | Where to find it | Recommended size | File type | Max file size | Notes | | -------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------- | ------------------------ | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **SEO Default Image** | **Settings**, then **SEO** (the **SEO & Analytics** page), **SEO Meta Data** section | 1200 x 630 pixels | PNG or JPG | 872KB | Required. The preview picture shown when your site link is shared on social media or in messaging apps. | | **Fav Icon** | **Settings**, then **SEO**, **Site Icons** section | Square, at least 180 x 180 pixels | PNG (recommended) or JPG | 872KB | The small icon shown in browser tabs and when a customer saves your site to their phone's home screen. | | **Marquee Separator Icon** | **Settings**, then **Marketing** (the **Marketing & Social** page), **Banners & Promos** section | 24 x 24 pixels, transparent background | PNG | 872KB, but aim for well under 100KB | Optional. The small icon shown between messages in your scrolling banner. Leave empty to use the default. See [Top Banner Text](/marketing/website-tools/top-banner-text.md). | {% hint style="info" %} **Seeing a preview of an old SEO image on social media?** Social networks save a copy of your link preview for a while. After changing your **SEO Default Image**, it can take some time before the new picture appears when your link is shared. {% endhint %} *** ### Competition Images These are uploaded when you create or edit a competition (in the left-hand menu, open the **Competitions** group). See [Create a Competition](/create-your-first-raffle/create-a-competition.md) for the full walkthrough. | Image | Recommended size | File type | Max file size | Notes | | ------------------ | ------------------ | ----------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Featured Image** | 1080 x 1080 pixels | PNG or JPG | 872KB | Required. The main square image on competition cards and the competition page. | | **Gallery** | 1080 x 1080 pixels | PNG or JPG | 872KB each | Optional. Extra photos of the prize. You can upload several and drag them into order. | | **Slider Image** | 1920 x 1080 pixels | PNG or JPG | 872KB | Optional. A wide image used when the competition appears in a homepage slider. If you do not add one, the Featured Image is used instead. | | **Portrait Image** | 600 x 800 pixels | PNG or JPG | 872KB | Optional. A tall image used by side scrolling competition displays, such as the **Product horizontal grid** page block. If you do not add one, the Featured Image is used instead. | | **Featured Video** | 480p or lower | MP4 or WebM | 872KB | Optional. A short looping video shown on competition cards instead of the Featured Image. Aim for 3 to 5 seconds at 15 to 24 frames per second. | {% hint style="success" %} **Featured Video tips.** 872KB is very small for a video, so keep it short and simple. A few seconds of the prize slowly turning or a quick close up works brilliantly. Export at a low resolution (480p or below), remove the sound, and use a video compressor if the file is still too big. Always upload a Featured Image as well. {% endhint %} #### Instant win prize images | Image | Where to find it | Recommended size | File type | Max file size | | --------------------------- | ---------------------------------------------------- | ---------------- | ---------- | ------------- | | **Instant win prize image** | When adding or editing instant wins on a competition | Square | PNG or JPG | 872KB | Prize images are usually shown quite small, so a simple, centred square photo of the prize works best. See [Add Instant Wins](/create-your-first-raffle/add-instant-wins.md). *** ### Homepage and Page Builder Images These are uploaded inside the blocks you add to your pages (in the left-hand menu, open **Pages** under the **Content** group, then edit a page). See [Set Up Your Homepage](/customise-your-site/set-up-your-homepage.md) for how blocks work. | Block | Upload field | Recommended size | File type | Max file size | How many | Notes | | ----------------------- | ------------------ | ------------------------------------ | ---------- | ------------- | -------- | --------------------------------------------------------------------------------------------- | | **Sliders** | **Featured Image** | 1920 x 1080 pixels | PNG or JPG | 800KB | 1 | Only shown when the **Slider Style** is **Big Slider** or **Custom Twig (Advanced)**. | | **Big picture content** | **Image** | 1920 x 1080 pixels | PNG or JPG | 800KB | 1 | A large, wide image shown alongside your text and button. | | **Winners display** | **Gallery** | 1080 x 1080 pixels | PNG or JPG | 872KB each | Up to 6 | Images are shown as squares, so keep all of them the same square size for a neat grid. | | **Gallery** | **Gallery** | Your choice (keep them all the same) | PNG or JPG | 512KB each | Up to 32 | Images keep their own shape, so using the same size for every image gives the tidiest layout. | {% hint style="warning" %} **Notice the lower limits.** The **Sliders** and **Big picture content** images are limited to **800KB**, and **Gallery** block images to **512KB** each. Large, wide images can easily go over these, so compress them before uploading. {% endhint %} *** ### Instant Win Game Artwork Many of the instant win games let you upload your own artwork, such as a custom wheel surround for Spin the Wheel or custom reel and background images for Slots. Where a game takes its own artwork, the recommended sizes are listed on that game's page. * [Spin the Wheel](/instant-win-games/spin-the-wheel.md) * [Slots](/instant-win-games/slots.md) * [All instant win games](/instant-win-games/instant-win-games.md) *** ### How to Make Your Images Smaller If an image is over the limit, or your pages feel slow to load, run it through a free image compressor before uploading. These tools shrink the file size while keeping the picture looking almost identical. {% embed url="" %} Quick and easy way to reduce image size {% endembed %} {% embed url="" %} More control over file size and quality settings {% endembed %} #### Tips for smaller, sharper images 1. **Resize first.** Shrink the image to the recommended dimensions before compressing. A 4000 pixel wide photo is far bigger than any screen needs. 2. **Use JPG for photos.** Prize photos are usually much smaller as JPG than PNG. 3. **Use PNG for logos and icons.** PNG keeps sharp edges and supports transparent backgrounds. 4. **Compress, then check.** After compressing, look at the image at full size to make sure it still looks good. {% hint style="info" %} **Upload not working?** If an image will not upload, the most common reasons are that the file is over the size limit, or that it is in a format that is not accepted (for example HEIC photos from an iPhone, or WebP images saved from websites). Convert the image to JPG or PNG, compress it, and try again. {% endhint %}