What Size Should A Hero Image Be

Bonnie Tyler isn't the only 1 who needs a hero (see reference for a fun distraction – simply be certain to come up dorsum). Your website pages and blog posts also demand a hero! A hero prototype that is.

Hero images tend to be the largest images on your site. Considering they appear at the top of the folio, they set the tone for the page and its content. The homepage hero image is your reader'southward get-go impression of your website and your business concern. So you desire to be intentional about how you choose the right one.

The right image is only the start though. You need to optimize its layout and position on the page.

If you're using the Elementor builder for WordPress, you're already ahead of the game. Elementor has fantabulous layout options to assist y'all design your pages. And so here's everything else y'all need to know.

What's a hero image?

The hero image is the banner image at the superlative of the page (or post). It typically spans the width of your page and it often takes up at least half of your site company's screen in superlative.

Let's say we're talking about a weblog post. When your company arrives, they'll see 2 things: the proper name of your mail, and the hero image. (Many times this matches your Featured Image.) That'southward your outset impression right there! The hero paradigm shouldn't just relate to the topic and message of the mail, it should enhance information technology. I'll give you lot an example.

A desktop computer, laptop, iPad, and iPhone next to each other. All device screens are on a home design webpage showing a hero image of a mid century modern chair, lamp, and table.

Photo from Adobe – georgejmclittle

Related: Don't Forget to Put These Five Pages on Your Website (Plus a Fun Bonus Page)

Choosing the correct hero image

Maybe you've written a blog mail service about practise'southward and don'ts for centerpieces at a nuptials reception. Your hero image obviously needs to accept flowers in it, and not fans at a hockey game (or something else that's unrelated). But not just any bloom photos. Wild flowers in a field won't work. Neither volition a bride holding a bouquet (close, just no cigar). Instead you'll want beautifully curated floral arrangements adorning a formal tablescape. Or maybe a florist putting together one such arrangement. Or you could fifty-fifty utilize a photo of wedding guests eating dinner with a stellar centerpiece at the centre of the table.

You likewise want to make sure the image quality is high. No iPhone 6 selfies, please! Y'all want a high resolution photograph that's not blurry. But more than chiefly, y'all desire professional photos because information technology lets your site visitor know that y'all're a professional.

Nosotros highly recommend styled shoots and working with a brand photographer to create the photos that appear on your website pages (Home, Most Us, etc.).

In short, your hero image is very important. Choose information technology wisely!

Making sure your hero image is the right size (pixels, compression, and dimensions)

We covered a lot of this in our blog post nigh image all-time practice for your website. We encourage you to read that post to larn everything you need to know about using images throughout your website, not just the hero image!

Pixels, compression, and dimensions are all important for making sure your image looks groovy across a multifariousness of different screen sizes.

Get your Pixels in Order

First, you lot desire the Goldilocks amount of pixels: non likewise few, not besides many, but merely correct. What's the right corporeality of pixels?

Typically, the largest screen size your readers volition use is 1920 pixels in width. Y'all don't demand more than ii,000 pixels. For blog posts and well-nigh website layouts, images of 1,000 or 1200 pixels are just right.

Besides few pixels means your images volition either be too small to see, or if the layout is prepare to stretch the image, it volition be blurry. Also many pixels, on the other manus, volition make your site pages slow to load. Your site visitors are lovely people, but they're not going to look around for an image to load. They'll bounciness off that page faster than LeBron James dribbles a basketball game!

Compress For Speed

Compressing your images helps with file size too. Online apps like https://compressjpeg.com/ or https://tinyjpg.com/ can reduce the size of your file without compromising quality. Smaller files load faster. Whatsoever image more than 1MB is too large, menstruation dot. The goal is to accept images that wait great simply are less than 250kb in weight. Be sure to resize the dimensions of the photo before you compress things.

Screenshot of waiting screen on tinyjpg.com while images compress

Photo from TinyJpg.com

Orientation Matters

Another component to choosing the right image, is looking at its orientation. Nigh times, hero images need to exist in landscape orientation (horizontal) and then they stretch across the desktop view fully. Portrait orientation (vertical) tin either be besides alpine and lead to scrolling for days, or else feel less of import if the prototype is fabricated smaller than full-width.

TIP: If y'all utilise Elementor (we love it!), you can fifty-fifty utilize a different paradigm as your hero for desktop brandish vs mobile displays. This is a great place to use both a landscape epitome and a portrait image depending on the device. Here'southward an example:

DESKTOP

Photo from Elementor.com

MOBILE

Photo from Elementor.com

Cropping, Overlays, and Text – oh my!

Sure, orientation helps your image look great in the overall layout of your page. Just there are more ways to brand information technology look just right! It all starts with a Focal Bespeak.

Have you heard of the Rule of Thirds when information technology comes to photography? We want to utilize that here, also! About times, your focal indicate will want to exist eye center within the frame. This helps the photo to be adaptive and cropped easily on various social media sites. Keeping the bespeak of interest in the middle will usually preserve the important parts of the prototype.

Graphic of a desktop screen with a grid on it demonstrating the rule of thirds. Graphic designed by Crystal Dove of Marketing Queen

If you want to meet text boxes on images, yous may choose to accept a photo with a focal betoken in the left 3rd then place the text box in the right third. An overlay is also a helpful way to make text visible atop a photo – merely be sure your font and colors are bold and truly legible. Otherwise your site visitors will struggle to read the words on the image, which will detract from the professionalism of your brand.

Ready, Fix, Publish!

Your epitome is perfectly sized, positioned, and laid out – then go ahead and hit publish on that blog mail service. Bonnie Tyler volition be so proud that you institute a hero!

Don't forget to zoom out and look at the webpage as a whole too. Practise the photos throughout all of your pages look like a good collage or mood board for your brand? Practise they tell a cohesive story about your brand's content? And lastly, does it all fit together for your audience?

If you need help creating everlasting first impressions through your website imagery…we're hither to help. Get in touch with usa via our Contact Folio and we'll get started!

Featured Image is by Adobe – That Stock Company