Skip to content
OrbixPanel OrbixPanel Tutorials

Optimize images for a faster site

On most sites, images are by far the heaviest content — and the easiest big win. Getting them right often matters more than any server tweak.

The rules

1. Right-size them. Don’t serve a 4000px photo into a 600px slot. Resize to the largest size it’s actually displayed at (2× for retina at most). This alone can cut image weight by 90%.

2. Compress them. Export at sensible quality (JPEG ~80% is usually indistinguishable from 100% at a fraction of the size). Run them through an optimizer.

3. Use modern formats. WebP (and AVIF) are much smaller than JPEG/PNG at the same quality and are widely supported. Serve them with a fallback for old browsers.

4. Lazy-load below the fold. Add loading="lazy" so off-screen images load only when scrolled to:

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

5. Always set width and height (or aspect-ratio) so the browser reserves space — this stops layout shift as images load.

Doing it in practice

  • WordPress — an image-optimization plugin resizes, compresses, and serves WebP automatically. See speed up WordPress.
  • Static/app — optimize at build time, or use an image pipeline. Many frameworks (Next.js, Astro, Nuxt) have built-in image optimization.
  • Command line — tools like cwebp, jpegoptim, and optipng batch-process a folder in the terminal.

Then push assets to the edge

Once images are lean, serve them from a CDN so distant visitors get them fast too.

Measure it

Run your page through a performance tool (Lighthouse, PageSpeed). Images are almost always the top recommendation — fix them and watch the score jump.

Running OrbixPanel? Host optimized assets on fast local storage, with a CDN in front. OrbixPanel.com → — the free, self-hosted, AI-powered hosting control panel.