HB Blog 89: UI/UX Images With Appropriate Sizes And Resolutuons In Android And iOS.

Mobile technology is growing at a very pace, and mobile technology and applications attract user with its UI/UX. The user interface(UI) is one of the most important parts of any program because it determines how easily you can make the program do what you want. A powerful program with a poorly designed user interface has little value. User experience design (UXD or UED) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. UI and UX in mobile applications are depended on images that the application is developed with. It includes appropriate sizes, colors, resolutions, density, etc.

There is a standard used for specific images for place where image is to be used with appropriate sizes and resolutions. In Android, below table explains the sizes and resolutions for the different types of icons used by applications.

	MDPI (Baseline)	HDPI	XHDPI	XXHDPI	XXXHDPI
Scale	1 x	1.5 x	2 x	3 x	4 x
DPI	~ 160 dpi	~ 240 dpi	~ 320 dpi	~ 480 dpi	~ 640 dpi
App Launcher Icons	48 px	72 px	96 px	144 px	192 px
Action bar Icons	32 px (24px inset)	48 px	64 px	96 px	128 px
Small / Contextual Icons	16 px (12px inset)	24 px	32 px	48 px	64 px
Notification Icons	24 px (22px inset)	36 px	48 px	72 px	96 px

In iOS, below table explains the sizes and resolutions for the different types of icons used by applications.

Asset	iPhone 6 Plus (@3x)	iPhone 6 and iPhone 5 (@2x)	iPhone 4s (@2x)	iPad and iPad mini (@2x)	iPad 2 and iPad mini (@1x)
App icon (required for all apps)	180 x 180	120 x 120	120 x 120	152 x 152	76 x 76
App icon for the App Store (required for all apps)	1024 x 1024	1024 x 1024	1024 x 1024	1024 x 1024	1024 x 1024
Launch file or image (required for all apps)	Use a launch file (see Launch Images)	For iPhone 6, use a launch file (see Launch Images) For iPhone 5, 640 x 1136	640 x 960	1536 x 2048 (portrait) 2048 x 1536 (landscape)	768 x 1024 (portrait) 1024 x 768 (landscape)
Spotlight search results icon (recommended)	120 x 120	80 x 80	80 x 80	80 x 80	40 x 40
Settings icon (recommended)	87 x 87	58 x 58	58 x 58	58 x 58	29 x 29
Toolbar and navigation bar icon (optional)	About 66 x 66	About 44 x 44	About 44 x 44	About 44 x 44	About 22 x 22
Tab bar icon (optional)	About 75 x 75 (maximum: 144 x 96)	About 50 x 50 (maximum: 96 x 64)	About 50 x 50 (maximum: 96 x 64)	About 50 x 50 (maximum: 96 x 64)	About 25 x 25 (maximum: 48 x 32)
Default Newsstand cover icon for the App Store (required for Newsstand apps)	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 1024 pixels on the longest edge	At least 512 pixels on the longest edge
Web clip icon (recommended for web apps and websites)	180 x 180	120 x 120	120 x 120	152 x 152	76 x 76