How to Resize a Photo for a 16:9 Website Banner

A wide website banner often uses a 16:9 shape, such as 1920 × 1080 or 1280 × 720. But a portrait photograph or square product picture does not naturally fit that rectangle. Simply typing the new width and height into a resizer can produce awkwardly stretched people and products.

The better approach starts with composition.

Choose the right source image

A landscape photo with plenty of space around the main subject is easier to prepare as a banner than a tight portrait. Think about where the website places its headline and button. If the text sits on the left, you may want the subject toward the right so the two do not compete.

VeyraPixel changes dimensions and format; it does not move subjects or crop photographs. Choose your composition before final export.

Understand the ratio

16:9 means every 16 units of width correspond to 9 units of height. Examples include 1920 × 1080 and 1280 × 720. Both have the same shape, but the second has fewer pixels and will generally need fewer bytes for similar content and encoding settings.

If you start with a 3000 × 2000 picture (3:2) and fit it inside a 1920 × 1080 preset with proportions locked, the result will fit within those bounds rather than magically become exact 16:9. To fill a true 16:9 banner, crop or pad in another editor first.

Export the web-ready version

Once the composition is right, open the file in VeyraPixel. Pick the banner dimensions supported by your website, keep proportions locked when the source already has the correct ratio, and choose JPEG or WebP for photographic artwork. Compare file sizes and view the image on a real phone as well as a larger screen.

What if the mobile banner looks wrong?

Some themes crop wide desktop banners when showing them on narrow screens. An image can be technically correct at 1920 × 1080 and still lose its subject on mobile. Check the theme's image display behavior. You may need a separate mobile-specific artwork rather than just another export of the desktop banner.

Also avoid baking essential text into a large image when editable HTML text is feasible. Real text is easier to read, more accessible, and more flexible across devices.

Final checklist

Keep the source uncropped until you decide on the framing; verify the output ratio; compare the compressed version at actual display size; and test the live banner across devices. If it looks squeezed, restore the original and fix the composition instead of pushing the width and height harder.

For more help with site performance, read preparing images for a faster website.

Why centered subjects often fail in wide crops

A portrait subject centered in a phone photograph can become awkward when placed in a banner. Cutting the image to 16:9 may remove the top or bottom of the subject. Stretching it creates unnatural proportions. The cleanest solution is usually choosing a source photo that has genuine horizontal space, or extending and composing the canvas in a separate editor.

For a 1280 by 720 banner, use a source that already has a matching 16:9 ratio when possible. If you publish one version for desktop and another for mobile, verify both versions in the actual theme. A perfect desktop preview says little about where a mobile theme will place the image.