Website Hero Image Cropper
Create striking website headers. Use the free crop mode to dynamically select wide, panoramic slices of your photos for your homepage.
Last updated: August 2026
Drop your images here or click to select
Supports JPG, PNG, WebP and AVIF
A hero image is usually the largest element on a page and, on most sites, the one that decides the Largest Contentful Paint score. That makes cropping it a performance decision as much as a design one. Every part of the photo you keep but never display is weight the visitor downloads for nothing — and a hero is downloaded by every single visitor, before they have decided whether to stay.
Unlike a social banner, there is no published size to hit. Your own CSS decides the shape, and it usually decides more than one: a hero that is a wide strip on a desktop is often close to square on a phone, because the container changes shape while the image inside it is cropped by the browser to fill. So the useful question is not "what size should a hero be" but "which part of this photo has to survive every shape my layout will put it in".
That part has a name — the focal point — and identifying it before you crop is what separates a hero that works from one that needs a different file per breakpoint. Pick the one region that must always be visible, crop so it sits near the centre rather than at an edge, and the browser's own cropping at narrow widths takes from the sides you have already decided are expendable.
How to crop a photo for a website hero banner
- 1
Start from the full-resolution original
Drop it into the box above. Heroes are displayed wide, often across the full viewport, so this is the one image on a page where starting from the largest source genuinely matters.
- 2
Use free-form for your own ratio
Your layout sets the shape, so drag the frame to whatever proportions your hero container uses rather than reaching for a preset. If you support a wide desktop and a narrow mobile crop, frame for the wider one and let the focal point carry the rest.
- 3
Centre the focal point
Position the frame so the region that must always be visible sits away from the edges. Everything near the left and right edges is what a narrow viewport removes first.
- 4
Crop, then optimise
Download the crop, then reduce the file before it ships. Cropping cuts the pixel count; Online Image Optimizer for Websites and Compress Image cut the bytes.
Pro tip: Crop away the sky. Landscape photographs used as heroes almost always carry a large area of empty sky or foreground that adds nothing but occupies a third of the file, and it is the first thing a narrow layout crops out anyway. Cutting it yourself gives you a smaller file, a stronger composition, and a predictable focal point in one move. Then leave room in the frame for whatever text sits on top — a hero with a headline over it needs a quiet region for the headline to land in.
Troubleshooting: If your hero looks fine on a desktop and awkwardly cropped on a phone, the focal point is too close to an edge: browsers fill a narrower container by trimming the sides, so re-crop with the subject nearer the middle. If the page feels slow to paint, the problem is file size rather than framing — a cropped hero still needs compressing, and hero images are the usual cause of a poor Largest Contentful Paint. If the image looks stretched rather than cropped, the CSS is scaling it to fit the container instead of cropping to fill it.
The crop is one half of hero performance; the other is what you ship. How to Optimize Images for Core Web Vitals covers formats, sizing and loading behaviour, and Online Image Optimizer for Websites handles the compression. For a fixed output size, Resize Image to 1920x1080 is the common desktop hero target, and Resize Image for Blog Post covers in-article images. Need a different shape entirely? Crop Photo to Custom Aspect Ratio and the full Crop Image tool do free-form framing.
Frequently asked questions
What size should a website hero image be?
There is no published answer, because your own CSS decides it. A practical approach is to crop to the widest shape your layout uses, at a resolution comfortably above the largest width it will be displayed at, then compress hard. The shape matters more than a specific number, since the browser resizes whatever you give it.
What aspect ratio works best for a hero banner?
Whatever your hero container is. Wide, shallow ratios are common on desktop layouts, but the same file usually has to survive a much squarer container on mobile. Crop to the wide shape with the focal point centred, and the narrower crop the browser performs takes from the sides rather than from your subject.
Does cropping a hero image improve page speed?
Yes, and often significantly. Cropping removes pixels, and fewer pixels means a smaller file before any compression is applied. Since the hero is usually the Largest Contentful Paint element and loads for every visitor, it is the single image on a page where this has the most measurable effect.
Why does my hero image get cut off on mobile?
Because the container changes shape while the image fills it, so the browser crops the sides to fit. That is expected behaviour, not a bug. The fix is compositional: crop so the region that must always be visible sits near the centre, leaving the outer edges as the part you are willing to lose.
Are my images uploaded when I crop them here?
No. The crop runs entirely in your browser on your own device, so nothing is uploaded, stored, or logged — useful when the hero is unreleased product photography or client work under embargo.
Looking for the full-featured version? Open the main Crop Image tool.
Related Tools & Resources
Crop Photo with Custom Aspect Ratios
Crop photos to any custom dimension or aspect ratio with free-form mode. Drag handles to frame your image exactly how you want, right in your browser.
Resize Image for Blog Post – Fast Web Images
Resize blog images for faster page loads and better SEO. Set widths to 800px, 1200px, or custom sizes in your browser—no upload, no watermarks, free.
Website Image Optimizer – Improve Your SEO
Boost your Google PageSpeed scores by optimizing every image on your site. Secure, free, and works entirely on your computer.
Crop Image – Full Tool
Interactive cropping with ratio presets, free-form mode, and rotation.
Resize Image to 1920x1080 – Full HD
Instantly upscale or downscale any image to a perfect 1920x1080 resolution. It's the quickest way to get Full HD results for wallpapers and presentations.