Performance / Beginner

Compress images before deploy

Oversized images are still the easiest way to lose LCP before users see anything.

Why this matters

The production reason.

A visually small image can still be a huge file. The browser downloads bytes, not design intent.

Compressing before deploy reduces LCP, bandwidth, CDN cost, and mobile wait time.

The best workflow is repeatable: resize to display dimensions, convert to the right format, then compress.

Copy-ready example

# Example target for a website hero
source: hero-export.png
resize: 1920px wide
convert: WebP
quality: 78-84
result: 1.2MB -> 156KB

How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.

Next.js: Optimize source images before handing them to next/image.

WordPress: Do not upload 6000px camera exports for 1200px content slots.

Shopify: Keep product images sharp, but compress lifestyle banners aggressively.

Explore other stacks

Move from this Performance note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.

Pre-render dynamic pages at build time instead of on every request to cut TTFB.

Local state avoids unnecessary parent renders and keeps component intent obvious.

Cancel outdated browser requests so fast UI changes do not render old data.

Fluid spacing keeps layouts responsive without a forest of breakpoint overrides.

Sanitize on input, escape on output, and keep theme templates strict about user content.

If it changes state, use button. If it navigates, use a link.