Introduction
Digital wallet passes have become a ubiquitous tool for businesses, offering convenience and a streamlined user experience for customers. Ensuring your pass displays correctly requires an understanding of the specific image size requirements for Apple Wallet and Google Wallet.
Terminology
Pass Template
The digital design that houses all the information and visuals for your pass.
Asset
Each individual image used within the pass template.
Image Size
When discussing image size in the context of pixels, we're essentially talking about the resolution of the image. This refers to the number of pixels that make up the image's width and height.
Pixel Dimensions is the most common way to describe image size. It's expressed as two numbers separated by an "x," representing the width and height in pixels.
Examples
A 1125x432 image has a width of 1125 pixels and a height of 432 pixels.
A 180x220 image has a width of 180 pixels and a height of 220 pixels.
Aspect ratio
This is the ratio of the image's width to its height. It's often expressed as a simple fraction, such as 4:3 or 16:9.
Examples
Dimensions | Image Width | Image Height | Aspect Ratio |
660x660 | 660 pixels | 660 pixels | 1:1 |
180x220 | 180 pixels | 220 pixels | 9:11 |
1032x336 | 1032 pixels | 336 pixels | 43:14 |
1125x432 | 1125 pixels | 432 pixels | 125:48 |
1125x294 | 1125 pixels | 294 pixels | 375:98 |
Design Application
Design applications like Adobe, Pixlr and Canva are software applications used for creating and editing various types of visual content.
Key Considerations
Image Location
Apple and Google controls the size and location of images on passes. The pass layout allots a certain area on the front of the pass for each image. Images are scaled (preserving aspect ratio) to fill this allotted space. Images with a different aspect ratio than their allotted space are cropped after being scaled.
Image Quality
Use high-resolution images to ensure they appear crisp and clear on various devices. Avoid blurry or pixelated images.
Image Format
PNG
Recommended for transparency, especially if you want the logo to stand out against different background colors.
JPEG
Can also be used, but PNG is generally preferred for better image quality.
File Size
People can receive passes via email or a webpage. To make downloads as fast as possible, use the smallest image files that still look great. There is no need to make images bigger than the dimension list below as this will not improve the sharpness / clarity. The sizes are the maximum and anything above this image size will increase the pass bundle size, which in turn will make it slower for a pass to be displayed on installed and take up more memory on the phone
Color Accuracy
Ensure your images use the correct color profile (e.g., sRGB) to avoid color discrepancies.
Accessibility
Consider accessibility guidelines, such as providing sufficient color contrast.
Best Practices
Use a Design Application
Prior to uploading your images to PassKit, use tools like Adobe Photoshop, Illustrator or Canva to create and optimize your images.
Compress Images
Reduce file size without compromising quality using tools like TinyPNG or Squoosh.
Image Sizes
Small or improperly sized images may appear blurry, pixelated, or distorted on the wallet pass.
When uploading an image to the PassKit Pass Designer, you'll be prompted to crop it to the correct aspect ratio. However, it's best to create and optimize the image using the exact dimensions in a reliable design tool.
If using the PassKit API to upload an image, ensure your images have the precise aspect ratio to avoid errors. Images uploaded via the api can be urls or base64. URLs must be public links
Test Thoroughly
Test your Wallet Passes on different devices and operating systems to ensure they display correctly.
Image Details
Icon
Pass Type: Mandatory Image for all Pass Types
Aspect Ratio: 1:1
Dimensions: 87x87
The icon image is a mandatory image for all pass types. It is exclusively used by Apple Wallet. The dimensions are 87x87 and is prominently displayed in the the following places:
Lock Screen: When a pass is active and the device is locked, the icon appears on the lock screen.
Notification Center: The icon is also visible in the Notification Center when a relevant notification is received.
Mail App: If a pass is attached to an email, the icon will appear next to the pass information in the Mail app.
Important Note
When you change the icon, Apple usually doesn't immediately update the cached icon. Instead, it waits for a suitable opportunity to refresh the cache. See Caching Notes section below for more details.
Logo
Pass Type: Mandatory Image for all Pass Types
Aspect Ratio: Varies by Wallet
Dimensions: Varies by Wallet
The logo image is a crucial element of a Wallet Pass, as it represents your brand or organization. It should be clear, recognizable, and visually appealing.
Dimensions depend on the platform and logo shape.
Google Wallet:
Square Logo (Mandatory): 660x660 (15% safety margin is recommended as Google automatically circle crops the image)
Rectangular (Optional): 1280x400
The Google Wallet Square Logo is required even if a rectangular one is uploaded.
Apple Wallet:
Square: Uses the Google Wallet Square Logo
Rectangular: 480x150
Consider the logo's appearance on different background colors. To ensure optimal display, use a logo image with a transparent background. This allows the background color of the pass to shine through, enhancing the overall look.
If you're unsure about the best color combination, experiment with versions of your logo on different background colors in a design application.
Profile Image
Pass Type: Optional Image for all Membership Cards
The profile image, also known as the thumbnail image, is typically a photo of the pass holder but can be used for other images. This image is often used for identification purposes.
Hero Image
Pass Type: Optional Image for Loyalty Cards
The hero image, also known as the strip image, is a prominent visual element in both Apple and Google Wallet Passes. It's a large, high-quality image that occupies a significant portion of the pass's front face.
The hero image should be visually appealing and relevant to the pass's purpose. It can include:
Product images: Showcase the product or service offered by the pass.
Brand imagery: Reinforce brand recognition and identity.
You can use transparent images to achieve a layered effect on your Wallet Pass, allowing the background pass color to shine through certain sections. This can add depth and visual interest to your pass design.
Image Caching
Apple caches the Wallet icon to improve performance and efficiency. When you change the icon of a Wallet pass, the cached icon may not immediately reflect the change.
Here's how it typically works:
Caching Mechanism:
Icon Storage: Apple stores a cached version of the Wallet icon in its system memory. This cached icon is used to quickly display the Wallet app icon on the home screen, in the app switcher, and other places where it's needed.
Cache Updates: When you change the icon of a Wallet pass, the system usually doesn't immediately update the cached icon. Instead, it waits for a suitable opportunity to refresh the cache. This could happen when:
You restart your device.
You force-quit the Wallet app and reopen it.
You update iOS or iPadOS.
The system automatically clears the cache in the background.
Icon Appearance After a Change:
Immediate Change (Rare): In some cases, the icon might update immediately after you change the pass. This is less common, as it generally requires more system resources.
Delayed Change: More often, you'll need to trigger a cache refresh to see the updated icon. The exact steps required may vary slightly depending on the iOS version.
To Force a Cache Refresh:
Force Quit the Wallet App: Double-click the Home button (on older devices) or swipe up from the bottom of the screen and pause (on newer devices) to open the app switcher. Find the Wallet app and swipe up on its card to close it. support.apple.com.
Reopen the Wallet App: Tap the Wallet app icon on your home screen to reopen it. The updated icon should now be visible.
If these steps don't work, try restarting your device. This will usually clear the cache and force the system to reload the updated icon.