A good hero image can elevate your traffic and conversions by making people want to interact with your site. Animation, carousels, and scroll-triggered effects are ways to flex your creativity beyond typical stock photography. But a bad image can bring down an otherwise great design. Off-brand visuals, large files that slow loading speed, and meaningless copy can ruin the user experience.
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.
You 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.
Hero ImageHTML 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.
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.