# Image Requirements
## Introduction
Recommended sizes will be described as \[**width**(in pixels) x **height**(in pixels)] while you can provide larger size images with the similar ratio if not passing the size limit. Image resolution should be 300dpi.
{% hint style="info" %}
The images you provide **should not be larger than 1MB** (images will be optimized for fast loading while maintaining quality) - the system would not upload them!
{% endhint %}
### Supported Platforms
* Native Apps (Android and iOS)
* Desktop Web
* Mobile Web (for mobile phones and tablets)
For Email campaigns, check out [**this**](https://appfront.gitbook.io/portal/campaigns/attaching-images-to-coupons-and-campaigns) guide.
### General Recommendation
While different screens show the images a bit differently, our image algorithm knows how to always center the image based on the main object. \
**We recommend making sure that all images are taken as follows:**
### Image Guides
#### Centering
{% hint style="warning" %}
Centering the image subject in the 1/3 center area of both axes is essential to prevent cropped main image parts, leave the rest of the image as empty as possible.
{% endhint %}
The image is used both for **mobile phones** and **tablets** therefore **make sure you are centering the image subject area accordingly**:
![\[w/3 = image width / 3\] and \[h/3 = image height /3\]](https://3305729690-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMC9-95h4Q1CvHx7JAZ%2F-LRfKHvLlUSDrYSBUl4X%2F-LRfKKNIwVtLuyzaGxv9%2Fsplashscreen.png?alt=media\&token=5522efc3-1e4b-4d39-a909-5096bdbd3150)
## Home Page
You should select one of two variants for narrow screens: **Split Layout** or **Full screen Background Image Layout**.
The Desktop version has **Split Layout** by default.
![\[from left to right\]: Desktop, Mobile Split Layout, Mobile Full Screen Background Image Layout](https://3305729690-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMC9-95h4Q1CvHx7JAZ%2F-LNP5dQE9aPPEB_lCHtx%2F-LNPPrMvtu8AIv5QXXK5%2Fhome%20screen.png?alt=media\&token=5f7e2bd3-ea53-4a3e-8d0e-c7747e7d5b8f)
#### Narrow Screens (width up to 840px):
{% hint style="warning" %}
Leaving empty areas surrounding your subject area is essential. This is done to prevent cropped image areas on various screen sizes.
{% endhint %}
Centering the image subject in both axes is essential, else you might get the main thing you want your customers to fully see cropped.
Above is an example of the **split layout** image, which is the most recommended one, and the one supported with our [News Feed](https://appfront.gitbook.io/portal/design-and-branding/news-feed-promotional-layout) layout.
**Split Layout Image Size:** 600 x 800 (you may use larger images with a similar ratio)
**Quick Nav. and Promotions Layout Image Size:** 600 x 600
**Fullscreen Background Image Layout Image Size**: 1000 X 1400
**Desktop Layout Image Size:** 1600 x 1400
**Reminder - the image size cannot be more than 1MB!**
## Store Images
Store images are there to give your customers some sense of how your store looks like from the outside, and what they should expect to see when they come to pick up their food.
**Dimensions:** 700 X 450
## Menu Images
This will describe your menu layout, both for mobile and desktop
To see the full email campaign guide go [here](https://appfront.gitbook.io/portal/campaigns/attaching-images-to-coupons-and-campaigns).
### Menu Header
Displayed with your menu Items and your location details (phone number, address etc.).
**Desktop Menu Header Image Size:** 1920X300
**Mobile Menu Header Image Size:** 750X350
**Reminder - the image size cannot be more than 1MB!**
### Menu Items
{% hint style="info" %}
Make Sure images are centered to support most screen sizes
{% endhint %}
**Menu Item Centered image example:**
For narrow screen layout, you can choose from 2 variants of images layout for menu items. \
For desktop the default layout is "Image on top":
**Menu Items Image Size:** 1000 X 600
**Reminder - the image size cannot be more than 1MB!**
{% hint style="info" %}
If your menu is synced from your POS there is no need to upload menu item images, we pull them automatically from the POS.
{% endhint %}
## Deal Images
Should match the menu item image, since the deals are displayed on top of the menu.
**Deal Image Size:** 1000 X 600
**Reminder: the image size cannot exceed 1MB!**
## Coupon Images
Coupons are shown on your mobile apps and website in the **Rewards/Gifts** section similar to the way a menu item is shown. Therefore, they have almost the same requirements; see the guide above.
{% hint style="danger" %}
When styling your coupon **text** offer (if any), make sure that the text will be in the 1/9 center of the image in order to avoid cropping on some screen ratios.
{% endhint %}
**Coupon Image Dimensions:** 1000 X 600
**File size is limited to 400kb!**
Coupons will be shown in the following way in the apps and online ordering website:
## Icons
You can send us icons to replace our default icons!
Make sure the icon will be in **svg** format, and **only a few kilobytes.**\
\
The icon should be **'fill' based** (not 'stroke'). With this convention, we are able to color the icons according to the app-styles and view state. **Do NOT add any color to the icons** as we do not support it - it will be colored according to the app-styles.\
\
In order to convert an icon from stroke base to fill base, most of the illustration apps support ***Expand/Outline Stroke*** function.\
This function with the \ layers / merge layers function enable merging expanded stroke into one SVG path that can be colored.\
\
An example of the converted icon is attached.
* Illustrator example of how to convert stroke to outline (expand stroke):
* Illustrator example of how to combine shapes (from outline):
* Affintiy Docs on Expand Stroke:
* Affinity Designer of how to combine shapes (from expanded stroke):
## Fonts
At Appfront we also have the capability to align the platform's fonts with your brand fonts- **you can do it yourself through the portal as well**!
In the portal, simply click on Design>General Styles, and you can upload the fonts (see image below):
You can change the font anywhere in the portal where it says "**Font Family".**
#### Google Fonts
Google Fonts are free to use and share. If you are using Google Fonts, **simply type the name of the font in the relevant design component, and choose the font.**
#### **Fonts files**
If you have your own font, you can upload it in the portal in the **"Custom Fonts"** section (see image above). You'll the font for use in the drop down menu.\
\
**Supported formats:** \
TrueType Fonts **(TTF)**\
OpenType Fonts **(OTF)**\
The Web Open Font Format **(WOFF)**\
The Web Open Font Format **(WOFF 2.0)**
#### Adobe Fonts
For Adobe fonts, we'll require sharing the Typekit CSS format with us. Your designer is probably familiar with Adobe Kit (should look something like this - ), but if not, you can use the following links:
{% embed url="" %}
{% embed url="" %}
####
## Mobile Apps Requirements
This section describes the design assets we need to upload Apps for the Android and Apple stores - **apps cannot be created without these assets!**
### App Icon
**Please follow the requirements below - THESE ARE APPLE'S REQUIREMENTS; THE APP CANNOT BE CREATED IF THE ICON DOES NOT MEET THE REQUIREMENTS!**
#### **Icon Dimensions:** 1024 X 1024
**No transparent layer.**
**No rounded corners.**
**PNG\JPG format.**
### Splash Screen (iOS and Android only)
**Dimensions:** 750 X 1334px
**No transparent layer.**
**PNG\JPG format.**
Splash screens appear while native apps are launch.
{% hint style="info" %}
The Splash screen will be created automatically for all devices. Make sure that the brand or logo text is located in the main 1/9 of the image in order for it to scale well on all devices.
{% endhint %}
{% hint style="warning" %}
The Splash screen should be treated as permanent. They are not for telling your customers about a new deal or discount, for that use the **temporary splash screen** that does not require an app update.
{% endhint %}
**Example:**
{% embed url="" %}
**Reminder - the image size cannot be more than 1MB!**
## Upload app previews and screenshots (iOS)
The preview photos should be in JPG or PNG format and in the following resolutions:
6.5" iPhone - Either 1242x2688 or 1284x2778
5.5" iPhone - 1242x2208
3rd Gen iPad - 2732x2048
2nd Gen iPad - 2732x2048
It is important that the iPhone preview photos show an iPhone, and that the iPad preview photos show an iPad. Otherwise, Apple might not allow the update.
When the photos are ready, send them to the support team and we will upload them and update the new app version.
## Campaigns
### Email Campaign Images
Your customers are probably getting tons of marketing emails. \
A well thought out image will make your campaign stand out.
{% hint style="warning" %}
Centering the image subject in the 1/3 center area of both axes is essential to prevent cropped main image parts, leave the rest of the image as empty as possible.
It is recommended not to write your main campaign or coupon offering on the margins because it might be cropped on some devices
{% endhint %}
{% hint style="info" %}
**Styling advice**
Choosing an image with a **transparent** **background** generally results in a more aesthetic experience
{% endhint %}
Email campaigns template has the following appearance:
#### Email campaign image requirements
**Dimensions:** 1400 X 1000 (recommended)
**File size:** 400KB (max)
{% hint style="info" %}
**Styling advice**
**Try making the image pop out by creating a cool overlay shape on top of a transparent background. You can only use .png images for transparent backgrounds.**
{% endhint %}
### MMS (SMS with Image)
Common aspect ratios for MMS messaging are:
**Square image**: 1:1 (example would be 600x600px, 320x320px, etc.)
**Portrait image**: 9:16 (vertical image size; common size is 640×1138 px)
**Landscape image**: 16:9 (horizontal image size; common size is 1280x720px)
**Accepted image formats:** jpeg, png, gif, mp4, 3gpp, between **300kb-1MB file size.**
## Email Header Background
This header would appear in the order confirmation email, at the top of the mail.
#### **Dimensions: 1200X600 px (recommended)**
**File size: up to 1MB, png or jpg.**
