Finding the right aspect ratio and cropping can get confusing when sizing a hero image. Banner hero images aren't the same as full-screen images, and every image has to scale to fit the space. You also have to consider that no one browses in exactly the same way. Personally, my screen is usually zoomed in to 120%, but others may have dozens of tabs open that are all different sizes.
The ideal size for a mobile hero image is 800 x 1,200 pixels.
While it's important to consider how your hero image looks on a desktop, you can't ignore the mobile experience. Nearly 55% of global website traffic in 2021 is generated on a mobile phone.
Your hero image design must be responsive and fit a vertical (phone) and horizontal (tablet) orientation. Dynamic hero images, like videos, do well on a desktop, but they often have to be swapped out for a static image for mobile. Videos take more time to load, and no one wants to take a massive hit to their data plan just to see your site.
Hero Section WebsiteYou want to compress your hero image if you have a large file size (anything over 1MB is too big). You can use sites like TinyJPG, Compress JPG, or Adobe's Photoshop Compressor to decrease the size without reducing quality. Just make sure to get the dimensions right beforehand or the image may appear blurred or stretched.
When sizing a hero image, check your Google analytics to see the typical screen resolution of your website visitors. Then, design with that target audience in mind. Just remember to test out your hero image on multiple browsers, screens, and phones to see how it scales. Once you have the dimensions right, itac's time to work it into your web page using HTML and CSS.
HTML is a coding language made up of elements used to give structure to a web page. It creates order and lets you embed content (like hero images) into a site.
Creating a hero image with HTML ensures your visual appears on a web page, while CSS makes it look good on a screen. Both require coding skills, so you may need to brush up on your HTML and CSS knowledge or enlist the help of a developer.
Design Landing PageThe main things to keep in mind are:
The hero image needs to be centered.
The text needs to be easy to read.
It has to look great on all screen sizes.
The image should cover the entire viewport.
Follow these steps to set up an eye-catching hero image. Note: The examples below include HTML elements and CSS rules, but I'll explain the difference between the two later on.
If engaging visuals are the sprinkles on top of every great design system, a hero image is the shiny, red cherry. It draws your eye in and makes you want more.
You want your hero image to look good no matter the screen size. Setting media queries allows you to create parameters so your image is responsive at a particular screen width.
Congratulations, your HTML structure is set! Test out how the image, text, button, margins, padding, and centering look on different screen sizes. If something seems off, comb through your code to see if you can find issues. For detailed instructions on creating and troubleshooting with HTML, check out this article from DeveloperDrive. All look good? It's time to add style with CSS.
While HTML creates order, CSS (Cascading Style Sheets) adds flair. It's a rule-based language that complements the HTML elements by applying stylistic effects. For example, CSS lets you turn the text in a hero image header bright yellow so it pops against the purple background.
If you don't include CSS within your hero image, the HTML elements default to the basic browser properties like the example below.
By including CSS rules, you can develop an image that draws in visitors instead of scaring them away. The above HTML examples include CSS rules, but let's walk through a basic design so you can work it into your own image.
Hero ImageThe following template outlines the basic HTML and CSS needed to create a full-screen hero image. You can adjust the style by changing the rules under the .hero or .hero-text elements, like font-family, color, border, or padding-top.
Once the structure is in place, it's time to personalize your image. Add an image, choose a custom font, craft a header and subheader, and create a button with an enticing CTA. If you want to add a filter to your background image (without applying it to the text), DeveloperDrive recommends including the filter before your .hero-content code.
Notice how the width and height under the .hero section are set to 100vw and 100vh. This ensures the image fits the entire viewport, both vertically and horizontally, so it spans the whole screen.