Making images smaller so your website loads faster

To make website images smaller, do two things before you upload: resize each photo to the width it will actually be shown at, then compress it into a lighter file, ideally WebP or a well-compressed JPEG. A phone photo that starts at several megabytes usually ends up a few hundred kilobytes or less with no difference anyone can see on screen. Here are the sizes to aim for, the formats to use and the free tools that do the work.

Two different kinds of "big"

A photo can be big in two ways, and you need to fix both.

Big in pixels. Pixels are the tiny dots a picture is made of. A recent phone takes photos that are around 4,000 pixels wide. A laptop screen shows a full-width photo at roughly 1,400 to 2,000 pixels, and a phone screen at far fewer. Everything above what the screen needs is downloaded and thrown away.

Big in file size. Two photos with the same pixel size can weigh very different amounts depending on how they are saved. Compression is the process of saving a picture so it takes up less space, by dropping detail the eye does not notice.

Resizing deals with the first, compression with the second. Do resizing first, because compressing an oversized photo still leaves you with an oversized photo.

What sizes to use

These are practical sizes for a typical small business site. They are not rules, just widths that look sharp without waste:

• Full-width photo at the top of a page: 1,800 to 2,000 pixels wide, a file under about 300 KB.
• Photo beside a block of text: 1,000 to 1,200 pixels wide, under about 200 KB.
• Gallery photo that opens larger: 1,400 to 1,600 pixels wide, under about 250 KB.
• Small thumbnail or team headshot: 400 to 600 pixels wide, under about 80 KB.
• Logo: about twice the size it shows at on screen, and as light as it gets.

Height follows width automatically when you keep the proportions locked, which every resizing tool does by default.

Which format to choose

• JPEG (.jpg) is the standard for photos. Every system reads it. Saved at a quality setting around 75 to 80, it looks the same as the original on a screen and is far lighter.
• WebP (.webp) is a newer format made for the web. It gives the same look as JPEG at a noticeably smaller size and works in every current browser. If your website platform accepts WebP uploads, use it.
• AVIF is newer still and even smaller, but not every website editor accepts it yet. Use it only if yours does.
• PNG (.png) keeps every detail and supports transparent backgrounds. That makes it right for logos and simple graphics, and wrong for photos: a photo saved as PNG can be many times heavier than the same photo as JPEG.
• SVG is for logos and icons drawn as shapes rather than pixels. If your designer gave you one, keep it; it stays sharp at any size and weighs almost nothing.

Free tools that do it

You do not need to buy software. Pick one of these:

Squoosh is a free web tool made by Google's Chrome team. Drag a photo onto the page, choose WebP or "MozJPEG" on the right, set the width under "Resize", and watch the file size at the bottom drop while you compare before and after with a slider. It handles one photo at a time.

On a Windows computer, the Photos app can resize: open the picture, press the three dots, choose "Resize image", then pick a size or set your own width. For several photos at once, Microsoft's free PowerToys add-on includes "Image Resizer", which appears when you right-click a selection of photos.

On a Mac, open the photo in Preview, choose Tools, then Adjust Size, type the width, then File, Export, and choose JPEG with the quality slider a little below the top. You can select several photos in Preview's sidebar and resize them together.

On your phone, many photo apps and the share sheet can export a smaller copy. On an iPhone, sending a photo to yourself by email offers "Medium" or "Large" sizes, which is a crude but useful shortcut.

Online compressors such as TinyPNG and similar services take a batch of JPEGs or PNGs and shrink them without changing pixel size. Resize first, then run them through.

Doing a whole site without losing a weekend

If your site already has dozens of heavy photos, do not try to fix them all at once.

1. Run your home page through PageSpeed Insights and open "Properly size images". It lists the worst files, often with how much each could save.
2. Start with the photo at the very top of the home page. It is the first thing every visitor waits for.
3. Then the gallery or portfolio page, which usually holds the most photos.
4. Then the photos on your service pages.
5. Replace each one in your website editor, keeping the same spot on the page, and check it still looks right on your phone.

Some platforms help. WordPress has plugins that compress uploads automatically, and most builders resize photos when they show them. Even so, uploading a sensible size to begin with is the most reliable fix, because the platform can only work with what you give it.

Small things that help Google and your visitors

While you are replacing photos:

• Give files readable names before uploading, like "deck-repair-cedar-oakdale.jpg" instead of "IMG_4471.jpg". It helps you find them later, and it is one more plain clue about what the picture shows.
• Add a short description (alt text) in the editor's image settings, for example "New cedar deck with built-in benches behind a brick house". Screen readers read it to people who cannot see the photo, and Google reads it too. Writing alt text has examples for different trades.
• Crop with purpose. A tighter crop of the finished job often looks better and weighs less than a wide shot full of driveway.

If you are taking new photos for the site anyway, taking good website photos with a phone covers light and framing.

What to do this week

• Make a folder called "Website originals" and move your full-size photos into it.
• Resize and compress the top photo of your home page with Squoosh or your computer's built-in tool.
• Replace it on the site and check your phone on mobile data.
• Do the next five worst photos from the PageSpeed list.
• Rename the files and add alt text as you go.

If your site needs more than lighter photos to feel quick and modern, you can see your site rebuilt first, with photos already sized for phones and computers.