How to Compress Images for Your Website Without Losing Quality

Images are usually the heaviest part of a web page. A single unoptimized photo straight from a phone or camera can weigh several megabytes, more than all the HTML, CSS and JavaScript on the page combined. Compressing images is one of the easiest ways to make a site faster, and it doesn't have to make them look worse. This guide explains how image compression works, which formats to choose, what quality settings to use, and a simple workflow you can repeat for every page.

Why image size matters

• Speed. Heavy images take longer to download, especially on mobile connections. Visitors notice, and slow pages lose readers and customers.
• Core Web Vitals. On many pages, the largest visible element is an image, often a hero photo. Google's Largest Contentful Paint (LCP) measures how quickly that element appears, and Core Web Vitals are part of how Google assesses page experience.
• Costs and limits. Smaller images use less bandwidth and hosting storage, and some platforms limit upload sizes.
• Image search. Fast, well-described images are easier for search engines to crawl and show in image results.

Lossy vs. lossless compression

Lossless compression makes a file smaller without changing a single pixel. It finds more efficient ways to store the same data. PNG optimization is lossless, so there's no quality slider to worry about, but the savings are usually modest.

Lossy compression removes detail the eye is unlikely to notice, such as subtle color variations and fine texture, in exchange for much smaller files. JPEG, WebP and AVIF all support lossy compression, controlled by a quality setting. At sensible settings, most people can't tell the difference at normal viewing size.

Choosing the right image format

JPEG (JPG)

The classic format for photos. Supported everywhere, good compression for photographs, no transparency. Still a safe default when you need maximum compatibility, for example in email.

PNG

Lossless, with transparency. Ideal for screenshots, logos, icons and graphics with flat colors and sharp edges. A bad choice for photos, which become huge as PNGs.

WebP

A modern format developed by Google that supports both lossy and lossless compression plus transparency. It typically produces noticeably smaller files than JPEG or PNG at similar visual quality, and all major current browsers support it. A great default for websites.

AVIF

A newer format based on the AV1 video codec. It often compresses even better than WebP, especially for photos, and is supported by current versions of the major browsers. Encoding is slower, and some older software can't open it, so keep a fallback if your audience uses older devices.

SVG

Not a photo format at all, but vector graphics described as code. Perfect for logos and icons that need to stay sharp at any size. Optimize SVGs by removing editor metadata.

What quality setting should you use?

There's no single perfect number, because it depends on the image and the format, but these starting points work well:

• Photos for the web: start around 75–85 quality for JPEG or WebP, then compare.
• Large hero images: try a little lower, around 70–80, since they're big and viewed quickly.
• Product photos where detail matters: stay at the higher end, 80–90.
• AVIF: uses a different scale. Lower numbers can still look good, so compare visually.

The best test is your own eyes: compress, view the result at the size it will actually be displayed, and lower the quality until you can just see a difference, then go back one step.

Resize before you compress

Compression helps, but the biggest win is often resizing. A phone photo might be 4,000 pixels wide, while your blog's content column is 800 pixels wide. Serving the full-size photo means the browser downloads many times more pixels than it can show.

• Resize to roughly the largest size the image will be displayed, or about twice that for sharp results on high-density (retina) screens.
• Use the HTML srcset and sizes attributes, or your CMS's built-in responsive images, to serve smaller files to smaller screens.

A simple workflow for every image

1. Pick the right format: photos as WebP or JPEG (or AVIF), graphics and screenshots as PNG or WebP, logos as SVG.
2. Resize to the display size.
3. Compress with the image optimizer. Upload JPG, PNG, WebP or AVIF files (you can select several at once), choose a quality level, and optionally convert everything to a single output format. Compare the original and new sizes, and download the results individually or as a ZIP.
4. Check the result at actual size on a phone and a desktop.
5. Name the file descriptively, like blue-ceramic-coffee-mug.webp instead of IMG_4821.webp. The slug generator turns any description into a clean file name.
6. Write alt text that describes the image for screen readers and search engines.
7. Lazy-load images below the fold with loading="lazy", but not your main hero image, which should load right away.

Don't forget metadata and privacy

Photos from cameras and phones carry EXIF metadata: camera model, settings, date and sometimes GPS coordinates. It adds a little weight and can reveal where a photo was taken. Check what an image contains with the EXIF reader before publishing, especially photos taken at home. Many optimizers and export settings strip metadata automatically.

Special cases

Tiny icons

Very small images can be embedded directly in HTML or CSS as Base64 data URIs with image to Base64, saving a network request. This only makes sense for files of a few kilobytes, since Base64 adds about a third to the size.

YouTube thumbnails and social images

If you use a video thumbnail in a blog post, grab it with the YouTube thumbnail downloader and compress it like any other photo.

Screenshots

Screenshots with text often look better as PNG or lossless WebP. If they're very large, a high-quality lossy WebP is usually fine.

How to tell if your images are a problem

• Run your page through Google's PageSpeed Insights or Lighthouse in Chrome DevTools. Look for suggestions such as properly sizing images, serving images in modern formats and efficiently encoding images.
• In DevTools, open the Network tab, filter by images and sort by size to find the heaviest files.
• Check that your server uses HTTP/2 or HTTP/3 so many images can load in parallel efficiently. The HTTP/2 checker tells you.

Frequently asked questions

Will compressing images reduce quality?

Lossless compression doesn't change the image at all. Lossy compression removes detail, but at moderate quality settings the difference is usually invisible at normal viewing size.

What's the best image format for websites?

For most photos, WebP is an excellent default, with AVIF for even smaller files. Use PNG for graphics that need lossless quality and SVG for logos and icons.

How big should images be for a website?

Resize them to about the size they'll be displayed (or up to twice that for high-density screens), then compress. For most content images, that means well under the multi-megabyte size of a camera original.

Does image compression help SEO?

Indirectly. Faster pages provide a better experience and can improve Core Web Vitals such as LCP, which are part of Google's page experience signals.

Should I convert all my images to WebP?

For websites, it's usually a good idea, since modern browsers support it. Keep originals, and use JPEG or PNG where compatibility matters, such as email newsletters.