Skip to main content
Optimizing Images

Image Requirements for Apple and Google Wallet Passes

Paul Tomes avatar
Written by Paul Tomes
Updated in the last hour

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.

Logo on different color backgrounds

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:

  1. 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.

  2. 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.

Did this answer your question?