RETAINERREACH
All articles
June 27, 20267 min readsite speedcore web vitals

Image and Media Optimization for Law Firm Website Speed

By Brittany Winters, Director of Client Relations

TL;DR

Huge hero images and autoplay videos are the biggest reason law firm sites load slowly. Right-size and compress images, use modern formats, lazy load below the fold, set width and height, host video off-site, and delete unused files. Some you can DIY, some needs a developer.

On most personal injury websites, images and video are the single biggest reason pages load slowly, and fixing them is the fastest speed win you can get. You do not need to rebuild your site or hire an engineer to see a difference. A handful of the files on your homepage are almost certainly ten to twenty times larger than they need to be, and trimming them can turn a sluggish page into a quick one. This is a hands-on companion to our guide on Core Web Vitals and site speed for personal injury websites, zoomed all the way in on the heaviest culprits: pictures and moving media.

Why images and video wreck load time

Every photo, logo, and video on a page has to travel from a server to your visitor’s phone before it can appear. The bigger the file, the longer that trip takes. A single hero photo shot on a modern camera can be eight or ten megabytes. Multiply that across a slider, a few attorney headshots, some case-result badges, and a background video, and your homepage is asking a visitor on cell service to download a small movie just to read your phone number.

Google measures this pain directly. Two of its Core Web Vitals are especially sensitive to media:

  • Largest Contentful Paint is usually your hero image. If that file is huge, the whole page feels slow to arrive.
  • Cumulative Layout Shift happens when images load without reserved space and shove the text down as they pop in. The visitor goes to tap a button and it jumps.
A person who was just in a car wreck is not going to wait eight seconds for your background video to buffer. They hit back and call the next firm.

Slow media does not only annoy people. It quietly lowers your rankings and your conversion rate at the same time, which is a big deal when every signed case is worth what a personal injury case is worth.

Right-size images to how they actually display

The most common mistake is uploading a photo far larger than the space it fills. A headshot that shows up two inches wide on screen does not need to be three thousand pixels across. Your site shrinks it visually, but the visitor still downloads the giant original.

What to do:

  • Decide roughly how wide the image appears on screen, then export it at about double that width so it stays sharp on high-resolution phones. No more.
  • A full-width hero rarely needs to be wider than around two thousand pixels. Attorney photos and blog thumbnails need far less.
  • If you only have a giant file, resize it before uploading. Free tools and even the photo editor on your computer can do this in a minute.

This one step is fully DIY and often cuts a file by eighty percent or more.

Use modern formats and real compression

Older formats like standard JPEG and PNG are heavier than they need to be. Modern formats such as WebP produce the same visible quality at a fraction of the size. Most current browsers support them, and most website platforms can serve them automatically.

  • Convert your main images to WebP or a similar modern format. Many free online converters and plugins handle this without you touching anything technical.
  • Compress every image before or during upload. Good compression removes data your eye cannot see. A well-compressed photo often looks identical at a quarter of the weight.
  • Avoid PNG for photographs. Save PNG for simple logos and graphics with sharp edges or transparency.

If your site runs on a common platform, a developer can turn on automatic conversion and compression once, and every future upload gets handled for you.

Lazy load anything below the fold

When someone lands on your page, the browser tries to load everything at once, including images far down the page they have not scrolled to yet. Lazy loading tells the browser to wait and fetch those lower images only as the visitor scrolls toward them.

  • Your hero and anything visible on first glance should load immediately.
  • Everything below the fold, such as testimonials, footer logos, and lower photos, should lazy load.
  • Most modern platforms do this automatically, but older custom sites often do not. This is usually a quick developer task.

Kill the giant sliders, carousels, and autoplay video

Rotating homepage sliders and autoplay background videos are two of the worst offenders, and most firms do not need either one. A slider forces the browser to load several large images up front, and studies of user behavior consistently show visitors ignore everything after the first slide. You are paying a heavy speed price for something people do not look at.

