Compress Images for Faster Websites (Without Ugly Artifacts)

Why image weight still matters in 2026

Images often account for most of the bytes on content pages. Larger payloads slow first paint on mobile networks, hurt Core Web Vitals like LCP, and increase hosting costs at scale. Faster pages also feel more trustworthy to visitors.

Compression is not about making everything tiny—it is right-sizing assets for how they are displayed. A 4000-pixel-wide hero squeezed into a 800-pixel column wastes bandwidth without improving what users see.

Search engines consider page experience signals. Image optimization alone will not fix slow scripts, but it removes an easy bottleneck.

Lossy vs lossless compression

Lossy formats—JPEG, WebP lossy, AVIF lossy—discard data permanently for smaller files. Lossless PNG, WebP lossless, and GIF preserve exact pixels but compress less on photos.

Photos and complex gradients suit lossy codecs at tuned quality levels. UI screenshots, logos with text, and flat graphics often need lossless or very high-quality lossy to avoid fuzzy edges.

Double compression hurts: exporting a heavily compressed JPEG, editing, and saving again multiplies artifacts. Work from the least compressed source available.

Modern formats: WebP and AVIF

WebP is widely supported in browsers and typically beats JPEG size at similar visual quality. AVIF often goes smaller still, especially on photographic content, but encode times and compatibility vary—provide fallbacks.

Use the picture element or content negotiation so AVIF and WebP serve first, JPEG as backup. Content management systems and static site generators increasingly automate this.

Do not convert tiny icons to AVIF for marginal gains—engineering complexity may exceed benefit. Focus effort on heroes, galleries, and blog inline images.

Responsive images and srcset

srcset lets browsers pick an appropriate file width for the user's viewport and density. Combine width descriptors with sizes attribute so phones do not download desktop megabytes.

Art direction sometimes needs picture with separate crops—not just scaled versions—when mobile composition should differ from desktop.

Thumbnail grids deserve smaller derivatives than lightbox full views. Generate a ladder: 400w, 800w, 1200w, 1600w as needed rather than one giant file for all contexts.

Lazy loading and CDN delivery

loading="lazy" defers offscreen images until scroll. Reserve eager loading for LCP candidates—usually the main hero—so they appear quickly.

CDNs cache optimized variants at edge locations, reducing latency globally. Pair CDN URLs with consistent cache headers and versioned filenames when you update assets.

Sprites and icon fonts have largely given way to SVG and small PNG/WebP icons. SVG stays sharp at any size for simple vectors.

A practical compression workflow

Establish presets: blog inline 1200px wide WebP quality 80, thumbnails 400px, wallpapers full size with a separate web preview. Document presets for your team.

Automate in build pipelines—Sharp, Squoosh CLI, or CMS plugins—so humans do not hand-tune every upload. Spot-check results on retina mobile and low-end Android.

Measure before and after with Lighthouse or WebPageTest. If LCP image still flags, verify dimensions, preload hints, and that the LCP candidate is not lazy-loaded by mistake.

Frequently asked questions