How to Make Website Images Load Faster (Without Blur)

Why image weight matters

The slowest thing on a page is usually its biggest image, and that image is often what the browser measures as Largest Contentful Paint (LCP). Google’s Core Web Vitals treat an LCP under 2.5 seconds as good. A 3 MB hero photo on a mobile connection can use up that whole budget by itself.

1. Serve images at the size they are displayed

There is no point sending a 4000-pixel photo to a slot that displays it 800 pixels wide. As a rule of thumb, an image should be at most about twice its displayed width, which keeps it sharp on high-density screens. Typical widths: 1600–2000 px for a full-width hero, 800–1200 px for article images, 300–400 px for thumbnails.

2. Use a modern format

WebP files are typically 25–35% smaller than JPG at similar quality, and all current browsers support them. Use PNG only where you need lossless graphics or transparency. If you must support older software, keep a JPG fallback. See JPG vs PNG vs WebP for the details.

3. Compress to a sensible weight

These are rough targets, not rules: a hero image under about 200 KB, in-article images under about 100 KB, and thumbnails under about 30 KB. Set the target and let the tool find the highest quality that meets it, rather than guessing at a slider.

4. Load below-the-fold images lazily

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Lazy loading defers images until the visitor scrolls near them. Don’t lazy-load the main image at the top of the page — that one should load immediately, because it is usually the LCP element.

5. Always set width and height

With the dimensions in the HTML, the browser reserves the right amount of space before the image arrives, so the page doesn’t jump around as it loads (that jump is measured as Cumulative Layout Shift). A descriptive alt attribute helps accessibility and image search.

6. Offer several sizes with srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

The browser picks the smallest file that is sharp enough for the visitor’s screen, so a phone doesn’t download the desktop version.

How to check your work

Run the page through PageSpeed Insights or Lighthouse in Chrome DevTools. Both flag oversized and unoptimised images and estimate the exact bytes you would save.

Preparing the files

1. Convert the image to WebP.
2. Set the width you need in the resize tool — with the aspect ratio locked.
3. Set a maximum file size, and check the result with the before/after slider.
4. Export one file per width you plan to use in srcset.

Work from the original for every export. Compressing an already-compressed copy loses more quality than compressing the source once.

Frequently asked questions