Prepare a hero image that works in the real page layout

A hero image often appears beside or behind the main heading. Check where the subject, text and controls sit at different widths before choosing an export. A face near the edge of a desktop panorama may disappear in a tall phone crop. A larger file will not fix that framing problem. Make a separate composition when the layout needs one, using your design or photo editor.

This tool can fit or crop a supplied photograph, but it cannot extend the background, remove objects or create empty space for copy. Do not rely on sharpening to make a busy background suitable for text. The website still needs adequate contrast and a layout that keeps the message readable. Keep the source master so you can create a different phone crop without repeatedly editing the already compressed desktop delivery file.

The starting settings fit within 1920 by 1920 pixels and export WebP with Light sharpening. That box is an illustrative bound, not a requirement for every hero. Measure the image's actual layout role and provide suitable candidates through your website. Fit within preserves the source composition, while Exact size gives a specific crop that you should review carefully.

Inspect faces, architectural edges, gradients and any fine detail important to the page. Compare the WebP with a JPEG at equivalent dimensions instead of assuming a particular extension always wins. Keep PNG for a transparent graphic when needed, since the current WebP export here uses a white background. Avoid enlarging a small stock preview: use the licensed full-resolution source. A byte cap can force quality or pixel reduction, so judge the exported dimensions and visible result together.

The file is only one part of hero performance. Your site must request the right source early enough, reserve its space and avoid delaying a visible hero behind unrelated work. An above-the-fold hero is commonly a major visual element, so check its actual loading behavior rather than applying lazy loading automatically. The converter cannot change your page markup, content system or hosting configuration.

Place a candidate in the real draft and test the phone and desktop layouts. Check the selected file in browser tools and measure the page under realistic conditions before claiming an LCP improvement. Verify that the heading remains readable and that the hero does not shift the layout when it appears. Keep useful alternative text if the picture conveys information, or appropriate decorative treatment if it does not. Only then apply the export choices to related page banners. The image processing itself stays on your device.

A useful first test is the complete opening screen with its actual heading, button and navigation in place. Inspect both the widest desktop crop and the narrowest supported phone crop. Look for the subject disappearing, text crossing a busy area and important content falling behind a control. If the photo works only when the heading is removed, revisit the layout or source composition before compressing further. Keep a separate phone crop when the implementation supports one and the subject needs it. The final file should support the page's message as well as its loading budget, rather than simply looking good alone.