A Better Website Image Does More Than Look Good

I love and work on communication that connects and sells.

That sounds larger than replacing a few photographs on a website. It is not. A photograph can help someone recognise the value before reading a sentence. It can also make a page slow, create the wrong expectation or show a polished impression that weakens the real proof underneath.

A 10 MB photograph may be beautiful source material. It is not yet a useful website asset.

The communication work begins when we ask what the image needs to transfer, where it will appear, what the receiver should understand and what should happen next.

People use the image before they analyse the argument

Visitors do not patiently process every element in the order a project team discussed it. They scan. A face, action, environment, product or visible result becomes an early cue: is this relevant to me, is this credible and should I continue?

Research on visual framing offers a useful warning. In an experiment on news communication, images produced strong framing effects and influenced behavioural intentions, including when the accompanying text carried a different frame. The image is not neutral decoration. It can steer what people notice and what feels actionable. See the Journal of Communication study.

Processing fluency adds another layer. Research by Reber, Schwarz and Winkielman connects easier perceptual processing with more positive aesthetic responses. Clear contrast, recognisable forms and visual coherence can make information feel easier to process. That does not mean “make everything pretty.” It means unnecessary visual friction can influence the experience before the visitor has judged the substance. Read the processing fluency research.

Use a visual that carries the same truth as the words

A generic mountain, meeting room or handshake may be attractive. It rarely proves the specific value of the work.

A stronger image can show:

• the real person whose judgment customers are buying;
• the product working in the environment where it creates value;
• the respected partner, publication or customer that reduces uncertainty;
• the outcome people can recognise without an internal explanation;
• or the context that makes the story distinctive.

For the Mark Gunter Photo Awards, an editorial placeholder could communicate style. A real announcement of Chris Burkard joining the jury communicates proof. The second image shows the actual person, award and partnership. It helps a visitor understand why the tenth edition mattered.

The technical change was small: the selected asset became a 1200 by 1500 pixel WebP file of approximately 44 KB. The communication improvement was larger: less ambiguity, stronger credibility and a faster page.

Loading speed is part of the message

If the image takes too long to arrive, it cannot perform its communication job. Worse, it can delay the main content and make the whole organisation feel less considered.

Images often occupy a large share of the visible page and downloaded data. Google’s web performance guidance explains why optimised image policies can improve loading performance and reduce network traffic. A prominent image can also become the page’s Largest Contentful Paint element, which means it often plays a direct role in how quickly the page appears useful. The practical implication is simple: the most prominent image deserves deliberate sizing and compression.

A visitor on office Wi-Fi may not notice a 7 MB download. A prospect on a train, at an event or using mobile data can experience a different company entirely.

Fast does not mean blurry. It means the browser receives enough visual information for the intended display size, without downloading thousands of invisible pixels.

The practical 80/20 image standard

For most editorial images on this website, I use the following standard:

• 1600 by 900 pixels for a landscape article image;
• WebP as the preferred file format;
• 100 to 250 KB as a useful target range;
• a descriptive filename instead of an internal camera number;
• real width and height attributes in the HTML;
• descriptive alt text for accessibility and context;
• a caption that explains why the image matters.

A detailed photograph may need more data. A clean graphic may need much less. The target is not the smallest possible file. The target is the smallest file that still transfers the intended visual truth convincingly.

Search engines also need successful transfer

Image search optimisation is another communication problem. A search engine needs enough context to discover the asset, understand what it represents and connect it to the right page and query.

Google’s image SEO guidance recommends standard HTML image elements, relevant high-quality images, descriptive filenames, useful alt text and placement near relevant copy. Google also considers page content, captions and metadata when interpreting an image.

For Google Discover, large relevant images can create a stronger preview. Google currently recommends images at least 1200 pixels wide and supports large previews through the max-image-preview:large setting. See the official Discover guidance.

This explains why one image may appear in several technical locations:

• the visible article hero;
• the Open Graph image shown by LinkedIn or WhatsApp;
• the Twitter or X sharing image;
• the structured Article data;
• and the normal image element interpreted by search engines and assistive technology.

Those are not separate marketing tricks. They are different receivers requesting the same communication in different formats.

From source photograph to useful communication asset

1. Select for meaning. Choose the photograph that best supports the claim, not automatically the most spectacular photograph.
2. Crop for the placement. Keep the important person, product or action visible at desktop and mobile sizes.
3. Resize before compressing. A 6000-pixel camera file should not be served into a 1200-pixel space.
4. Compress with judgment. WebP quality around 75 to 80 is a useful starting point. Inspect faces, gradients and text at full size.
5. Name the subject. mark-gunter-chris-burkard-jury.webp carries more meaning than IMG_7392.webp.
6. Describe the visible truth. Alt text should explain what can be seen without stuffing it with keywords.
7. Explain the relevance. Use the caption to connect the image to the argument or proof.
8. Specify it consistently. Use the same representative image in the page, social metadata and structured data.

Run the image transfer test

Before publishing, ask five questions:

1. What will the intended visitor assume after seeing this image?
2. Does that assumption support the truth in the copy?
3. Can the image arrive quickly on a normal mobile connection?
4. Can someone who cannot see it still understand its purpose through the alt text?
5. Will search and social platforms receive a relevant, correctly sized preview?

If the answer to any of these is no, the problem is not merely visual design or website maintenance. The transfer is incomplete.

Good communication connects every layer

A clear briefing can still produce the wrong asset. A strong vision document can remain unseen. A beautiful website can load slowly, hide its strongest proof or guide the visitor toward the wrong conclusion.

Good communication connects strategy, evidence, words, visuals, technology, distribution and the next action.

That is why replacing one photograph can matter. Done properly, it makes the page lighter, the proof stronger, the meaning easier to receive and the next decision easier to make.