How photos slow your website and how to fix them
A photo straight from a phone camera is far bigger than your page needs. A bigger file takes longer to arrive on a phone. That slows the page down for the person waiting to read it.
The fix is a smaller file and a set width and height. Your web person can do both. You need to know what a heavy photo looks like and what to ask for.
How to spot a heavy photo
A customer on the road is on mobile data. Your office wifi can hide the problem. Turn off wifi on your phone and open your home page. Watch the first photo arrive. Try the oldest phone you can find too.
These signs point to a heavy photo.
- The photo paints in slowly from the top to the bottom.
- The words jump down the screen when the photo arrives.
- You see a blank gap where a photo will be.
- A customer or a friend tells you the page was slow.
Ask for the right size
Resize means making the picture itself smaller. Your page shows each photo at a set width. The file should be that wide and no wider. Ask your web person to resize every photo to the width it shows at.
Ask which modern image format they will use for your photos. They know the names. Then ask for the size of your biggest photo before and after the change.
Keep the original photos on your phone. Send the full size ones to your web person and let them make the small copies. Look at the new ones on your phone. Tell your web person if one looks blurry.
How to keep the page from jumping
A page jumps when a photo arrives late and pushes the words down. The name for that jump is layout shift. Google rates a layout shift score of 0.1 or less as good. It rates a score above 0.25 as poor.
Width and height on a photo let the browser hold the right space before the photo loads. The words stay put when the photo arrives.
Ask your web person to set the width and height on every photo. Then ask for the layout shift score of your home page on a phone and again after the fix.
Describe every photo
Every photo needs a short description. The name for it is alt text. Google uses alt text together with the page content to understand what an image shows.
Keep your phone number and hours as plain text. A customer cannot tap to dial a number that sits inside a picture.
Write what the photo shows in one plain sentence. Leave out sales words. Good descriptions sound like these.
- Plumber replacing a water heater in a basement.
- Front of the shop with two open bays.
- Reception desk in a dental office with a plant and a clock.
The right number of photos
Three to five photos are enough for a home page. Each photo is one more file to load. Put the rest on a gallery page where a customer chooses to look.
Pick the photos that answer a customer's questions. Three kinds of photo do the job.
- Your place or your van so a customer knows what to look for.
- You or your team so a customer knows who will show up.
- One or two jobs you finished.
What to send your web person
Copy these lines into a text or an email. Ask what the work costs before you say yes.
- Resize every photo on my home page to the width it shows at.
- Tell me which modern image format you will use.
- Set the width and height on every photo.
- Add a short description to every photo.
- Send me the layout shift score of my home page on a phone before and after.