Why Are My Website Images Loading Slowly?

Start with one slow page

Open the published page on a phone and a computer. Notice which image appears late, whether the whole page is slow and whether text moves as pictures appear.

1. Write down the page address and the image that causes the problem.
2. Run a test in PageSpeed Insights and save the image-related findings.
3. If someone else maintains your website, give them the page address and report. Ask them to check that image before changing the whole library.

The sections below help you choose the next check. For a closer investigation, the browser’s Network panel shows which files the page downloads and how long each request takes.

Match the symptom to the next check

Optional: inspect the image in the Network panel

On a computer, open the page in Chrome. Open developer tools with Ctrl + Shift + J on Windows or Linux, or Command + Option + J on a Mac. Select the Network tab, then follow these steps:

1. Select the image filter, labeled Img.
2. Enable Disable cache and reload while the panel stays open. This lets you inspect a fresh download instead of a copy stored by the browser.
3. Select the request for the problem image. Check its preview to make sure you have the right picture.
4. Record the image URL and file size.
5. Open Timing to see where the request spends time, then check Initiator to see what started it.

This browser-cache setting does not clear the website’s server or CDN cache. A CDN is a service that delivers website files from distributed servers and can keep its own saved copies.

If the request starts late, inspect what triggers it: initial page markup, a script or a lazy-loading rule. If it starts early but spends a long time waiting for the response, compare another image and the page document. If the file arrives quickly but remains invisible, check whether CSS, an animation or JavaScript postpones its display. Fix the stage where time is actually being lost.

Chrome’s Network documentation

In Timing, distinguish Queueing or Stalled from Waiting for server response (TTFB) and Content Download. Time before sending the request can involve browser scheduling or connection setup; it is not all server processing. TTFB also includes network travel, so a long wait alone does not prove a hosting fault. A large Content Download phase points you toward transferred bytes and connection speed. Compare several requests under the same conditions before choosing a fix.

Reduce unnecessarily large image files

If a small card downloads a huge photograph, address dimensions first. Prepare a copy with the image resizer and preserve its proportions. Then compare WebP or AVIF where your delivery system supports them. The format guide explains the options.

Look at the entire opening screen as well as the largest image. A page that downloads dozens of individually modest thumbnails at once can still transfer far more than the initial view needs. Decide which images need to load immediately and which can wait until the visitor approaches them.

Fix loading delays when file size is not the problem

For the main visible image, check that it is not delayed by lazy loading. If it appears only after an animation or script finishes, inspect that sequence with your developer. Google’s LCP guidance separates loading and rendering delays rather than treating them as one download problem.

For slow responses, compare several requests before blaming the file format. If the HTML and other assets also wait a long time, investigate hosting or delivery configuration. Re-exporting the same image ten times is unlikely to address a delay before the server begins responding.

Retest without mixing conditions

A repeat visit may look faster because files are cached. Record whether each comparison uses a fresh or cached load and keep the device and network conditions consistent. Inspect a narrow viewport too: it may reveal a missing mobile variant that a desktop test hides.

1. Record one slow URL and the image request involved.
2. Change the relevant file or loading behavior.
3. Verify that the new version is being served.
4. Repeat the same measurement and check visual quality.

For a gallery, inspect the opening screen as a group. One large hero and twenty thumbnails may need different loading rules. Prioritize the visible image, then defer off-screen items where appropriate. After the change, scroll through the whole gallery and check that images still appear in time and that navigating back does not produce blank spaces.