Getting images found without slowing the page down

File names

Name the file for what it shows, in words, separated by hyphens. A camera filename or a string of digits tells nobody anything, including a search engine.

Do this before uploading, because renaming later means changing every reference to it and often breaking a link somewhere.

Keep it descriptive rather than stuffed. A name listing four services and a city reads as manipulation and helps nothing.

Do it before uploading. Renaming later means changing every reference and usually breaking one somewhere.

Alt text does double duty

It is what assistive technology reads aloud, and it is the main way a search engine understands what an image shows.

The honest version serves both. A description of what the picture actually shows, in one plain sentence, in the context of the page it sits on.

Keyword stuffed alt text is the version that fails both. It reads as nonsense aloud and it is treated as manipulation by engines.

The honest version serves both audiences, which is the whole argument in alt text for images.

Size is the real problem

The most common performance fault on a small business site is an image straight from a phone or a camera, several thousand pixels wide, displayed in a space a fraction of that size.

The visitor downloads the whole thing. On a phone connection that can be the difference between a page that appears and a page that is abandoned.

Resize to roughly what is displayed, then compress. A photograph can usually lose most of its file size with no visible difference at all.

• Resize to roughly the size it is actually displayed
• Compress properly, which usually removes most of the file
• Serve a modern format for photographs
• Use a scalable vector for icons, logos and diagrams
• Declare width and height so nothing shifts
• Defer images below the fold, never the main one

Formats

Modern formats produce substantially smaller files than the older ones at the same visual quality, and browsers have supported them for years.

Photographs suit those formats. Simple graphics, icons and anything with sharp edges or text usually belong as a scalable vector, which stays crisp at any size and is often tiny.

Avoid saving a diagram as a photograph format. It produces a large file that still looks blurry when enlarged.

Avoid saving a diagram as a photograph format. It produces a large file that still looks blurry when enlarged.

Loading behavior

Images below the fold can be told to load only as the visitor approaches them, which gets the visible part of the page up faster.

The main image at the top should not be deferred, because that is the one the visitor is waiting for and delaying it makes the page feel slower.

Always set the dimensions so the browser reserves the space. Without that, the page jumps as each image arrives, which is both irritating and measured against you.

Captions and surrounding text

A search engine uses the words near an image to understand it. A caption, a heading above it, the sentence that refers to it.

So an image dropped into a page with no context is harder to understand than the same image beside a paragraph about the same thing.

Captions are also read by more people than body text on many pages, which makes them worth writing rather than leaving empty.

Captions are read by more people than body text on many pages, which makes them worth writing rather than leaving empty.

How ours are handled

Images on sites built here carry dimensions so nothing shifts as they load, carry alt text written during the same conversation that produced the page, and are served in a modern format.

Every page passes a check that runs before anything publishes, validated against Google Search Essentials and modern web standards, and an image with no text alternative stops the page publishing.

What no check can confirm is whether the description is true, which is why the images you supply are described from what you tell us rather than guessed at.