The hero section is the first thing visitors see on your website — it sets the tone for the entire experience and has a huge impact on whether people stay or leave. But a beautiful hero image that is not optimised correctly will slow your page to a crawl, tank your Google PageSpeed score, and hurt your SEO rankings.
Recommended Hero Image Dimensions
The standard recommended width for a full-width hero image is 1920 pixels wide — this covers all desktop monitors including wide 4K displays. For height, most hero sections range from 600 to 1080 pixels tall. A 1920×1080 hero image (16:9 ratio) is the most common choice as it matches standard widescreen monitor proportions.
However, if your hero section is not truly full-screen, you can use a smaller height. Many modern website designs use a 1920×600px hero for a cinematic banner feel rather than a full-screen experience. Match the hero image height to your actual design requirements.
Best File Format for Hero Images
WebP is the best format for hero images in 2026. It delivers 25–35% smaller file sizes than JPEG at identical visual quality, and all major browsers now support it fully. Smaller hero images load faster, which directly improves your Core Web Vitals scores (particularly Largest Contentful Paint, which Google uses to measure load speed).
If WebP is not an option, use JPEG at 75–85% quality. Avoid PNG for hero photographs — PNG produces unnecessarily large files for complex photographic images. Use our image format converter to convert any hero image to WebP instantly.
Hero Image File Size Targets
Google recommends keeping images under 200KB wherever possible. For hero images specifically, aim for under 300KB — this is achievable with a 1920px-wide WebP at appropriate quality settings. Anything over 500KB will noticeably slow your page, especially for mobile visitors on 4G connections.
Use our image compressor to reduce your hero image file size without visible quality loss. A typical 1920×1080px photograph from a camera can be reduced from 3–5MB to under 250KB with no perceptible difference on screen.
Mobile Hero Image Considerations
Over 60% of web traffic comes from mobile devices. For mobile hero sections, images are typically cropped or scaled down — but the browser still downloads the full desktop-sized file unless you implement responsive images. Use the HTML srcset attribute to serve different image sizes to different screen widths: a 768px version for tablets and a 480px version for phones alongside your 1920px desktop version.
Frequently Asked Questions
Common questions about web design image sizes and optimization.
What size should a website hero image be?
The standard hero image size is 1920x1080 pixels (16:9 ratio) for full-screen heroes, or 1920x600 pixels for banner-style heroes. Match the height to your actual design layout.
What is the best format for a website hero image?
WebP is the best format for hero images — it produces 25-35% smaller files than JPEG at the same quality. If WebP is not available, use JPEG at 75-85% quality. Avoid PNG for photographic heroes.
How large should a hero image file size be?
Aim for under 300KB for hero images. Anything over 500KB will slow your page load significantly. Use image compression to reduce file size while maintaining visual quality.
Should hero images be JPEG or PNG?
Use JPEG (or WebP) for photographic hero images. PNG is only suitable for hero images with large flat-colour areas or transparency, as PNG produces much larger files for photographs.
Compress Your Hero Images Free
Free, instant, no signup required. No watermarks.
Use the Tool Free →