What is the difference between lossy and lossless compression?

Lossless keeps every pixel exactly and saves modestly. Lossy discards detail that is hard to notice and saves much more.

What is the best image format for the web?

WebP or AVIF for photos and graphics, with a JPG or PNG fallback if you need very old browsers. Use SVG for vector logos.

Which JPG quality should I use?

Between 75 and 85 for most uses. Go lower only when a strict size limit forces it.

Does compressing images improve SEO?

Smaller images load faster, which helps users and Core Web Vitals. It is one of many ranking and experience factors.

Image Compression Guide: Lossy vs Lossless, Formats, Quality

What compression does, which format to pick, which quality to use, and how to compress images for the web, email and forms.

Compress an image now with the image compressor.

What image compression is

An uncompressed image stores a color for every pixel. A 12 megapixel photo would take 36 MB in plain RGB. Compression stores the same picture in fewer bytes. There are two families.

Lossless compression finds patterns and repetition and removes them without changing a single pixel. PNG and lossless WebP work this way. Savings are modest for photos and large for flat graphics.
Lossy compression throws away detail that people rarely notice, such as tiny color differences and fine texture. JPG, lossy WebP and AVIF work this way. Savings are large, and you control the trade-off with a quality number.

The three levers

Pixels. File size grows with width times height. Halving both leaves a quarter of the pixels. Resize to the largest size you will actually display.
Quality. For lossy formats a lower number gives a smaller file and more artifacts. Quality 75 to 85 is the usual range for photos.
Format. The same picture is smaller in WebP or AVIF than in JPG, and a flat graphic is smaller as a palette PNG than as a JPG.

Always work in this order: resize, choose the format, then tune the quality.

Which format for which image

Image	Best choice	Why
Photo for a portal or email	JPG	Accepted everywhere
Photo for your website	WebP or AVIF, with JPG fallback	Smaller at the same look
Screenshot, interface, chart	PNG, or lossless WebP	Sharp edges and text
Logo or icon with transparency	SVG if vector, else PNG or WebP	Transparency and crisp edges
Scan of a document	JPG grayscale, or PNG with few colors	Text stays legible

Quality settings that work

JPG: 80 to 85 for the web, 70 to 75 for email and galleries, 90 or more only for archives.
WebP: 75 to 80 looks like JPG 85.
AVIF: 55 to 70, depending on the encoder. Numbers are not comparable between formats.
PNG: there is no quality number. Reduce the colors to 256, 128, 64 or less if the picture is simple.

Compression for websites

Large images delay the Largest Contentful Paint, one of the Core Web Vitals. Keep the hero image under about 300 to 500 KB and content images under about 100 to 200 KB.
Set width and height attributes so that the layout does not shift.
Use loading="lazy" for images below the fold, and not for the first big image.
Offer several sizes with srcset and sizes, so a phone does not download a desktop image.
Serve modern formats with a fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" width="1200" height="800" alt="Describe the image" loading="lazy">
</picture>

Compression for email and forms

Email providers allow about 20 to 25 MB per message, and encoding adds about a third. Resize photos to 1,600 pixels and use quality 75. For a form with a stated limit, set a target size and let the tool find the quality, as on the 200 KB and 1 MB pages.

Common mistakes

Compressing a compressed copy. Each lossy save adds damage. Always start from the original.
Saving photos as PNG. The files are many times larger than JPG or WebP.
Enlarging small images. It adds bytes and no detail.
Renaming extensions. Renaming .png to .jpg does not convert the file.
Ignoring pixel size. Quality cannot rescue a 6,000 pixel image shown at 600.

Command-line tools

magick input.jpg -strip -interlace Plane -quality 80 output.jpg
cwebp -q 80 input.jpg -o output.webp
avifenc -s 6 input.jpg output.avif
pngquant --quality=65-80 input.png --output output.png
oxipng -o 4 --strip safe image.png

In Node.js with sharp:

sharp('in.jpg')
  .resize({ width: 1920, withoutEnlargement: true })
  .webp({ quality: 80 })
  .toFile('out.webp');

In PHP with GD:

$im = imagecreatefromjpeg('in.jpg');
imagewebp($im, 'out.webp', 80);

A short workflow

Keep the original.
Resize to the display size, or at most twice that for sharp screens.
Pick the format from the table above.
Compress at 80, look at the result, and lower the quality while it still looks fine.
Check the final size against the limit.

More on this site

Tools by size: 20 KB, 50 KB, 75 KB, 100 KB, 150 KB, 200 KB, 250 KB, 300 KB, 400 KB, 500 KB, 750 KB, 1 MB, 2 MB, 3 MB, 5 MB. By format: JPG, JPEG, PNG, WebP, HEIC, AVIF. By purpose: Passport photo, Visa photo, Job application, Exam photo, ID photo, Email, Website, WordPress, Ecommerce. Related: JPG vs WebP and image to Base64.

Image Compression Guide