PDFTechnician
Website images

Resize website hero image

Prepare a wide website hero image locally. Crop for the right shape, reduce file size, and export in a practical web format.

Open hero image resizer

Short answer

A good hero image is wide enough to look sharp but not so large that it slows the page. Many sites prepare hero images around 1600 to 2400 pixels wide, then use responsive layouts to display them at different sizes.

The exact size depends on the design. A full-width desktop hero, a mobile banner, and a blog header do not need the same crop or file size. The most important thing is to keep the subject framed well and export a practical web format.

What size should a hero image be?

There is no single perfect hero size, because layouts vary. Many websites use wide images around 1600 to 2400 pixels wide, then serve them responsively. The goal is to keep the image sharp enough for its display area without making the file so large that it slows the page.

Use WebP for most hero images, JPG for broad compatibility, and PNG only when transparency or crisp flat graphics matter. Keep the subject away from the extreme edges so the image still works on mobile crops.

Hero bannerUse a wide crop and keep important detail away from edges.
Blog headerBalance quality with page speed and thumbnail reuse.
Product featureKeep the product clear on both mobile and desktop crops.
Background imageA slightly softer image may be fine behind text overlays.

Steps

1. Add imageChoose your source image from your device.
2. Select hero presetUse a wide crop and adjust the framing.
3. DownloadExport a lighter web-ready image.

Privacy note

Hero images can be unpublished brand, product, or client assets. PDFTechnician resizes them locally in your browser and removes hidden metadata on export.

Common mistakes

Do not upload a camera-original image straight into a hero section. It may be far wider than needed and slow the page. Do not crop too tightly either; mobile and desktop layouts may show different parts of the image.

Be careful with text inside images. Text can become tiny on mobile, be cropped by the layout, or hurt accessibility. Put important text in HTML whenever possible.

Before and after example

Before: a 6MB landscape photo is used as a website hero and makes the page feel slow. After: the image is cropped to a clean wide frame, resized to a practical width, exported as WebP, and checked on mobile.

Related tools and guides

Hero image size tool · Convert image to WebP · Compress image under 500KB

FAQ

What size should a website hero image be?

It depends on the design, but many hero images are prepared around 1600 to 2400 pixels wide and then served responsively.

Which format is best?

WebP is usually best for web performance. JPG is reliable for photos. PNG is useful for transparency or crisp graphics.

Can I resize without uploading?

Yes. The resize process runs locally in your browser.