Photos sell. A plumber’s neat pipework, a salon’s finished colour, a restaurant’s signature dish or a manufacturer’s workshop floor all do more to persuade than a paragraph of copy. But images are also the most common reason small business websites load slowly, because a photo straight off a modern phone can be several megabytes on its own.
Image optimisation for websites is about getting both: pictures that look sharp and pages that load quickly on a phone with one bar of signal. This guide covers the principles and a simple workflow any business owner can follow, based on Google’s own web.dev guidance.
Why image size matters so much
The biggest element in the first screen of most pages is an image: the hero photo on your homepage or the main product shot. Google’s Largest Contentful Paint measure, one of the Core Web Vitals, records how long that element takes to appear. Google’s threshold for “good” is 2.5 seconds or less. An uncompressed hero photo can blow that on its own, particularly on mobile data.
Images also affect Cumulative Layout Shift, the measure of how much the page jumps around while loading. Images without set dimensions push text down as they arrive, which is why you sometimes tap the wrong link on a slow page.
Choose the right format
Many modern website platforms and image services convert uploads to WebP or AVIF automatically and serve the best format each browser supports. If yours does, you can upload good-quality JPEGs and let the system handle the rest. If it does not, converting before upload makes a big difference.
| Format | Best for | Notes |
|---|---|---|
| AVIF | Photos where the smallest file matters | Excellent compression; widely supported by modern browsers; slower to encode |
| WebP | Photos and graphics in general | Much smaller than JPEG at similar quality; supported by all modern browsers |
| JPEG | Photos, as a fallback | Universal support, larger files than WebP or AVIF |
| PNG | Graphics needing sharp edges or transparency | Large for photos; avoid for photographs |
| SVG | Logos, icons, simple illustrations | Scales to any size with tiny files; not for photos |
| GIF | Rarely anything now | Use video formats for animation instead; much smaller |
Resize before you upload
A modern phone camera produces photos many thousands of pixels wide. Very few websites display an image wider than about 2,000 pixels, even on large screens, and most content images are shown far smaller. Uploading the original means every visitor downloads pixels they will never see.
As a rule of thumb, resize full-width hero images to around 2,000 pixels wide, content images to around 1,200 to 1,600 pixels, and thumbnails smaller still. Then compress. Most photos can lose a large part of their file size with no visible difference at normal viewing size. Free tools such as Squoosh, made by Google’s Chrome team, let you compare before and after side by side.
Galleries deserve special care. A portfolio page with forty full-size photos can weigh more than the rest of the site put together. Show small thumbnails that open larger versions on tap, and make sure the thumbnails are genuinely small files rather than full-size photos shrunk down by the browser, which still downloads every pixel.
Serve smaller images to smaller screens
A phone does not need the same image as a large desktop monitor. Responsive images let the website offer several sizes of the same picture and let the browser choose the right one for the screen. This is done with the srcset and sizes attributes in HTML, or automatically by many platforms and image services.
Many image services and content delivery networks can also create these sizes on the fly from one upload, which saves you making several versions by hand. If you are not sure whether your site does this, open a page on your phone and check the image file size using a tool such as PageSpeed Insights, which flags “Properly size images” when it finds oversized ones.
Lazy loading and layout shift
Lazy loading means images further down the page only download when the visitor scrolls near them, which speeds up the first view. Modern browsers support it with a simple loading=“lazy” attribute.
The catch is that the main image in the first screen, usually the hero, should never be lazy-loaded. Doing so delays the very thing Largest Contentful Paint is measuring. The hero image should load immediately, and can be given a high priority hint so the browser fetches it first.
Always specify the width and height of images, or reserve their space with CSS aspect ratios, so the browser knows how much room to leave before the image arrives. This single habit fixes most image-related layout shift. Modern platforms usually handle it, but images added through older editors or embedded by hand often miss it.
File names and alt text
Google’s SEO guidance recommends descriptive file names and alt text, because they help it understand what an image shows. “IMG_4827.jpg” tells it nothing. “oak-staircase-renovation-taunton.jpg” is useful without being stuffed.
Alt text is primarily for accessibility: it is what screen readers read aloud. Describe what the image shows and why it is there, in a short sentence. Decorative images should have empty alt text so they are skipped. Never cram keywords into alt text; it is unhelpful to people and to search engines.
A simple image workflow for any business
- Take or choose the photo, with good light and a clean background.
- Crop to the shape it will be shown in, such as landscape for a hero or square for a gallery.
- Resize to the largest size it will display, usually 2,000 pixels wide or less.
- Export as WebP or high-quality JPEG, and compress, checking it still looks sharp.
- Rename the file descriptively, using hyphens between words.
- Upload and add alt text that describes the image.
- Check the page on your phone and run it through PageSpeed Insights.
Image optimisation checklist
On Nerdsharks sites, uploaded photos are compressed and saved in several sizes automatically, so each screen gets the right one, so owners can upload straight from their phone without slowing the site down. If your current platform does not do this, following the workflow above by hand gets you most of the way.
- No uploaded image is straight off the camera at full size.
- Modern formats (WebP or AVIF) served where supported.
- Different sizes served to phones and desktops.
- Images below the first screen lazy-loaded; the hero image is not.
- Width and height set on every image.
- Descriptive file names and meaningful alt text.
- Logos and icons as SVG where possible.
- No text baked into images that should be real text on the page.