A banner or hero image is usually the first thing a visitor sees, loaded before anything else on the page has a chance to render, which makes its size doubly important: it needs to be wide enough to look good across a range of screen sizes, and light enough that it does not stall the whole page while it loads.
Getting both right is mostly a matter of choosing sensible dimensions for the aspect ratio your design needs, then compressing carefully with the Image Compressor.
Steps
- Check your site's design for the banner area's actual displayed width and height, or a reasonable estimate if you do not have exact figures.
- Crop your source image to match that aspect ratio, since a banner is typically much wider than it is tall.
- Resize to roughly 1.5–2× the largest width the banner will display at, to account for high-resolution screens.
- Compress at a level that keeps the file well under 300–400 KB for a page-critical image like this, checking that visible quality holds up at the actual display size.
Why banner dimensions need extra headroom
A hero image often needs to stretch the full width of a browser window, which can be considerably wider than a typical content image ever needs to be — a large desktop monitor can be well over 1900 pixels wide, and the image needs to stay sharp across that range as well as on a much narrower phone screen. Sizing the source image generously enough to cover the widest realistic display width, while still compressing it carefully, is the balance to aim for.
Choosing an aspect ratio that works across devices
A very short, very wide banner ratio that looks dramatic on a desktop screen can end up either impractically short or awkwardly cropped on a narrow phone screen, depending on how your site's layout handles the responsive resize. It is worth checking how your chosen banner ratio actually looks on a phone-width preview, not just on the desktop screen you are likely designing on, since the two can behave quite differently even with an image that is technically the correct file.
Why file size matters more here than almost anywhere else on a page
A hero image usually loads before a visitor has scrolled, read anything, or formed an impression of the page — it often is the first impression. A slow-loading hero image delays everything a visitor sees, which makes it one of the highest-priority images on the entire page to keep genuinely light, even more so than images further down the page that a visitor may not reach for several seconds regardless of load time.
Choosing between JPG and WebP for a banner specifically
For a photographic banner image, WebP typically achieves a meaningfully smaller file than JPG at equivalent visual quality, which matters more here than for a less critical image, given how much a hero image's load time affects the overall page experience. If your site supports WebP, converting your final banner image with JPG to WebP after resizing and before final compression is worth the extra step for an image this important to page performance.
Testing the result at actual display size, not just in an editor
An image can look sharp when viewed at full size in an editor but noticeably different once it is actually placed into the banner area on a live or preview version of the page, where it may be displayed larger or smaller than you were viewing it during editing. Always check the final result in the actual page context before considering it finished, since that is the only view that reflects what a real visitor will see.
Handling text overlaid on the banner image
If your design places text over the banner image — a headline, a call to action — keep in mind that the image needs to work as a background across a range of screen widths, with the text remaining legible against whatever part of the image sits behind it at each size. This sometimes means choosing a photo with a simpler, less busy area where the text will typically sit, or applying a subtle darkening overlay behind the text, both of which are worth considering before finalising the crop and resize.
Revisiting the banner when the site's design changes
If your site's layout is ever redesigned or the banner area's dimensions change as part of that, it is worth treating the banner image the same way as any other design asset that needs revisiting, rather than assuming an old banner sized for a previous layout will automatically still look right. Keeping the original high-resolution source photo, as covered earlier, makes this a quick re-crop and re-export rather than a search for a new source image entirely.
What to do if the banner image needs to change seasonally or for a campaign
Sites that swap their banner image periodically — for a seasonal promotion, a campaign, a rotating set of featured content — benefit from a documented set of target dimensions and a consistent compression process, so each new banner is prepared the same way rather than each one being resized and compressed slightly differently by whoever happens to be updating it that time. A short written note of the exact dimensions and compression approach that worked well previously saves re-deriving it every time a new banner is needed.
Frequently asked questions
What is a typical file size target for a hero image?
Aiming for well under 300–400 KB is a reasonable general target for an image this prominent, though the specific number depends on your site's overall performance goals.
Should the banner image be the exact width of the browser window?
Size it generously enough to cover the widest realistic screen width at good quality, rather than trying to match one exact width, since visitors will view it across many different screen sizes.
Does a banner need a different version for mobile?
Many sites do serve a different, often taller-cropped version for mobile screens, since a very wide desktop banner ratio can look awkward or lose its subject on a narrow phone screen.
Is WebP always better than JPG for this use?
It generally achieves a smaller file at similar quality, though check your specific site platform's WebP support before relying on it as your only format.
Will compressing the banner heavily hurt visible quality on a large screen?
It can, since a banner is often displayed larger than most other images on a page, making compression artefacts more noticeable — use a lighter setting for this specific image than you might for a smaller, less prominent one.
Should I resize before or after adding any text overlay?
If the text is added within your site's own code rather than baked into the image file, resize the plain background image first; if the text is part of the image itself, finalise the whole composed image before your final resize and compression pass.
How do I know how wide to make the banner if I do not have exact design specs?
1920 pixels wide is a reasonable general target that covers most common desktop screen widths comfortably, with a separate, differently cropped version for mobile if your site serves one.
Is the tool free and private?
Yes. No sign-up, no watermark, and files are removed from the server automatically about an hour after processing.