Photos on your business website: WebP, AVIF, file size and alt text

A photo straight from a phone is often several megabytes. Uploaded to a website as is, it can make the browser spend longer loading that one image than the rest of the page. A customer on a phone with poor reception doesn’t wait and leaves.

In this guide I’ll show you how to prepare photos for your business website: in what format, at what size, with what alt text and file name. You can do it all for free, in a few minutes per photo.

Why photos are the most common cause of a slow website

On most small business websites, images are the heaviest element. Text and code weigh a few dozen kilobytes each, while a single photo of a completed project can weigh several megabytes. That’s why I start with the photos when someone asks me to speed up their website.

I described an example from my work in the case study on a fast website on mobile: one of the results was a page weight reduced from 3 MB to 0.5 MB. A large part of that difference came from improved images.

Step 1: choose the format (JPEG, WebP or AVIF)

The three formats you’ll come across most often:

My advice for a typical website: save photos as WebP. If a contractor is building the website, AVIF can be added as the first choice, with WebP as the fallback. Most current browsers support both today, but it’s worth checking on your own site after launch.

A logo and simple icons are best saved as SVG (vector graphics), or as PNG when you need a transparent background. PNG isn’t suitable for photos, because the files are very heavy.

Step 2: reduce the size in pixels

This is the most common mistake: the photo is 4,000 pixels wide, but on the page it is displayed in a column 600 pixels wide. The browser downloads the whole file and then scales it down.

The rule is simple: the file doesn’t need to be wider than the space where you show it, with some headroom for high-density screens. Practical values I use:

• a full-width photo (e.g., at the top of the page): about 1,600–2,000 px wide,
• a photo in a gallery or in a text column: about 800–1,200 px,
• a thumbnail in a list: about 400–600 px.

These are my working values, not a Google standard. Adjust them to your design: if your website shows a photo in a 500 px column, don’t upload a 2,000 px one.

Step 3: set a target file size

Google doesn’t set one binding number of kilobytes for a photo. So you need your own target. Mine is:

• full-width photo: up to about 150–250 KB,
• gallery photo: up to about 100–150 KB,
• thumbnail: up to about 50–100 KB.

These are practical targets, not a requirement. A photo with a lot of detail (e.g., stone, fabric) may weigh a little more, and a simple, uniform background less. What counts is that the whole page loads quickly on a phone, and a test will tell you that (I describe it below).

Step 4: convert your photos in Squoosh

Squoosh is a free browser tool that doesn’t require an account. Here’s how it works:

1. Open the Squoosh website and drag in your photo.
2. On the right side, choose the format (WebP or AVIF).
3. In the resize options, enter the target width in pixels.
4. Move the quality slider, for example to around 75–80, and compare the previews on the left and right.
5. When the result looks good and the file has a reasonable size, download it.

The option names may change over time, but the principle stays the same. Judge the quality by eye: start lower and raise it until the visible loss of quality disappears.

If you have a lot of photos, ask your contractor for automatic conversion. That’s how it works on the websites I build: photos are prepared during the build, not by hand, one by one.

Step 5: shrink photos while they’re still on your phone

Don’t wait until the photo reaches the website. When sending from your phone, you have two simple options:

• Reduce the size when sending. In many apps (email, messengers), a size choice appears when you attach a photo. Choose medium instead of the original.
• Set a lower camera resolution for photos that aren’t meant for print, if your phone allows it.

Also remember that an iPhone saves photos in HEIC format by default, which browsers usually don’t display. When sending them to your contractor, choose the option that converts them to JPEG.

Step 6: add width and height, and lazy loading

This part concerns the code, so if a contractor looks after your website, send them this section. Two attributes make a big difference.

The width and height attributes tell the browser how much space to reserve for a photo before it loads. Without them, the page “jumps” as images appear, and it’s hard to hit a button.

Lazy loading (loading="lazy") tells the browser to download photos only when the user gets close to them while scrolling. This saves data on a long page.

<img
  src="taras-drewno-gizycko.webp"
  alt="Taras z desek kompozytowych przy domu jednorodzinnym w Giżycku"
  width="1200"
  height="800"
  loading="lazy"
/>

There is one important exception: the main photo visible right away when someone opens the page should not be lazy-loaded. It needs to load as fast as possible, so leave it without loading="lazy". Your contractor can also mark it as a priority (fetchpriority="high").

When you want to provide two formats, the code looks like this:

<picture>
  <source srcset="taras.avif" type="image/avif">
  <source srcset="taras.webp" type="image/webp">
  <img src="taras.jpg" alt="Taras z desek kompozytowych" width="1200" height="800" loading="lazy">
</picture>

The browser will pick the first format it can read.

Step 7: write the alt text

Alt text serves two purposes. A screen reader reads it out to a blind or visually impaired person. A search engine uses it to understand what the photo shows. That’s why you should write it above all for a human.

The rules I follow:

• describe what you can see, briefly and specifically (usually one sentence),
• add context that matters: what project it is, where, what it’s made of,
• don’t start with “photo” or “image”, because the screen reader will say on its own that it’s an image,
• don’t stuff in keywords like “terrace Giżycko cheap best terrace”,
• leave decorative images with an empty alt="".

Two examples:

In accessibility audits, missing alt text is one of the most common errors, so it’s worth fixing while you tidy up. I write more about accessibility in the guide on website accessibility from 28 June 2025.

Step 8: give your files human-friendly names

A file name is a small thing, but it also helps search engines and keeps your materials organized. Instead of IMG_4521.jpg or photo-final-new2.webp, use a descriptive name:

• lowercase letters, no Polish or other accented characters,
• words separated by hyphens,
• short, 3–5 words, e.g., composite-terrace-railing-masuria.webp.

The name doesn’t replace the alt text, it complements it. Change it before uploading to the website, because later it’s easy to end up with a mess.

What not to do

• Don’t upload originals straight from your phone and count on the website to shrink them. Some systems do, but not all.
• Don’t over-compress. A blurry photo of your work puts people off more than an extra 50 KB.
• Don’t put text in images (a price list, a phone number as an image). A screen reader won’t read it, and Google will have a harder time understanding it.
• Don’t use one photo in three sizes by shrinking it only with styles. Prepare separate files.
• Don’t leave alt text empty on photos that carry content.

How to check the result

After the changes, run the free website test. In about 30 seconds it checks your website in several areas: speed (Google PageSpeed measurement on mobile), SEO, security and accessibility. You’ll see whether images are still flagged as a problem, and if alt text is missing, you’ll get a hint on what to fix.

Compare the results before and after. If the speed score has clearly gone up and the page doesn’t jump while loading, your photos are well prepared.

Summary

Preparing photos comes down to four things: the WebP (or AVIF) format, a size that fits the space, a reasonable file size, and meaningful alt text with a clear file name. The rest, meaning width, height and lazy loading, is a matter of a few lines of code.

If your website loads slowly because of heavy images, write to me. As part of a website redesign, I’ll rework the images, code and alt text, and technical maintenance will help keep it that way after launch. I reply within 24 hours.