Practice Better recommends banner images (also called header or cover images) of 1280 x 200 pixels, saved as a PNG or JPG file of 5 MB or less. These images appear on your services, packages, programs, and bookings pages. Each page frames the image differently depending on the screen size, so keep your key content in the center of the image.
In this article:
- Before You Begin
- Choosing a banner Image Size and File Type
- Adding or Changing a banner Image
- Fixing a Cut-Off or Blurry banner Image
Before You Begin
A banner is the image at the top of a service, package, program, or bookings page. It is separate from your logo and your email header, so uploading a banner image does not change either one.
-
Banner image vs. Logo: You set your logo on your Logo & Branding page (Plus and Team plans). Your logo appears on your bookings page and in your client emails. To learn how your custom branding shows up and how to customize it, see Personalized URL, Logo & Branding →
- Banner image vs. Email header: You set your email header in Settings & Preferences > Notification Preferences. Changing a banner image does not change how your emails look. To learn more, see Email Branding & Customization →
Choosing a banner Image Size and File Type
- Size: Use 1280 x 200 pixels recommended.
- File type and file size: Use a PNG or JPG file of 5 MB or less (this image size is a recommendation, not a hard limit).
- Text: Keep text out of the image. Banner images stretch to fit the screen, so text can end up cut off or hard to read. We recommend using a graphic without text instead.
- Placement: Center your key content, such as a face, a logo mark, or a focal point, both horizontally and vertically.
Adding or Changing a Banner Image
- Open the edit or setup page for your service, package, program, or bookings page.
- Click the camera (photo) icon near the top of the page, under the banner image.
- Select an image from your computer.
- Click Save Changes near the top-right.
Before you share the page with clients, you can preview the booking link page on both a phone and a computer. Learn more about Sharing a Direct Booking Link →
Fixing a Cut-Off or Blurry banner Image
Q: Why Does My Banner Image Look Cut Off?
A: Practice Better frames the same banner image differently depending on the size of the device screen and the size of the browser window. A banner on a bookings page looks different on a phone than on a wide computer screen. Each screen frames the image differently, so a quick check shows you how clients see it.
To fix it: Center your key content horizontally and vertically in the image, and keep text out of the image. View the page on a phone and a computer after you upload.
Q: Why Does My Banner Image Look Blurry or Pixelated?
A: The sharpness of a banner image depends on the resolution of the image you upload.
To fix it: Upload a higher-resolution image, one with more pixels per inch, at the recommended 1280 x 200 pixel size or larger in resolution, using the same size ratio.