This is a plague I’ve been seeing a lot lately: Large, super detailed and probably expensive images taking 50% of the screen width.
If only it was one or two images per page, but noooo, they always travel in packs.
The problems may already begin with 3 sections using large images like that and will aggravate with each additional section.
What problems? Glad you asked.
The problems with such page structure
❌ Because those images are detailed, they:
- distract from the text, because “Wow, that’s a pretty image, let’s look at it for a while!”
- increase cognitive load robbing your visitors of their brain power – the brain power they would otherwise use to pay attention to your copy (you know, the words that actually do the selling)
❌ Because they are colorful, they:
- make the text less visually prominent and harder to spot
❌ Because they are many, they:
- contribute to visual clutter and make the page – and, thus, the task of reading it – look more complicated as it is
- make your visitors scroll longer to read the whole page
But most importantly:Those. Images. Add. Zero. Value.
Do you think if you switched image #1 with image #3 anyone would notice?
So all that distraction, friction and extra cognitive load is for nothing.
What to do instead?
Want to use large images? Make sure they add value (for example, describe something faster than you could do with words).
But if you do some soul-searching, you may realize you don’t need those images to occupy 50% of the screen width.
You may be better off with the side-by-side sections with much smaller images or icons, which will make it easier for your prospects to:
- get an overview of this section of the page (for example, services or features)
- remember where to find what if they want to come back after they scrolled down till the end
- move further down the page, as now the page becomes shorter
For example, like this:
It goes without saying that you should also optimize your images for speed. If you’re creating your visuals yourself, consider using a photo editor like PicsArt to create visually appealing images that don’t take up a lot of space. This way, you can still have visual elements on your website without sacrificing speed and performance.
Is this your page and do you (vehemently) disagree?
I shared a shorter version of this on LinkedIn the other day and got a couple of interesting comments that showed me that it’s not your usual piece of advice when everyone’s nodding along.
Does the “don’t do it like this” example look like one of your pages? Or maybe like a page you designed for your clients?
Then you may be feeling a burning desire to start passionately typing a rebuttal of this article asap.
Before you do that, see if I haven’t already “rebuttaled back” below.
5 things you may be thinking right now
“Na, there are no case studies for this”
Not the case studies, but a detailed article by NNgroup titled “Image-Focused Design: Is Bigger Better?”, where they claim that:
Large images are visually appealing, but they can harm the overall user experience if they aren’t appropriately prioritized.
And by “appropriately prioritized” they mean “support the main goals of your page”.
Also, just in the past month, I’ve seen multiple heatmaps and Analytics data for pages with this structure from different clients showing that:
- the page converts poorly
- people just scroll past those sections (not even moving their mouse over those images)
- no one clicks on in-section links (and by “no one”, I literally mean no one).
Here’s one of them.
Heatmaps showing the movement of the mouse cursor of the website visitors before/after the page was updated
The following heatmaps were kindly provided by BlogVault. I reviewed their homepage, and, among other things, suggested a layout with the smaller images.
They’re still in the process of revamping their homepage, but it’s already clearly visible that restructuring this section and making the images smaller leads to their prospects paying more attention to the text (even although the images are still quite complex).
Before: Large complex images that add no value
After: Smaller images that are easier to process
Notice how much shorter the revamped version has become. Now, the section is only half as long while still providing the same amount of information.
And not only did the text receive more focus due to the smaller images, but to move further down the page, the website visitors now have much less scrolling to do.
“But some companies (especially SaaS) need large images to explain stuff”
To clarify, I’m suggesting to only remove / rework the images that:
- explain nothing
- could be easily exchanged with each other, and no one will notice
- contribute to visual monotony by being a part of the identically looking, 3 or more consecutive sections
Do your large images add real value? Great. Please leave them on your website.
For example, this wonderful Features section on MailerLite’s website uses large images that show and explain things faster and better than words.
Notice how every image shows you something that would either be impossible to communicate with words or won’t be as efficient:
- Image #1: “Look how modern the campaigns we let you design look!”
- Image #2: “Look how slick our embedded forms will look on your website!”
- Image #3: “Here’s how easy-to-use our campaign automation editor looks like.”
- Image #4: “Yes, you can do A/B testing with us.”
“But the famous companies XYZ are doing it!”
Has there ever been a discussion about web design without someone bringing up this argument?
Sure, but famous companies:
- have millions of returning visitors who know how the site works
- don’t need to explain what they offer
- have many visitors who are most aware (i.e. ready to buy)
- have many new visitors who’ve never heard of you
- need to explain what you offer
- still have a lot of convincing to do to get your only problem-aware or solution-aware website visitors to convert
See my point?
You should only compare your website to the websites that:
- are in the same niche
- belong to a business of the same size
- have similar target audience and business model
- solve similar problems
Plus, be clear about reasons why you want that thing on your website. And even then you can’t be sure the owners of those websites know what they are doing.
“But studies show that people engage with images more than text”
Is that so? Then I suggest we all plaster our websites with the stock images of fake-smiling people and lay back waiting for the cash to rain like…
Obviously, not all images are created equal.
For an image to be engaging, it should support that conversation that’s going on on your page, support its purpose – whatever your visitors need to understand to move further down the funnel.
An image could do that if it:
- evokes emotion / puts your prospects in a particular mood
- explains something faster than you could do with words
- delights them without getting in the way
I don’t see why visitors should engage with the images that:
- explain nothing
- evoke no particular emotion
- are too complex / visually monotonous due to the same colors to easily keep them apart / associate with something familiar to help process their meaning to recognize what the section is about.
So unless those studies deal with images like that, I’m afraid they aren’t relevant here.
“This is bad advice, because this may vary from case to case”
The 100% accurate answer to all website related question is “It depends”.
It depends on your context, your target audience, your business model and a dozen of other things.
Does it mean we should stop giving any website improvement tips and each sit in front of our laptops terrified to offer an opinion, “because it all depends”?
Of course not.
The tips I give in this article (or anywhere else, except to you personally during a website review) are not one-size-fits-it-all. It’s rather a safe choice for the majority of the cases.
It may or may not work for your website, but there is always a rational explanation for my advice based on the things one should be guided by when creating a website: Clarity, relevancy, value, minimum distraction and friction.
Are you advocating for the page structure with large images that don’t add much value? I’m all ears and ready to change my opinion if you tell me how can this structure offer more clarity, relevancy, value while minimizing distraction and friction.
Or show me the stats for a page like that proving its outstanding performance. Because “it depends, that’s why I disagree” is not a valid argument.
Final words of wisdom
If I have unintentionally just told you that your page
sucks could be improved, I don’t apologize.
If that page was converting poorly, you probably needed to hear that.
If that page performs great, then awesome. It’s practically a miracle, but great for you. I’d love to see that unicorn and hear about your business model, target audience, and stats. Feel free to leave me a comment or drop me a line. I’m genuinely interested.