On most contractor websites the photographs are the entire speed problem. Not the code, not the hosting, not the plugins: a gallery of job photos uploaded straight from somebody’s phone, each one several megabytes, displayed at a fraction of its size.
Why this is specifically a trade problem
Photographs of real work are exactly what a contractor site should have. Every argument for showing your own jobs rather than stock imagery is correct.
The difficulty is where those photographs come from. A modern phone produces images several thousand pixels wide and several megabytes each, and they go onto the site as they came off the camera. Twenty of them on one page is a page that will not load usefully on a weak signal at a property, which is precisely where your customer is.
The photographs are worth keeping. It is the file sizes that need dealing with.
Do not serve a huge image in a small box
The most common waste is an image four thousand pixels wide displayed in a space six hundred pixels wide. The browser downloads all four thousand and throws most of it away, and the visitor pays for the whole download.
Resize before uploading. As a rough guide, a full-width banner rarely needs to exceed about two thousand pixels wide; an image within the text of a page needs perhaps a thousand; a thumbnail needs a few hundred. Anything beyond that is bytes nobody sees.
Formats, briefly
- Photographs: JPEG remains fine. WebP typically produces noticeably smaller files at the same visual quality and is supported everywhere that matters now.
- Logos, icons, diagrams: SVG where possible, since it stays sharp at any size and is usually tiny. PNG where SVG is not an option.
- Screenshots or graphics with flat colour: PNG.
Do not put a photograph in a PNG. It is the most common format mistake and it can multiply the file size several times over for no visible benefit.
Compression is not the enemy of quality
Photographs can usually be compressed a long way before anyone notices, and the difference between an unoptimised file and a well-compressed one is frequently the difference between a page that loads on a poor connection and one that does not.
Aim to get typical page images well under a few hundred kilobytes. On a photograph of a finished job, nobody is examining the compression artefacts.
Lazy loading, and its one trap
Images below the visible area can wait until somebody scrolls to them, which makes a long gallery page behave as though it were short.
The trap is applying it to the image at the top of the page. Delaying the first thing a visitor sees makes the page appear slower, and that opening image is often what the speed measurements are timing.
Reserve the space, or the page will jump
If an image’s dimensions are not declared, the page has no idea how much room to leave, so text sits where the image will be and gets shoved down when it arrives.
A visitor reaching for the phone number when the layout jumps taps something else. It also scores badly on the stability measurement search engines use. Both problems are fixed by specifying width and height.
Alt text does two jobs
The written description of an image is read aloud by screen readers and is one of the few things a search engine can use to understand a picture.
Describe what is actually there, “replacement condenser unit installed beside a bungalow”, rather than either the filename or a string of service keywords. Decorative images that carry no information should have empty alt text, which tells a screen reader to skip them rather than announce a filename.
Frequently asked questions
How large should images on my website be?
Match the space they occupy: roughly two thousand pixels wide for a full-width banner, about a thousand within page content, a few hundred for a thumbnail. Serving more than that is downloaded and discarded.
Should I use WebP?
For photographs, generally yes. It gives noticeably smaller files at the same visual quality and browser support is no longer a concern.
Can I upload photos straight from my phone?
Not without resizing. Phone cameras produce several megabytes per image, and a gallery of them is the most common reason a contractor site is slow.
What should alt text say?
What is in the picture, plainly. Not the filename, and not a list of services, that helps nobody and reads badly when spoken aloud.
Where to start
Find the page with the most photographs on it and check the file size of one image. If it is measured in megabytes, you have found the reason the site is slow, and fixing it needs no redesign, just resizing and re-uploading.
Real Time Marketing has worked with home service contractors since 2016: plumbing, HVAC, roofing, electrical and other trades, nationwide, from our office in Bradenton, Florida. Agreements are month-to-month. See our website design or book a strategy call.
