Image and video performance

Why this matters

Images and video are often the largest files on a page [1]Source 1 . They also trigger layout shift when the browser does not know how much space to reserve [4]Source 4 .

Fixing media after upload is possible. It costs more time than getting it right up front. It also delays improvements to LCP and CLS [3]Source 3 [4]Source 4 .

Before you upload an image

1) Choose the right dimensions

Do not upload a 4000 pixel photo to display it at 600 pixels wide. Oversized images waste bandwidth and slow mobile loads [3]Source 3 .

• Decide the largest display size the image will need on your site.
• Export to that size, plus a sensible high density option if needed.
• Keep the file size down so the main content appears sooner [3]Source 3 .

2) Compress it properly

Compression is not optional. It reduces download time and helps pages become usable sooner [1]Source 1 .

• Export JPG for photos where needed, with sensible quality settings.
• Export PNG only when you need transparency or sharp pixel edges.
• Use modern formats when available through your site pipeline.
• Avoid uploading camera originals.

3) Make it responsive

Users browse on different screens and different networks. Serve a size that matches the device, so you protect LCP [3]Source 3 .

• Provide multiple sizes so small screens do not download desktop assets.
• Use a clear rule for breakpoints and image widths.
• Avoid one size fits all images across every page type.

4) Prevent layout shift

Layout shift happens when media loads and pushes content around [4]Source 4 . It causes misclicks and frustration [1]Source 1 .

• Always include width and height so the browser reserves space [4]Source 4 .
• Keep aspect ratios consistent across a gallery grid.
• Do not insert banners above existing content after load [4]Source 4 .

5) Write useful alt text

Text alternatives support users using assistive technology [6]Source 6 . They also help when images fail to load.

• Describe the purpose of the image, not every pixel detail.
• Keep it short.
• Skip alt text for decorative images where it adds no value [6]Source 6 .

Before you upload video

1) Decide if video belongs on the page

Video supports understanding when it shows a process, a space, or a result. Video in a hero slot often harms loading speed, especially on mobile [3]Source 3 .

• Put video where it supports a decision, such as explaining a service or showing a result.
• Avoid autoplay background video on high traffic landing pages.
• Consider a short clip and a still image instead of long video.

2) Use a poster image

A poster image shows something useful immediately, without loading the full video. It also helps stability when dimensions are set [4]Source 4 .

• Choose a clear frame that communicates what the video is about.
• Compress the poster image like any other image.
• Ensure the poster does not cause layout shift [4]Source 4 .

3) Control loading

Do not load heavy video assets before the user chooses to watch. Third-party video and embeds add cost, so load them with intent [5]Source 5 .

• Load video on interaction where appropriate.
• Avoid loading multiple videos on one page.
• Prefer hosted video solutions that support adaptive streaming when needed.

4) Provide captions or transcripts

Captions and transcripts support accessibility and comprehension [6]Source 6 . They also support users in noisy settings and users who keep audio off.

• Provide captions for spoken content [6]Source 6 .
• Provide transcripts for longer or information-heavy content [6]Source 6 .
• Do not rely on visuals alone for key information [6]Source 6 .

A simple media policy for small teams

Policies remove guesswork and keep content consistent. They also protect Core Web Vitals over time [2]Source 2 .

• Set maximum image widths per page type.
• Define acceptable formats and when to use them.
• Define minimum compression rules.
• Require width and height for all media [4]Source 4 .
• Define when video is allowed and how it loads.

Next step

If your site feels slow, start by auditing media on the top landing pages. Reducing image weight and preventing layout shift often delivers the quickest improvements [1]Source 1 [4]Source 4 .