Quick answer
A website full of photos and video can still load fast if every image is resized to the size it displays at, saved in a modern format such as WebP or AVIF and lazy loaded below the first screen, while video is streamed or loaded only when someone presses play. The first screen loads first, everything else after.
Photographers, wedding venues, builders with project galleries, restaurants, interior designers: their work sells on pictures, and their websites often feel like wading through treacle. The usual advice, “use fewer images”, is useless to a business whose whole pitch is visual. You do not need fewer images. You need images that are prepared and delivered properly. This guide walks through how, in the order that makes the biggest difference first.
Why media-heavy sites get slow
Almost always, the problem is not how many images a page has. It is that each image is far bigger than it needs to be, and the browser is asked to fetch all of them at once, before the visitor has scrolled anywhere. A phone photo straight off the camera can be several megabytes and thousands of pixels wide. On a gallery page showing it at a few hundred pixels across, most of that download is wasted, and on a mobile connection it is the difference between a page that appears and a visitor who leaves.
Video makes it worse when it is uploaded directly to the site and set to load with the page. A single background video can outweigh every other file on the page put together.
The fixes that matter most, in order
| Fix | What it does | Effort |
|---|---|---|
| Resize images to display size | Stops the browser downloading pixels nobody sees | Low; do it before upload |
| Use WebP or AVIF | Smaller files at the same visible quality | Low to medium |
| Lazy load below the first screen | Loads images only as the visitor scrolls towards them | Low; built into modern browsers |
| Serve responsive sizes | Phones get small files, large screens get larger ones | Medium; usually handled by the build |
| Stream or defer video | Keeps heavy video out of the first load | Low to medium |
| Good hosting and caching | Delivers every file quickly, close to the visitor | Depends on your host |
Step 1: resize before you upload
Decide the largest size each image will ever be shown at. A full-width banner might need around 2,000 pixels wide for large screens; a gallery thumbnail perhaps 600. Resize to that before uploading, using any photo editor or a free batch tool. This one habit often does more for speed than every plugin and setting combined, because it shrinks the files at the source.
Compress as you export. For photographs, a quality setting that looks identical to the eye is usually far lower than the default. Check by viewing the result at full size on a good screen; if you cannot see the difference, the smaller file wins.
Step 2: use a modern image format
WebP and AVIF are image formats designed for the web. They produce much smaller files than JPEG or PNG at the same visible quality, and current browsers support them. Many website platforms can create these versions automatically when you upload. Where older browsers still need a fallback, the site can offer both and let the browser choose, which is how our own site serves its images.
Step 3: lazy load everything below the first screen
Lazy loading means the browser waits to download an image until the visitor scrolls close to it. On a long gallery page, that turns one enormous download into a series of small ones. Modern browsers support it natively with a single attribute, as Google’s web.dev guide to browser-level image lazy loading explains.
The exception is the main image at the top of the page. That one should load immediately, because it is usually the largest thing the visitor sees first, and Google measures how quickly it appears. Lazy loading it makes the page feel slower. web.dev’s guide to optimising Largest Contentful Paint covers why.
Step 4: serve the right size to each screen
A phone does not need the same image file as a large desktop monitor. Responsive images let the site offer several sizes of the same picture and let the browser pick the one that fits. MDN’s guide to responsive images shows how it works. On WordPress, much of this happens automatically when themes are built properly; on many page builders, it does not, which is one reason bloated builder sites are slow.
Step 5: handle video carefully
- Stream long videos. Upload project films, tours and testimonials to a video platform and embed them, so the heavy lifting happens on servers built for it.
- Load the player on click. Show a still image with a play button and load the actual player only when someone presses it. The page stays light for everyone who does not watch.
- Keep background video short and small. If you must have one, make it a few seconds long, muted, compressed hard and replaced by a still image on phones.
- Never autoplay with sound. It is irritating and browsers block it anyway.
Step 6: check the hosting underneath
Even perfect images load slowly from a slow server. Good hosting with caching and a content delivery network sends files from a location near the visitor and remembers pages rather than rebuilding them each time. Our guide to website hosting costs explains what to look for, and our website management and hosting is £20 a month with UK hosting, daily backups and updates included.
Step 7: test, then keep it fast
Test a gallery page, not just the homepage, because that is where media sites struggle. Run it through a speed test on a mobile setting, look at the largest files the page loads, and fix those first. Then make it a rule that nobody uploads an image straight off a camera again. Our guide to website speed for small businesses explains which numbers matter.
If the site is already slow and you want it fixed rather than learned, our website speed optimisation is £99 and covers images, caching and the other common causes. For a new site built image-first from the start, a custom WordPress website starts at £499. Every Luxbranding price is on our pricing page.
Get the UK Website Project Brief Template (free)
A two-page template for briefing any UK web designer: sitemap, integrations, audience and deliverables. Cuts revision rounds in half.
No spam. UK GDPR compliant. We only use your email to send this resource, unless you tick the box to hear from us.
Frequently asked questions
Do lots of images make a website slow? +
Not on their own. The usual cause is images that are far larger than the size they display at, all loading at once when the page opens. Resize each image to its display size, save it in a modern format such as WebP, and lazy load images below the first screen, and a gallery-heavy page can still load quickly.
Should I upload videos directly to my website? +
For most small business sites, no. Host longer videos on a streaming platform and embed them, ideally showing a still image that loads the player only when someone presses play. Direct uploads are heavy, rarely stream well on mobile and can make every page that includes them slow to load.
What image size should I use on my website? +
Use the largest size the image will actually be displayed at, not the size from your camera. A full-width banner might need about 2,000 pixels wide for large screens, while a gallery thumbnail may only need around 600. Compress as you export, and let the site serve smaller versions to phones.
Should every image be lazy loaded? +
No. Lazy load the images below the first screen, but load the main image at the top of the page straight away. That top image is usually the largest thing a visitor sees first, and delaying it makes the page feel slower and can hurt how Google measures your loading speed.
