How do you write good image alt text?
Describe what the image shows, specifically, because alt text exists first for people using screen readers and its search value follows from doing that job properly. "Replaced cedar fence panels on a sloped garden" beats "fence", and keyword-stuffed alt text reads as manipulation when spoken aloud.
Find out how bad it is
Open the page, open the network panel, filter to images and sort by size. On a typical small business site you will find several files over 2MB, often photographs uploaded at 4000 pixels wide and displayed at 600.
That is a 6MB page for a visitor on mobile data outside a house in Katy, waiting to see whether you can help.
Resize before anything else
Compression cannot rescue an image with far more pixels than it needs. Resize first.
Decide the largest size each image is ever displayed at, then export at twice that for high-density screens and no more. A photograph shown at 600 pixels wide needs 1200, not 4000.
This single step usually removes most of the weight.
Use modern formats
AVIF and WebP produce substantially smaller files than JPEG at equivalent quality. Serve them with a fallback so older browsers still work:
<picture>
<source srcset="job.avif" type="image/avif">
<source srcset="job.webp" type="image/webp">
<img src="job.jpg" alt="New water heater installed in a Katy garage"
width="1200" height="800" loading="lazy" decoding="async">
</picture>
Use SVG for logos, icons and diagrams — it is a fraction of the size and stays sharp at any scale.
Always set width and height
The width and height attributes let the browser reserve space before the image loads, which prevents the page jumping as things arrive. That jump is measured as layout shift and it is one of the metrics used to assess page experience.
Set the intrinsic dimensions of the file; CSS still controls the displayed size.
Lazy-load, but not the first image
loading="lazy" defers images until they are near the viewport. Apply it to everything below the fold.
Do not apply it to the main image at the top of the page. That image is usually the largest thing rendered in the initial view, and deferring it delays exactly the measurement you are trying to improve. Load it eagerly and consider preloading it.
Serve the right size to each device
A phone should not download a desktop-sized image:
<img src="job-800.jpg"
srcset="job-400.jpg 400w, job-800.jpg 800w, job-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="..." width="800" height="533">
Most modern content systems generate these variants automatically. Check that yours is doing it rather than assuming.
Cache and deliver properly
Set long cache lifetimes on image files, and change the filename when the image changes rather than relying on cache expiry. A content delivery network helps if your visitors are spread out, though for a business serving only the Katy area the benefit is smaller than for a national site.
Verify with a real measurement
Run the page through a page-speed tool before and after, on mobile, and compare the largest contentful paint and total page weight. Do it on the live URL, and re-check after any redesign — image handling breaks quietly in rebuilds.
Frequently asked questions
What should I do first?
Resize. Compression cannot rescue an image with far more pixels than it needs. Export at twice the largest displayed size and no more — a photo shown at 600 pixels needs 1200, not 4000.
Which image format should I use?
AVIF or WebP with a JPEG fallback in a picture element, and SVG for logos, icons and diagrams. The modern formats are substantially smaller at equivalent quality.
Why set width and height attributes?
They let the browser reserve space before the image arrives, preventing the page jumping as content loads. That jump is measured as layout shift and counts against page experience.
Should I lazy-load every image?
Everything below the fold, yes. Not the main image at the top — it is usually the largest thing in the initial view, and deferring it delays exactly the metric you are trying to improve.
How do I check it worked?
Run the live URL through a page-speed tool on mobile before and after, comparing largest contentful paint and total page weight. Re-check after any redesign, because image handling breaks quietly in rebuilds.