Hero Image is the image which take up the largest visible area on the viewport area of a device while the page loads completely. It should be the largest image or images on the first view of a page, which conveys the essence of information or style/theme on the page.
We had a question come up, on what should be the size of an Hero image, or does it require to be only a single image on the viewport of the device. Logically we expect a Hero image to be a single largest image on the first view, but this does not need to be a rule of thumb. If you see below in Fig 1, iPhone 6 has a screen resolution of 375 x 627, so to put things in perspective we can see examples of 60% or 30% view area. Rationally thinking any image which has more than area 50%, by default becomes the Hero image. Now take into consideration where there are 2 images of 30% view area each, then both of them should also be considered as Hero images. Entire aim for this post is to identify today’s trend of hero images on the top 500 urls, and defining how view area of images should categorize them into hero images.
I wrote a headless browser script which runs through top 500 urls on an iPhone 6 Safari User Agent, and identifies images in viewport based on getComputedStyle.
Fig 2 basically plots on X axis the count of images seen on the view port, against number of Urls in the Top 500 and the total number of images downloaded on the page with first view. If you see the top 2 blue bars are for viewport image count of 10 and 3. 3 images on the viewport is a good call for performance, whereas 10 seems to be a large count of downloads needed on mobile network. If you see the orange bars along the 10 and 3, you see the overhead of downloading 86 and 12 images, though these are medians, it helps us get some understanding on the over-downloading of images which occur on the mobile platform for the first view. Just in time image loading and deferred downloading of images could also help in user experience. I would still like to put a caveat that these numbers have not been directly correlated with visual progress, so it could be those pertaining websites are taking these initiatives, as it is out of scope for this post.
Figure 3 below shows the total area covered by all the images on the viewport, against the number of Top 500 Urls. So top 2 tallest bar here show, the major chunk of Urls have images covering 15% of the viewport area, or else they cover the entire viewport with images.
As the Web-Page data trend shows that images is the largest content type on any webpage, we can also see here images are the largest pixel area occupiers on the first view viewport.
From above we can conclude that images are vital for viewport first view, and thus we need to identify the most important images to be rendered sooner, for better user experience. These images are none other than our Hero images.
In Fig 3 we looked at the total image area on the viewport, but now we would like to look at individual images, and what count of these qualify for hero images. Fig 4 shows count of Urls which have individual images less than 30%, less than 60% and greater than 60% viewport area. Blue bar shows that largest chunk of urls have images less than 30% area individually. Median and 90th percentile shows that these chunks of urls do not have a single Hero image, but 3 and 10 respectively. 10 here is a large number of Hero images, but it gives us a worst case state of Hero images to be considered on the viewport. Looking at the next 2 buckets of < 60% and > 60%, it makes sense that having 1 image as the Hero Image for median value, but 2 images of size greater than 60% being Hero images, which calculates to 120% on best case. How could this be possible? I dug into few websites who had 2 images more than 60% view area, and it seemed like they had layering of these images one on top of another. This again becomes a case of over-downloading of bytes for the viewport area.
Based on above data and information, we can conclude that Hero images heavily cover mobile viewport area today, and there can be more than 1 Hero images to be considered for individual Urls.