How to compress images for websites

Largest Contentful Paint - the hero metric in Core Web Vitals - is almost always an image. A 1.8MB hero image on a slow connection delays LCP past 2.5 seconds, which is the threshold Google uses to mark a page as needing improvement.

Compressing images perceptually, at the dimensions they actually render, is the single highest-leverage optimization you can apply to a marketing site.

JPG remains the right default for photography. PNG is the right choice for graphics with sharp edges, transparency, or screenshots of text. WEBP delivers smaller files than both for the same perceived quality and is supported in every modern browser.

If you only export one format, export WEBP. If you need a fallback, pair WEBP with JPG using the picture element.

Follow this workflow for any marketing site, blog, product gallery, or landing page.

1. 1Open the Docsora image compressor.
2. 2Drop your JPG, PNG, or WEBP files - individually or in bulk.
3. 3Pick Preserve Quality (30% reduction) for archive originals, Balanced (50% compression) for marketing imagery, or Maximum (80% reduction) for thumbnails and gallery tiles.
4. 4Download the optimized images.
5. 5Replace the originals in your CMS or asset pipeline.

Never serve an image larger than it renders. A hero that displays at 1600px wide should not be uploaded at 4000px - that is roughly 6x the bytes for zero visual benefit.

Standard sizing targets: hero images at 1600–1920px wide, in-body editorial at 1200px, product tiles at 600–800px, thumbnails at 300–400px. Compress each at the dimension it actually renders.

Perceptual encoding analyses what the human eye actually notices and spends bits accordingly. Faces, sharp edges, and high-contrast areas keep detail. Smooth gradients and uniform color regions get aggressive compression because the eye cannot tell the difference.

The result is a file that looks identical to the original at normal viewing distance but is 30–80% smaller.