New format
How images earn attention on a site and in content
An image is read faster than a paragraph: it sets emotion, topic, and an attention anchor before anyone finishes the lead. Random filler photos, tiny visual noise, and offer text locked inside a JPEG often hurt UX and accessibility.
Below: working moves — color and contrast, rest for the eye, a less obvious frame, metaphors, and the rule never to hide meaning only in the image. Making an image clickable is a separate article.
Why visuals matter
An image confirms the page topic, lowers cognitive load, and sets brand tone. In social feeds and blogs the preview decides whether people click further.
A bad visual is worse than none: blur, watermarks, someone else’s logo, “handshake in suits” clichés.
Jobs an image can do:
- show the product or result
- explain a process with a diagram
- set the emotion of the offer
- break up long text
Color, contrast, and rest for the eye
A bright accent on a neutral background pulls the eye to the CTA or the hero of the frame. Text-to-background contrast matters on photos with captions too: pale gray on gray doesn’t read.
The eye needs air — margins, not an overloaded collage. Alternate dense blocks with calm ones, or fatigue means people scroll past.
Check:
- one dominant color accent
- UI and caption contrast
- no noise from ten tiny objects
- on mobile, face or product isn’t cropped out
Obvious vs curiosity
Template “laptop + coffee” frames get skipped. Stronger: a process detail, before/after, an unexpected product angle, honest material texture.
Mystery works if context is clear within a second (caption, H2). Otherwise it’s clickbait that doesn’t pay for attention.
Ideas instead of clichés:
- close-up of a product detail
- UI with a real task
- the work result, not a model pose
- a simple step infographic
Text inside the image
Critical offer, price, legally important copy — duplicate as normal text on the page. The image may fail to load, not index as text, or not be read by a screen reader.
On the banner leave a short punchy accent; put the expansion next to it in HTML.
Rule:
- meaningful alt
- offer in a nearby headline
- don’t shrink type on the photo
- treat file weight separately from “text for SEO”
Metaphors and fit
A metaphor (rocket = growth, bridge = integration) speeds understanding if the audience reads it. A too-distant metaphor confuses.
Don’t lean on the outdated idea that “only a pretty face sells”: in many niches expertise, product, and clarity convince — not someone else’s gloss.
Fit filter:
- linked to the offer in two seconds
- doesn’t insult the audience
- can be replaced with your own photo
- doesn’t break page speed
Rollout practice
Build a guideline: style, palette, bans (generic filler clichés), sizes for hero/article/social. Before release, check the first screen on mobile — not only the “wow” from a designer at a laptop.
Measure: preview CTR, time to scroll, banner clicks. Beauty without metrics is taste, not marketing.
Visual checklist:
- own or licensed file
- compression and a modern format
- meaning duplicated in text
- contrast and air
- aligned with the brand
FAQ
Is a pretty face photo always better than a diagram?
No. For B2B and how-tos a diagram or product shot is often stronger. A glossy smile with no link to the offer is empty filler.
How many images per screen?
As many as reinforce meaning. One strong visual in the first viewport beats a carousel for its own sake.
Can you put the offer on a banner?
A short accent — yes; the whole meaning only in the image — no. Duplicate the text in HTML for search and screen readers.
Does bright color always work?
An accent on a calm background works. Acidic chaos tires people and cuts trust.
Do you need a “mystery effect”?
In moderation: an unusual angle or detail intrigues. A mystery with no payoff just irritates.
Animals and kids in commerce?
Only if the niche fits. Otherwise they distract from the offer and feel manipulative.
Are stock photos banned?
On our materials — yes (site policy). For a client, prefer your own photos, brand-fit AI generation, or a checked license.
Does an image affect SEO?
Indirectly: behavior, snippets, Image Search, speed. Don’t expect a pretty photo alone to lift rankings.
Hero is stock coffee-and-laptop — and the offer lives only inside the JPEG?
We’ll set contrast, meaning, and HTML-duplicated copy — visuals that stop the eye without clichés.
Discuss the task
