photo & frameA little perspective for your website.How it works
THE IMAGE PLAYGROUND

Same photo. Different frame.

See what makes the cut, before your website does.

Your uploads stay in your browser.
LIVE COMPARISON

One photo. Two screens.

Photo + overlay + text
Wide screen
your-business.com.au
Wide-screen preview of the selected photo
LOCAL PEOPLE. QUALITY WORK.Good work.
Seen clearly.
Phone
your-business.com.au
Phone preview of the selected photo
LOCAL PEOPLE. QUALITY WORK.Good work.
Seen clearly.

100% of the available width on each screen.

Overlay & text

See preview ↑

55% opaque at the left edge, fading to transparent. Text sits above the overlay.

The photo hasn’t changed. The window has.

A narrower screen shows a different part of the same image.

Take these settings to your website

Use this HTML and CSS with your original photo. The framing adapts at every width; check the text in your own layout.

THE BIT TO REMEMBER

You’re changing the window.
Not cutting up the photo.

01 / THE ORIGINAL

Your photo stays intact.

Filling a frame hides the overflow. It doesn’t delete anything from your original image.

02 / THE FRAME

Shape changes the crop.

A wide banner and a tall phone screen can’t show the same area when both are filled.

03 / THE FOCAL POINT

Choose what stays in view.

Keep a face, your work, or another detail in view. Sometimes the best answer is a different photo for mobile.