How to Improve App Performance with Quality images?

The probability for an eCommerce store to contain images are very high. Rather than using 100 words to explain the product, a single appropriate image could catch the customer’s eye. 

This article mainly concentrates on how to improve the performance of your app by adjusting the size of the images of your app. 

App Icon

To set an app icon for your app:

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Update App and a new Update App page opens

Here you can add or change the app icon. 

Uploading app icon and name

Note:

  1. The recommended size for the app icon is 512 x 512 pixels
  2. The image that you choose should be of PNG format

Splash Screen

You can set the logo of your app as splash screen or add any other images carrying the name of your app to this screen.

To set the splash screen:

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Update App and a new Update App page opens

Step 3: Select Misc from the options displayed on the sidebar. Here as you scroll down, there is an option to add Splash Screen Logo

Step 4: Choose an image of size 350 x 500 pixels and PNG format to add

Note: If you do not want to set an image for the splash screen, the logo of your app will be automatically set as the default image.

Uploading a splash Screen Logo

Drawer Header

The navigation bar contains the Drawer Header. The drawer header is the top portion within the navigation bar. A drawer header contains elements such as a login icon or user profile and the multi-language option.

To set a background image for drawer header:

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Update App and a new Update App page opens

Step 3: Select Misc from the options displayed on the sidebar. Here as you scroll down, there is an option to add Drawer Header

Step 4: Choose an appropriate image of size 600 x 300 pixels and of PNG format

Uploading a Drawer header to App

Toolbar Logo

A toolbar logo can be set for your app. This space is utilized for displaying your product name or logo. Every In-app pages of your app will carry this name at the top of the In-app page.

To add a Toolbar logo, toggle the Show Toolbar Logo and follow the below steps:

Uploading a Tool Bar Logo

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Update App and a new Update App page opens

Step 3: Select Misc from the options displayed on the sidebar. Here as you scroll down, there is an option to add the Toolbar Logo

Step 4: Choose an appropriate image of size 180 x 40 pixels and of PNG format

Push Notification Icon

Appmaker brings a lot of features which can be used to enhance your app, push notification is one among them. An icon can be set for push notification and this icon will be displayed along with the push notification.

To add a logo for push notification:

Uploading Push notification icon

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Update App and a new Update App page opens

Step 3: Select Misc from the options displayed on the sidebar. Here as you scroll down, you can see the option to add the push notification logo.

Step 4: Choose an appropriate image of size 152 x 152 pixels and of PNG format

Login Page logo

A logo can be added to the login page.

To add a Login Page:

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Update App and a new Update App page opens

Step 3: Select Misc from the options displayed on the sidebar. Here as you scroll down, there is an option to add Login page logo

Step 4: Choose an appropriate image of size 450 x 150 pixels and of the PNG format


Uploading login page logo

Login page background

A logo can be added to the login page.

To add Login page background, toggle the Show Login Page Background Image button and follow the below steps:

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Update App and a new Update App page opens

Step 3: Select Misc from the options displayed on the sidebar. Here as you scroll down, there is an option to add Login page Background Image

Step 4: Choose an appropriate image of size 720 x 1280 pixels and of the PNG format

Images in In-App pages

To upload a banner image to your In-app page, follow the below steps:

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Customize App and select In-App Pages

Step 3: Click Add new page, the new page appears

Step 4: Click Add Block 

Step 5: Select Banner from the Common Blocks drop-down

Step 6: Choose an image in PNG format for the banner either from the WordPress media or upload a new customized image by clicking Upload image. PNG images of size 700 x 400 pixels are most appropriate.

Step 7: To edit the image used in a block, click on the block and select Replace the image from the More Options

Slider

A Set of images and corresponding actions can be added to the Slider. 

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Customize App and select In-App Pages

Step 3: Click Add new page, the new page appears

Step 4: Click Add Block 

Step 5: Select Slider from the Common Blocks drop-down

Step 6: Click Add Appmaker-Slider to display multiple Sliders

Step 7: Choose an image in PNG format for a Slider either from the WordPress media or upload a new customized image. The recommended size of an image is 700 x 400 pixels

Grid

Grid widget can contain a total of five items per line and you can reset this option. Follow the below steps to upload or change a grid image.

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Customize App and select In-App Pages

Step 3: Click Add new page, the new page appears

Step 4: Click Add Block 

Step 5: Select Grid from the Common Blocks drop-down

Step 6: Click Add Grid item to display multiple items as Grid

Step 7: Choose an image of size 400 x 400 in PNG format for each Grid item either from the WordPress media or upload a new customized image

 You can set a menu within the In-app pages that you create. To create a new menu, follow the below steps

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Customize App and select In-App Pages

Step 3: Click Add new page, the new page appears

Step 4: Click Add Block 

Step 5: Select Menu from the Common Blocks drop-down

Step 6: Click Add Menu Item to display multiple menu items

Step 7: Choose an image of size 512 x 512 and in PNG format for each menu item either from the WordPress media or upload a new customized image

Image Scroller

In Image Scroller, you can showcase different products image in a single row and set an action for each element in the row.

To learn how to add the image to each product follow the below steps:

Step 1: Login to your Appmaker Dashboard and go to Manage

Step 2: Click Customize App and select In-App Pages

Step 3: Click Add new page, the new page appears

Step 4: Click Add Block

Step 5: Select Image Scroller from the Common Blocks drop-down

Step 7: Choose an image of size300 x 300 and in PNG format for each Grid item either from the WordPress media or upload a new customized image

You can give a title for your image scroller and choose to display it or not. Here, you have to choose what has to be displayed in the scroller and you can choose whether to display or hide the View more button.


Create your eCommerce app with Appmaker now!