Optimising images for faster pages

Images are usually the heaviest thing a browser downloads, so optimising them is the fastest way to improve load times and Core Web Vitals. The core moves are simple: serve modern formats like WebP or AVIF, compress sensibly, size images to the space they actually fill, add width and height so the layout does not jump, and lazy load anything below the fold.

Why images matter for Core Web Vitals

On most content pages the Largest Contentful Paint (LCP) element is an image, typically the hero or a featured photo. A bloated hero delays LCP directly. Images that load without reserved space also cause layout shifts, hurting Cumulative Layout Shift (CLS). Getting both right is mostly about weight and dimensions. For the underlying metrics, see Google's guidance on optimising LCP.

Step-by-step: optimise an image before you upload

1. Resize to the largest size it will ever display. A photo shown in a 800px column does not need to be 4000px wide.
2. Export as WebP or AVIF. These typically save 25 to 50 percent over JPEG at the same visible quality, and far more over PNG for photos.
3. Choose sensible compression. A JPEG or WebP quality of about 75 to 82 is usually indistinguishable from the original while cutting weight sharply.
4. Keep PNG only for graphics that need transparency or crisp text, and prefer SVG for logos and simple icons.
5. Strip unnecessary metadata (camera EXIF, colour profiles you do not need) to shave extra kilobytes.

Serve responsive images in your HTML

Let the browser pick the right file for each screen using srcset and sizes, and always set intrinsic dimensions so space is reserved before the image arrives:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="500"
  alt="Descriptive alt text">

The width and height attributes are what prevent layout shift. Add loading="lazy" to below-the-fold images, but never to your LCP hero, which should load eagerly. You can also add fetchpriority="high" to the hero to fetch it sooner.

Let the server and cache do the rest

On our LiteSpeed and CloudLinux stack you can lean on the platform too. In cPanel, the LiteSpeed Cache tools and the built in Optimize Website feature help compress and cache assets, and a CDN can deliver images from a location near each visitor. Long cache lifetimes on static images mean repeat visits reload almost nothing. If you run WordPress, an image optimisation plugin that auto generates WebP and lazy loads media handles most of this for you; see our WordPress SEO hosting notes, and for a broader speed checklist visit the performance and Core Web Vitals hub.

Quick wins to check today

• Find your single heaviest image and re-export it as WebP at quality 80.
• Confirm every <img> has width, height, and meaningful alt text.
• Lazy load everything below the fold, load the hero eagerly.
• Enable caching and, ideally, a CDN for image delivery.

Faster images improve LCP, steady layout reduces CLS, and lighter pages simply feel better to use. If you want help tuning caching or delivery on your account, contact our team.