Photos and video on the web: sharp, but light

Good photos and video do more for a website than almost anything else: they show the product, the people and the atmosphere in a second. They’re also usually the heaviest part of a page. A single photo straight from a camera can weigh more than the rest of the site together.

The goal is to keep the quality people see while sending only what their screen needs.

1. Formats: modern and compact

Image formats have moved on:

AVIF and WebP compress photos far better than JPEG at similar visual quality, and all current browsers support them.
JPEG remains a fallback for the rare old browser.
PNG suits graphics with sharp edges or transparency, less so photos.
SVG is ideal for logos, icons and illustrations: vector graphics that stay sharp at any size and are often tiny.

A modern site delivers photos as AVIF or WebP and lets the browser pick the best format it understands.

2. Sizes: the right image for each screen

A phone doesn’t need an image sized for a 4K monitor. Responsive images provide several sizes of the same picture, and the browser picks the one that fits the screen and its pixel density. On a phone, that can mean a fraction of the data for an image that looks just as sharp.

Sometimes a different crop helps too: a wide landscape image on desktop, a tighter crop focused on the subject on a phone. That’s called art direction, and it’s part of the same technique.

3. Loading: first things first

Images further down the page load lazily, only when they’re about to scroll into view.
The main image at the top loads with priority, because it’s usually what visitors see first, and it decides how fast the page feels.
Width and height are always set, so the browser reserves the space and nothing jumps when the image arrives.

4. Video: settings that matter

Video brings motion and emotion, and it needs a little more care:

A poster image shows right away, before the video loads.
Background videos play muted, loop, have no sound track at all and are kept short. They can replace an animated GIF at a fraction of its size.
Preloading stays off for videos that only play on demand.
Formats: MP4 with H.264 plays everywhere; newer codecs like AV1 save data where supported.
Reduced motion: visitors who prefer less motion get the poster image instead of an autoplaying video.
Captions make spoken content accessible and also help people watching without sound.

For longer videos, a video platform or a dedicated video service takes care of streaming in the right quality for each connection.

5. Shooting: quality starts at the camera

Optimisation works best with good material. Photos taken with the web layout in mind (enough space around the subject for different crops, consistent light and style across a series) make the site look calm and professional. A consistent look across all images is part of the brand.

6. Alt text: images for everyone

Every image that carries information gets a short description in its alt text, so people using screen readers get the same information, and search engines understand the image. Purely decorative images get an empty alt text, so they’re skipped.

The short version

Formats: AVIF and WebP for photos, SVG for logos and icons.
Responsive sizes and crops, picked by the browser per screen.
Loading: lazy below the fold, priority for the main image, dimensions always set.
Video: poster image, muted short loops, no preloading, captions, a still for reduced motion.
Good material and consistent style start at the camera.
Alt text for every image that carries information.

If your website’s images and videos should look great and load fast, get in touch.