How do I cut a wide website banner out of a photo I shot in portrait on my phone?

How much of the photo survives

A wide band keeps the photo's full width but only part of its height. On a 3000 × 4000 photo, 1688 of the 4000 pixels of height survive, less than half the picture. Most of what you shot will be removed, and where the product sits in the frame decides whether the photo works as a banner at all.

Steps

1. Open the photo in the Image cropper and pick 16:9.
2. Drag the box vertically until the product is inside it, or type a value in 'Y from top (px)' for an exact position.
3. To bring the product closer, shrink the box from a corner handle; the 16:9 ratio holds.
4. Check the preview, choose JPEG for a photograph, then download.
5. Open the file in the Image resizer and type the width your theme needs, with the ratio locked.

For example, resizing the 3000 × 1688 result to a width of 1920 with the ratio locked gives a height of 1080. Check your theme settings for the width and ratio it shows the banner at, since themes differ.

Tips before you shoot

• If you know you need a wide banner, turn the phone sideways. You then keep most of the photo instead of less than half.
• If you have to shoot in portrait, leave plenty of room above and below the product and keep it in the middle, so the band can hold it.
• Many themes put text or a button over the banner and may trim its sides on phone screens. Keep the product away from the left and right edges.
• A tall product such as a perfume bottle or a dress may not fit in a 16:9 band from a portrait photo. Try a less wide ratio with 'Custom', if your theme allows it.

Why not stretch the photo instead

Stretching a tall photo into a wide one visibly distorts the product, making it look wider than it is. Cropping keeps the product's real shape and simply chooses the part that suits the band.