Hero Image

What is the Hero Image?

The hero image is a wide, landscape-format image that spans the top of your booking page. It appears:

Behind the floating clinic/practitioner information card
Above the main booking content
As a visual backdrop for your branding

Image Requirements

Specifications

Property	Requirement
Aspect Ratio	16:9 (widescreen)
Recommended Size	1920 x 1080 pixels
Maximum Upload	5 MB
Final Size	Optimized to ~250 KB or less
Format	PNG, JPG, or JPEG

Uploading a Hero Image

Step-by-Step

Log in to OutSmart and visit your booking page in edit mode
Hover over the hero image area at the top of the page
Click the camera icon that appears
Select an image file from your computer
Crop the image using the cropping tool:
- Drag to reposition
- Resize the crop area as needed
- The crop is locked to 16:9 ratio
Click “Save Image” to upload

After Uploading

The new image appears immediately
Old images are automatically deleted
No page refresh needed

Choosing a Good Hero Image

What Works Well

Clinic exterior - Welcoming building or entrance
Reception area - Clean, professional waiting room
Treatment space - Equipment or therapy rooms
Nature scenes - Calming landscapes (wellness practices)
Abstract patterns - Professional textures or gradients
Team photos - Staff group shots

What to Avoid

Low-resolution or blurry images
Cluttered or busy compositions
Images with too much text
Distracting backgrounds
Photos with identifiable patients (privacy concerns)

Ensure you have rights to use any images you upload. Stock photos should be properly licensed.

Image Composition Tips

Consider the Overlay Card

Your booking page displays an information card (clinic or practitioner details) floating over the hero image. Keep this in mind:

Left side - Often covered by the overlay card
Right side - More visible, place key visual elements here
Center - Works well if the card is centered

Ensure Readability

Choose images that don’t compete with the overlay card
Avoid very bright or very dark extremes
Simple, clean backgrounds work best

Test on Mobile

Hero images are also visible on mobile devices
The crop may appear different on narrow screens
Review your page on a phone after uploading

Removing a Hero Image

To remove the hero image and return to the default:

Click the camera icon on the hero area
In the image editor modal, find the Remove button
Confirm the removal
The default background (or solid color) will display

Technical Details

Image Processing

When you upload an image:

Browser crops it to 16:9 using Cropper.js
Image is compressed if larger than 250 KB
Uploaded to secure storage
Saved to your preferences

Storage

Office pages: Stored in office preferences
Practitioner pages: Stored in practitioner preferences
Images are stored securely and served via CDN

Troubleshooting

Image Won’t Upload

Check file size (must be under 5 MB)
Ensure file is JPG, JPEG, or PNG format
Try a different image file
Refresh the page and try again

Image Looks Stretched or Blurry

Original image may be too small
Use images at least 1920 x 1080 pixels
High-resolution photos work best

Crop Area Won’t Move

The crop is locked to 16:9 ratio
You can resize but the proportions stay fixed
Drag inside the crop area to reposition

Can’t See Camera Icon

Ensure you’re logged in with edit permissions
Hover directly over the hero area
The icon appears in the top-right corner

Examples

Medical Clinic

A professional photo of your clinic’s lobby with modern furniture and plants creates a welcoming first impression.

Wellness Practice

A serene nature image (mountains, forest, water) conveys calm and relaxation.

Specialty Office

Images of your specific specialty (dental equipment, therapy room, etc.) set clear expectations.

Personal Brand

For practitioner pages, a professional headshot environment or office setting works well.

Next Steps

Office Logo - Upload your clinic logo
Profile Photos - Manage practitioner images