Images on Apple Wallet and Google Wallet passes are an essential component that enhances the visual appeal and functionality of these digital cards. They provide a quick and easy way for users to identify and access the pass.
Terminology
Digital Pass:
A digital representation of a physical card or document, accessible through a mobile device.
Digital Business Card:
A digital version of a traditional business card, often shared via a QR code or a link.
Aspect Ratio:
The ratio of the width to the height of an image.
Default image:
When a user hasn't uploaded a profile picture, a default image like a generic avatar or a placeholder image is displayed.
Images:
For the Digital Business Card we will be using 3 images.
Icon - This is displayed when a pass is shown on the lock screen and by apps such as Mail when showing a pass attached to an email. The icon should measure 87 pixels wide x 87 pixels high.
Apple Logo - Can either be a square logo, or a rectangle logo 480 pixels wide x 150 pixels high
Google Logo - The minimum size of the logo on the Google Wallet pass is 660 x 660 pixels
Thumbnail/Profile (optional) - This should 270 pixels wide x 270 pixels high. The aspect ratio should be in the range of 2:3 to 3:2, otherwise the image is cropped.
Adding your images
Google Logo Image
In the designer click on the image area to open the image selector. This contains images previously used and an image uploader.
Click on the image upload icon and select the correct sized image from your computer.
Click "Done" when finished, and click "Save" to save the changes.
Apple Logo Image
In the designer click on the image area to open the image selector. This contains images previously used and an image uploader.
Click on the either the square or rectangle image upload icon and select the correct sized image from your computer.
Click "Done" when finished, and click "Save" to save the changes.
Profile Image (Optional)
Profile images are typically provided when the business card is issued, so there is no need to have a default on the design. However if you want to add a default images thats fine. Below you will see how to remove the current image, and add a default if required.
The default profile image is shared between both designs.
Modifying it in one will automatically update it in the other.
In the designer click on the image area to open the image selector. This contains images previously used and an image uploader.
Remove the default image - Click on the delete icon to remove the image and click "Done"
Select a default image - Click on the image upload icon and select an image from your computer, or select a default image from saved images.
Click "Save" when done to save your changes.
Test
Check how your test pass looks after making these changes
If you haven't issued a test pass and added to Wallet yet, please see here
View the pass and changes in your Wallet.
<< link to next article>>