Website Images and Video: A Practical Speed Checklist

Inventory the visuals before removing them

A business website may need project photographs, product detail, a logo, and a short introduction video. Those assets do different jobs. Before compressing everything or deleting the design, list each asset, where it appears, and the decision it supports. A project photo may provide important evidence; an unrelated looping animation may not.

The Colby Technologies homepage uses a video hero and a project portfolio. Those are useful examples of why media decisions need a purpose: the introduction establishes the brand, while the work section helps visitors evaluate actual projects. Their presence is not proof of any performance score. A speed review should measure the current page rather than assume it is fast or slow from its appearance.

If you are still deciding whether the site needs a rebuild, use the redesign assessment. This checklist addresses media delivery within the design you have.

Prepare images for where they are displayed

Keep an original master file, then create web versions for the sizes visitors actually see. A phone card does not need the same source dimensions as a large desktop portfolio image. Responsive image markup lets the browser choose an appropriate version. Review the export visually so compression does not erase product details, faces, or text that matters.

Prefer a suitable modern image format when the delivery setup supports it, but compare the actual output rather than assuming one format always wins. Keep vector brand artwork as vector when appropriate. Supply dimensions or an aspect ratio so the browser can reserve space while the image loads.

• Check the crop at narrow and wide widths.
• Keep the subject visible when text overlaps a photograph.
• Give meaningful images useful alternative text.
• Use empty alternative text for purely decorative images.
• Keep filenames understandable for the next person maintaining the site.

Do not delay the most important image

Largest Contentful Paint, or LCP, concerns when the largest qualifying content in the initial view becomes visible. Google’s web.dev guidance warns against lazy-loading the LCP image. Defer offscreen images where appropriate, but let the first-screen image be discovered and requested promptly.

This is why applying the same loading rule to every photo can backfire. Ask the developer to identify the actual LCP element at the tested viewport. It might differ between a phone and a desktop. Change the resource or loading priority that is causing the delay, then repeat the measurement.

Give video a deliberate loading plan

For a click-to-play demonstration, a poster image can explain what is available before a large video downloads. web.dev describes using preload choices to control initial fetching and treating embedded players as another source of work for the browser. A background video has a different purpose and needs its own mobile and reduced-motion behavior.

Ask what happens when autoplay does not run, the connection is slow, or the visitor prefers reduced motion. Keep the business headline and contact action readable without the video. Use a sensible fallback crop and avoid putting essential instructions only inside the footage. If the video contains spoken information, plan the corresponding accessible alternative.

A short brand loop, a project walkthrough, and a testimonial are not interchangeable. Choose the format and placement around the visitor’s question. Do not make every page download the same large background media simply because it is available.

Retest the experience, not just one score

Record the page, viewport, test conditions, and what changed. Run comparable before-and-after checks rather than comparing unrelated reports. A lab test helps diagnose a particular load; real-user performance, when available, adds evidence about actual visits. Neither replaces opening the page and completing the intended task.

1. Load the page on a phone using a slower connection.
2. Check that the main message appears and remains readable.
3. Scroll through the portfolio and look for unexpected layout movement.
4. Open the menu and reach the contact form.
5. Confirm that the form still works after media changes.

Colby Technologies can review image and video delivery as part of website development or website management. Bring a page that feels slow and explain the task visitors should complete. The result should preserve useful evidence while removing unnecessary waiting.

For performance work beyond media files, the third-party JavaScript budget guide covers widget downloads, execution cost, loading choices, and vendor failure.