Images drive 60–80% of page weight on most sites — and most of your LCP score. Here's how to compress them for fast Core Web Vitals without thinking about it on every project.
3 image rules for good LCP:
fetchpriority="high" and no lazy loading.<picture>.Founder, CEO & Lead Developer
Juraj is a Computer Science student at Comenius University in Bratislava, Slovakia, and the sole creator of FileSlim. Frustrated with inefficient and expensive compression tools, he built FileSlim from the ground up as a free, privacy-first alternative. Working entirely alone, Juraj developed every aspect of the platform—from the compression algorithms to the user interface—ensuring complete browser-based processing that never uploads files to servers. His work has helped users worldwide compress over 50 million files while maintaining complete privacy and achieving 60-90% file size reductions.
<img> so the browser reserves space.| Use case | Primary | Fallback | Notes |
|---|---|---|---|
| Photo (hero, content) | AVIF | WebP → JPEG | AVIF wins 20–30% vs WebP on photos |
| Graphic / screenshot | WebP | PNG | WebP lossless beats PNG by 20–40% |
| Logo / icon | SVG | WebP | Vectors scale and gzip well |
| Animated | AVIF / WebP | MP4 video | Skip animated GIF — 5–10× larger |
| OG share image | JPEG | — | Many crawlers still don't decode WebP/AVIF |
<picture>
<source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" />
<source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" />
<img
src="hero-1600.jpg"
srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(min-width: 800px) 1600px, 100vw"
width="1600" height="900"
fetchpriority="high"
alt="..."
/>
</picture>For below-the-fold images, drop fetchpriority and add loading="lazy" and decoding="async".
Compress at build time so an unoptimized asset can never ship to production. The @fileslim/compress SDK runs in Node-compatible Wasm runtimes and in CI:
// scripts/compress-assets.ts
import { compressImage } from '@fileslim/compress';
import { readFile, writeFile } from 'node:fs/promises';
import { AD_SLOTS } from '@/config/adsense';
const buf = await readFile('src/assets/hero.jpg');
const out = await compressImage(new Blob([buf]), {
preset: 'web',
format: 'avif',
targetBytes: 100_000,
});
await writeFile('dist/hero.avif', new Uint8Array(await out.blob.arrayBuffer()));Wire this into a pre-commit hook or your CI build step and budget violations fail the build.
Need a hosted equivalent? See the PDF compression API guide for tradeoffs between client-side SDKs and REST APIs.
loading="lazy" for the LCP element).srcset).width/height attributes (causes CLS).Drop an image into FileSlim and get a web-ready AVIF/WebP/JPEG in seconds.
Get more FileSlim in Google
Tell Google you want to see FileSlim guides and tools more often. Takes one click and you stay on this page.