Hero images best practices
In this post, I want to overview best practices for Hero images in Shopify stores. A hero image is the first image your customers see when landing on your pages, be it a home page, a collection page, or a blog post. It is important to make this section right and as fast as possible - you can't make a good first impression if it's loading for ages.
In general, avoid using rotating carousels
The main point is: click rate of image beyond the first one is too small to justify performance hit. For e-commerce, 84% of people click on the first slide.
As every image in the carousel has to be high-res, its large size will bloat the page size like nothing else will.
There are whole host of reasons to skip on hero carousel besides the load speed too. Most conversion rate expects agree, that sliders don't offer any benefits for your bottom line. You're welcome to read more about it on ConversionXL.
Instead, use a single hero image
With bright, eye-catching graphics, powerful wording which signals your message and purpose, and an emphasized call to action.
A landscape format for desktop, a portrait for mobile
Make sure the hero image looks great on all screens. This usually means showing a portrait-oriented image on mobile and landscape on a desktop. In most cases, it's possible to use one image and manipulate it to look portrait on smaller screens. Otherwise, just use two versions of the image. Make sure only one image loads per device, not both of them for all screens.
Make clickable area 100% of the image
Even if you have a clear CTA button, it would be best from UX standpoint to make the whole area of your banner clickable. This ensures that miss-clicks don't frustrate your customers.
Keep the size down
The image should be high-resolution, yes, but it shouldn't be too large. In my experience, it's possible to have a high-res image and keep the size of it below 300-400kb.
The first impression is very important in e-commerce, particularly if you're trying to establish a new brand. A blazing fast homepage will build a great first impression. Some marketers are big fans of rotating carousels, however, data shows that the most effective thing you can do is to have a single high-quality image highlighting your value proposition. This will draw customers without hurting loading performance.