Autoplay background video is even worse. It loads a large file the moment the page opens, drains phone batteries, and rarely says anything your words could not.

  • Replace a slider with one strong hero image and a clear headline.
  • Drop autoplay background video. If you want video, let the visitor choose to press play.
  • If a marketing widget or carousel is not earning its keep, remove it. This overlaps with broader conversion rate optimization for law firm websites, where simpler pages almost always convert better.

Host video on a real platform, not your own server

Self-hosting video means the actual video file lives on your website’s server and every visitor downloads it directly. That is slow and expensive. Instead, upload video to a proper video platform and embed it. The platform handles the heavy lifting, adjusts quality to the viewer’s connection, and keeps that weight off your page.

  • Put testimonials, attorney intros, and explainer videos on a hosting platform, then embed the player.
  • Make sure the embed itself loads only when needed, not the instant the page opens. A developer can set this up so the video thumbnail shows first and the player loads on click.

Set width and height to stop layout shift

When an image has no reserved dimensions, the browser does not know how much space to save for it, so the page jumps as each image arrives. Telling the browser the width and height up front lets it hold the exact space, and content stays put.

  • Ask your developer to confirm every image has width and height set, or an equivalent aspect-ratio rule.
  • This directly improves your Cumulative Layout Shift score and stops the maddening jump where a visitor taps the wrong thing.

This is a developer task on most sites, but it is a fast one.

Clean up unused media

Over years of edits, firms pile up old logos, retired headshots, duplicate uploads, and images from pages that no longer exist. They bloat your site and make everything harder to manage. Every so often, have someone clear out media that no page actually uses.

Your simple checklist

  • Resize images to about double their display width, then compress them.
  • Convert main images to WebP or a similar modern format.
  • Lazy load everything below the fold.
  • Remove sliders, carousels, and autoplay background video.
  • Host video off-site and embed it, loading on click.
  • Set width and height on every image.
  • Delete unused media.

DIY comfortably covers resizing, compressing, converting, and removing that slider. The rest, such as lazy loading, video embeds, and image dimensions, is quick work for a developer who knows what to look for.

At Retainer Reach we do this for personal injury firms every day, because a fast site quietly lifts both your rankings and your intake. If you would rather hand it off, our personal injury SEO and law firm marketing work starts with exactly these fixes. Want to see what slow pages might be costing you in missed cases? Run the case leak calculator, or grab the free steps on our DIY page and start today.

Frequently asked questions

How big should images on my law firm website be?

Size each image to about double how wide it displays on screen, so it stays sharp on modern phones without being wasteful. A full-width hero rarely needs to be wider than around two thousand pixels, and attorney headshots or blog thumbnails need far less. Always compress the file after resizing. Most oversized law firm images can shrink by eighty percent or more with no visible drop in quality.

Is WebP better than JPEG for my website photos?

Yes, in most cases. WebP delivers the same visible quality as JPEG or PNG at a much smaller file size, which means faster loads and better Core Web Vitals. Nearly all current browsers support it, and most website platforms can serve it automatically. Keep PNG only for simple logos and graphics that need sharp edges or transparency.

Should I put a video on my personal injury homepage?

A chosen, click-to-play video can help, but avoid autoplay background video. Autoplay forces a large file to load the instant the page opens, slows everything down, and drains phone batteries. If you want video, host it on a proper video platform, embed it, and let the visitor press play. That keeps the weight off your page while still telling your story.

What image fixes can I do myself versus hand to a developer?

You can comfortably resize images, compress them, convert them to a modern format, and remove an unnecessary slider yourself using free tools. Hand a developer the more technical items: turning on lazy loading below the fold, setting up click-to-load video embeds, and adding width and height to every image to stop layout shift. Both halves matter, and together they cover almost all media speed problems.

Want this run for your firm?

See exactly where your retainers are leaking — then decide. One firm per metro.

Calculate your case leak