How To Test Your Website Before You Tell Anyone It Is Live
A fifteen-minute pass before you announce a new site catches the failures visitors notice: dead forms, broken links, a layout that breaks on a phone.
If your site feels slow, the images are the first place to look. On small business websites they cause more of the slowness than everything else put together, and unlike most performance problems this one is preventable at the moment of upload.
It takes about a minute per photo and needs no technical knowledge. It just has to happen before the picture goes on the site, because afterwards it is a much duller job.
Why a photo straight off a phone is far too big for a web page
A phone camera is not built for web pages. It is built to give you a file you can crop into, zoom around and print, which means a modern phone produces images several thousand pixels across and files that run to several megabytes each.
The slot it sits in on your website is nothing like that size. A photograph inside the text of a page might be shown around eight hundred pixels wide on a laptop, half that on a phone. A thumbnail in a gallery grid is smaller again.
The browser handles the mismatch by scaling the picture down to fit, but only after downloading every byte of the original. The visitor pays the full cost of the enormous file and then sees a small version of it. It is the digital equivalent of posting somebody a whole roll of fabric because they asked for a handkerchief.
Phones also attach extra data to each shot: camera settings, date, sometimes the location. Compression tools generally strip that out on the way through.
What oversized images cost you
Load time. One heavy photograph is survivable. A gallery page with twelve of them straight off the camera assembles itself slowly in front of the visitor, images filling in one after another while the layout jumps around. People do not wait politely through that; they go back to the search results before your best picture has finished appearing.
Mobile data on a metered connection. Plenty of your visitors are standing in a car park on patchy signal with a data allowance they are conscious of. Every unnecessary megabyte comes out of that allowance and takes real seconds on a weak connection. A page that is quick on the office fibre can be painful on a phone at the edge of coverage, and you never see those visitors to know it happened.
The impression the site gives. Nobody thinks these images are unoptimised. They think the site feels cheap, or old, or that the business is not especially organised. Speed is read as competence, unfairly but consistently, and a slow page undermines good photography rather than showing it off.
Sizing: matching the image to the slot it sits in
Resizing does far more than compression alone, so do it first. The question to answer is how wide the picture is actually displayed on the page.
A full-width banner needs to be wide, because it stretches across a large monitor. A photograph inside a column of text needs far less. A thumbnail in a grid needs less still, and a headshot is smaller again.
A workable rule of thumb: find the widest the image is ever displayed, roughly double it, and export at that width. The doubling covers high-density screens, which use extra pixels to keep edges sharp. Beyond that the detail is invisible and you are charging your visitors for it.
Crop before you resize. If the interesting part of the photograph is the middle third, crop to the middle third rather than shrinking the whole frame. You keep the detail that matters and discard pixels that were never doing any work.
And resize the file itself. Dragging a corner in the page editor changes only how the image is displayed; the original still downloads in full.
Format: WebP, JPEG, PNG and when each one fits
JPEG is the default for photographs. It discards detail your eye is unlikely to miss, and the amount it discards is adjustable. Around three-quarters quality, most photographs are indistinguishable from the original at a fraction of the size. Push it too far and you get muddy blotches around edges, easy to spot if you look before saving.
PNG is for flat colour and sharp edges: logos, diagrams, screenshots of text, anything needing a transparent background. It keeps every pixel exactly as it was, which is why it is the wrong choice for a photograph. A PNG snapshot can be several times the size of the same image as a JPEG for no visible benefit.
WebP is the newer option and generally the best of both. It handles photographs and flat graphics, supports transparency, and tends to produce a smaller file than JPEG at the same visual quality. Every current browser supports it.
If your phone saves in HEIC, convert on the way out, because it is a good format that web pages do not universally accept.
Free tools that do it in a browser
You do not need software. There is a whole category of free browser-based image compressors: you drag a photo onto the page, it processes it, you download the smaller version. Many do the work inside your own browser, so the file never leaves your computer.
Worth looking for when you pick one: a quality slider with a live preview so you can see what you are giving up, file sizes shown before and after, the ability to resize as well as compress, an output format choice that includes WebP, batch handling for a folder of photos, and no signup.
Two habits matter more than the tool. Keep the full-size originals somewhere else, because compression is one-way and you may want the good version later. And look at the result at full size before uploading rather than trusting the number.
Alt text while you are in there
The upload box will ask for alt text. Fill it in, in the ten seconds it takes.
Alt text is the written description read aloud to visitors using a screen reader, and shown in place of the picture if it fails to load. Describe what is in the frame as you would to somebody on the phone: a resurfaced tarmac driveway with a brick border, not driveway resurfacing services. Purely decorative images can be left blank deliberately.
Sizing, compressing and describing images is part of adding them properly, and it is what we do to every image we put on a maintained site, including the ones sent to us straight off a phone.
