What should the dimensions of a website’s hero image be?

The dimensions of a hero image for a website depend on the design, layout, and how the image will be displayed, but here are some common guidelines:

Aspect Ratios

• 16:9 Aspect Ratio: A common choice for widescreen displays.
• 3:1 Aspect Ratio: Often used for banner-style hero images that span the width of the page.
• 4:3 Aspect Ratio: A more square-like ratio, suitable for taller hero sections.

Common Dimensions

1. 1920×1080 pixels (Full HD):
   • Works well for modern large desktop screens.
   • Maintains good quality on most devices while keeping file size manageable.
2. 1440×900 pixels:
   • Ideal for slightly smaller screens or when you want to save bandwidth without sacrificing quality.
3. 1280×720 pixels:
   • Works for laptops and smaller screens while keeping file size low.
4. 2560×1440 pixels (2K):
   • For higher-resolution displays, such as retina screens or large monitors.

Best Practices

1. Responsive Design:
   • Use CSS to adjust the image for different screen sizes (e.g., cropping or resizing).
   • Serve appropriately scaled versions using <picture> with srcset for responsive images.
2. File Size:
   • Compress the image to reduce loading time without noticeable loss of quality.
   • Aim for file sizes under 500 KB for faster page speeds.
3. Format:
   • Use modern formats like WebP or JPEG-XL for smaller file sizes.
   • PNG is suitable if transparency is needed, but it’s larger in size.
4. Height and Cropping:
   • Height is typically 400-800px, depending on the amount of text or design elements overlaid on the hero image.

How UltimateWB Helps

WebP Automatic Image Conversion & Coding Updates

With UltimateWB, you can automatically convert your image files to the WebP format and also get your coding automatically updated to use the WebP format, with the original image format as a fallback when necessary.

Preload the hero image when it is the Largest Contentful Paint (LCP)

You can easily preload images for your webpage on the Add/Edit Page of your UltimateWB website admin panel. This can make your website load a lot faster and score better on PageSpeed Insights, and even improve your SEO and search engine rankings.

CSS Media Queries

Many times your website won’t require you to use CSS media queries to serve different sizes of your hero image, depending on the user’s screen size. The preloading of the hero image, if necessary, can be enough, and actually what we are doing on the UltimateWB website to score all green and nearly all 100’s on PageSpeed Insights. But, if it is necessary for you to use CSS media queries for you hero image, you can easily add your custom code for it to your UltimateWB built-in Styles Manager, Extras section.

Let’s go over an example. The breakpoints are chosen to target common screen sizes:

.hero {
  background-image: url('hero-desktop.jpg');
  background-size: cover;
  background-position: center;
  height: 500px; /* Adjust as needed */
}

/* Tablets (768px - 1023px) */
@media (max-width: 1023px) {
  .hero {
    background-image: url('hero-tablet.jpg');
    height: 400px;
  }
}

/* Mobile devices (below 768px) */
@media (max-width: 767px) {
  .hero {
    background-image: url('hero-mobile.jpg');
    height: 300px;
  }
}

Breakpoints Explanation:

• 1024px and above → Loads hero-desktop.jpg for desktops and large screens.
• 768px – 1023px → Loads hero-tablet.jpg for tablets and medium screens.
• Below 768px → Loads hero-mobile.jpg for mobile devices.

This ensures the right image is displayed based on the screen size, optimizing performance and visuals.

Pro Tip:

You can write your CSS code in a more minified – yet user-friendly – formatting for better code optimization:

.hero { background-image: url('hero-desktop.jpg'); background-size: cover; background-position: center; height: 500px; } 
@media (max-width: 1023px) { .hero { background-image: url('hero-tablet.jpg'); height: 400px; } } 
@media (max-width: 767px) { .hero { background-image: url('hero-mobile.jpg'); height: 300px; } }

Happy designing!

Are you ready to design & build your own website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.

Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.