I hand clients beautiful images all the time, and then watch some of them get uploaded to a website in a way that makes the photos look worse and the site load slower. It is one of the most common, most fixable mistakes I see.
Here is the thing most photographers will not tell you, partly because plenty of them do not know it either: how you use an image on your website matters almost as much as the image itself. A great photo saved wrong is a slow, soft, oversized file that drags your page down. The same photo handled properly is fast, crisp, and quietly helping you rank.
I came into photography from a background in web development, so this is the bit I actually enjoy. Here is how to get it right, in plain English.
First, the myth that needs killing: "72 DPI for web"
If anyone tells you to save your website images at “72 DPI”, ignore it. It is leftover advice from twenty years ago and it means nothing for how an image displays on a screen.
A screen does not read the DPI or PPI tag buried in an image file. It only cares about two things: how many pixels wide the image is, and how big the file is in kilobytes. You could set a file to 1 DPI or 1,000 DPI and a web browser would display it identically. DPI only matters when you print something.
So forget DPI for web entirely. The two numbers that actually matter are pixel dimensions and file size. Get those two right and everything else follows.
How big should website images actually be?
The honest answer is: as small as you can make them while still looking sharp on the screens people view them on. But here are sensible working sizes.
For most uses, you almost never need an image wider than about 2,000 pixels. A full-width hero banner might want 1,920 to 2,560 pixels wide to stay crisp on large screens. A normal in-content image rarely needs to be more than 1,200 to 1,600 pixels wide. A small thumbnail or team headshot might only need 600 to 800.
The mistake I see constantly is people uploading the straight-off-the-camera file, something like 6,000 pixels wide and several megabytes, into a spot on the page that displays it at 400 pixels. The browser then has to load that enormous file and shrink it on the fly. The visitor downloads megabytes to see something that needed kilobytes. The page crawls.
The rule: resize the image to roughly the size it will actually display at before you upload it. Not the size of your camera file. The size of the slot on the page.
File size: aim for kilobytes, not megabytes
Once it is the right pixel size, compress it. For a normal web photo you are aiming for tens to low hundreds of kilobytes, not megabytes. A well-compressed in-content photo at around 100 to 200 KB will look indistinguishable from the multi-megabyte original to the human eye, and load many times faster.
This matters because images are the single biggest thing weighing down most websites. On a typical page, images make up around half to two thirds of everything the visitor has to download. So they are the first place to look if your site feels slow, and a slow site costs you, both because visitors leave and because Google factors page speed into rankings through Core Web Vitals.
You do not need expensive software for this. Plenty of free tools compress images well, and most decent WordPress setups can do it automatically on upload.
There is a caveat worth being honest about. On this website, I actually upload full-resolution images, sometimes 20 to 65MB files, and they still load fast. That sounds like it breaks the rule I just gave you, but it does not, because I have built the site to handle it: caching, an image optimisation plugin, and a content delivery network that automatically resizes, compresses and serves the right version of every image to each visitor. Nobody downloads the 65MB file. They get an optimised version generated on the fly.
That is the second way to get fast images: an automated pipeline that does the work at the server instead of you doing it before upload. It is brilliant, but it takes setting up, and it is not realistic to expect every business to have it. Which is exactly why, when I deliver images to a client, I give them a web-friendly version, sized to 2048 pixels on the long side, alongside the full-resolution masters. They get images that are fast on any normal website, without needing to build the infrastructure I have. The masters are there for print or anything else that needs full quality.
Which format should you use? (The short version)
This is where there are real, current right answers, and they have changed in recent years, so here is where things actually stand.
WebP is the sensible default for most websites today. It is supported by basically every modern browser, and it produces files roughly 25 to 35 percent smaller than the old JPEG at the same visible quality. If you do one thing after reading this, switch your photos to WebP.
AVIF is the newest format and compresses even harder, often around half the size of a JPEG, and it is now supported across all the current browsers too. It is the best choice for big images like hero banners where the file-size saving is largest. The catch is it is slower to generate, so it suits sites where images are processed once and cached rather than created on the fly.
JPEG is still fine as a fallback and for maximum compatibility, but for web publishing in 2026 it is no longer the best choice. WebP beats it on size at the same quality.
PNG is for graphics that need transparency or perfectly sharp edges, like a logo. It is the wrong choice for photographs, where it produces huge files.
SVG is for logos and icons, not photos.
The plain takeaway: photos go out as WebP (or AVIF for big hero images), logos and icons as SVG or PNG. If your current site is full of JPEGs and PNGs of photographs, converting them to WebP is one of the cheapest speed wins available.
Alt text: the part almost everyone gets wrong
Every meaningful image on your site should have alt text. This is the short written description in the image’s code that says what the picture shows. It does three jobs, and they have all become more important, not less.
First, accessibility. Someone using a screen reader cannot see your image. The alt text is read aloud so they know what is there. In many places this is now a legal requirement, not just good manners.
Second, Google. Search engines cannot see an image the way you do; they read the alt text to understand it. Good alt text helps your photos show up in Google Images, which is real traffic most businesses ignore.
Third, and this is new and worth knowing: AI search engines now read alt text directly. ChatGPT, Perplexity and similar tools scrape alt text to understand what is on a page. So well-written alt text is now part of being found in AI answers, not just traditional search.
Here is how to write it well:
- Describe what is actually in the image, plainly, as if to someone who cannot see it. “Two engineers inspecting a CNC machine on a workshop floor” beats “image1”.
- Keep it short. Around 5 to 15 words, under roughly 125 characters, is the sweet spot. Screen readers cut off long ones.
- Do not start with “image of” or “photo of”. The screen reader already says it is an image. Get straight to the description.
- Do not stuff keywords. Cramming “Peterborough commercial photographer business photography headshots” into every alt tag does not help and Google treats it as spam. Use a keyword only if it honestly describes the picture.
- Leave purely decorative images empty. A background flourish or divider should have an empty alt tag (alt=””) so screen readers skip it rather than reading out noise. Different image, different description; decorative image, no description.
A quick note for my clients specifically: the images I deliver come from real shoots of your real business, which is exactly what makes good alt text easy to write. You are describing your actual team, your actual premises. That is far stronger for search than the generic alt text on a stock photo that a thousand other sites are also using.
Summary
Using photos well on a website is not complicated, it is just rarely explained. Resize the image to the size it will actually display at, not your camera file. Compress it down to kilobytes. Save it as WebP, or AVIF for big hero images. Write short, honest alt text on everything meaningful, and leave decorative images empty. Give the file a sensible name. Do those few things and your photos will look sharp, your pages will load fast, and your images will quietly work for you in search, including the AI answers more and more people now rely on.
