How to Compress Images for a Website Without Losing Quality

Images are often the heaviest part of a web page. Oversized files slow down loading, hurt mobile experience and can drag down your Core Web Vitals. The good news is that most images can be made much smaller with no difference you can see. This guide covers the formats, sizes and workflow that make that happen.

Why Image Size Matters

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element to render, and on many pages that element is an image, such as a hero banner or product photo. A large image file delays LCP, especially on slower mobile connections. Google recommends an LCP of 2.5 seconds or less for a good experience. Smaller images also use less data for your visitors.

Lossy vs Lossless Compression

• •Lossy compression discards some detail that the eye barely notices. It gives much smaller files. JPG and lossy WebP work this way.
• •Lossless compression reduces size without changing any pixel. PNG and lossless WebP work this way, but savings are smaller on photographs.

JPG vs WebP vs PNG

JPG

Best for photographs on any platform. No transparency. Quality settings around 75 to 85 percent usually look nearly identical to the original while being far smaller.

WebP

A modern format that supports both lossy and lossless compression and transparency. It typically produces smaller files than JPG or PNG at similar visual quality, and it is supported by current major browsers. A good default for websites.

PNG

Best for logos, icons, screenshots and graphics with sharp edges or transparency. PNG files of photographs are often very large, so avoid PNG for photos unless you need transparency.

Target File Sizes

There is no single correct number, but these are practical starting points. Adjust them according to what you see on screen.

• •Full-width hero image: aim for roughly 150 to 300 KB.
• •Blog or article images: roughly 80 to 150 KB.
• •Product photos: roughly 50 to 150 KB, depending on how large they display.
• •Thumbnails: often under 30 KB.
• •Icons and logos: a few KB, ideally as SVG.

Step-by-Step Workflow

1. 1.Resize first. If an image displays at 1200 pixels wide, a 4000 pixel original wastes bytes. Resize to about the largest size it will display, or up to twice that for sharp high-density screens.
2. 2.Choose the right format. Convert photos to WebP or JPG and keep PNG for graphics and transparency.
3. 3.Compress. Use a quality setting between 75 and 85 percent for photos, then compare the result with the original at full size.
4. 4.Check the details. Look at faces, text, gradients and edges, where compression artifacts show up first.
5. 5.Serve it properly. Use width and height attributes so layout does not jump, lazy-load images below the fold, and do not lazy-load your main LCP image.

Common Mistakes

• •Uploading camera originals straight to the site
• •Saving photos as PNG
• •Compressing the same JPG repeatedly, which adds artifacts each time
• •Resizing with CSS only, so the browser still downloads the huge file
• •Compressing so hard that gradients show banding or text becomes fuzzy

Using EraseBG Tools for This

EraseBG includes free image tools that work in your browser. Use the Image Resizer to set exact dimensions, the Image Compressor to reduce file size, and the Image Converter to switch between formats such as JPG, PNG and WebP. A common sequence is resize, convert to WebP, then compress and compare to the original.

How to Know It Worked

• •Compare before and after at 100 percent zoom and on a phone.
• •Check file sizes against the targets above.
• •Run a page speed test, such as Lighthouse in Chrome DevTools or PageSpeed Insights, and look at the LCP element and image-related suggestions.
• •Test on a throttled mobile connection to see what visitors on slower networks experience.

Remember that results depend on the image. A photo with lots of fine texture compresses less than a smooth gradient or a simple graphic, so judge by eye as well as by numbers.

Responsive Images and Caching

Compression is only half the story. For responsive layouts, provide several widths of the same image and let the browser pick the best one with the srcset attribute, so phones do not download desktop-sized files. Also serve images with long cache headers and use meaningful file names, so repeat visitors do not download them again and search engines understand what they show. If you use a framework or CDN with automatic image optimization, you can still compress your source files first, because smaller inputs give smaller outputs.