Contents
What is mobile hero image?
A Mobile Ready Hero Image (MRHI) is a representation of a physical pack that has been optimised for online shopping, especially on mobiles. Hero images may differ from a packshot, yet they should maintain the elements that make it recognisable as a representation of the product.
What makes a hero image?
According to Wikipedia: Hero image refers to a large web banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual element a visitor encounters on the site; it presents an overview of the site’s most important content.
How do you choose a hero?
7 Tips for Choosing a Hero Image That Will Slay the Design Game
- Use directional cues. Guide your audience to your value proposition using your hero image.
- Visually support what your value prop is saying.
- Create an emotional reaction.
- Play with color.
- Use an illustration.
- Idolize your product.
- Be relatable.
What is Amazon hero image?
A hero product image is the lead image used to illustrate a product on an ecommerce site, such as Amazon, Tesco, Target, Walmart or Alibaba. It is this product image which features in category and search results. It is a brand’s first opportunity to showcase its products and grab the attention of online shoppers.
What are the four elements needed on mobile hero images?
Mobile hero images, which are also suitable for laptop, desktop and tablet screens, provide an effective solution to this problem by amplifying the four key elements consumers need to make a choice: brand, format, variant and size. Mobile hero images are particularly relevant to products in tall, thin packaging.
What should my hero image look like on my phone?
If your hero image is something like a skyline or a mountain range, this shouldn’t really be a problem. People on mobile devices will see a smaller slice of the skyline or mountain range, but it will still be clear what they’re looking at. But what if your hero image contains a more specific subject, like a human figure?
Can you change the hero image in CSS?
When this is the case I switch out the hero image (using a media query) so that on mobile it shows the mobile image and on larger screens it shows the regular hero image. I typically make my mobile images 800 x 1200px. You can swap out your hero and mobile images in your CSS like this:
How to make a hero image for your website?
If you want a tool that will give you more control over the compression and one that you can use anywhere and anytime without the need for an internet connection consider PNG Compressor (macOS app for png images) and Compressor (macOS app for jpg images). Download this sketch template to know what size to make any hero image on your website.
How to choose and crop a mobile-friendly hero image?
There are other solutions to the problem of organizing content for multiple screen sizes, but a single-column layout is a good option if you want the visitor to focus on one thing at a time. Right now that one thing is usually a hero image (or video), usually with a call to action on top of it.