Compress images smartly.
Keep the quality.

Images are usually the heaviest part of a web page. A single unoptimized photo from a phone can be 4 to 8 MB, which is more than the rest of the page combined.

What you gain

Faster loading on mobile data, better Core Web Vitals scores, lower bandwidth bills and smoother email attachments. Most images can lose 50 to 80 percent of their size with no visible difference.

Quick rule

Resize to the largest size you will actually display, then compress. Doing both gives the biggest saving.

PNG

Best for logos, icons, screenshots and anything with transparency or sharp text. Files are larger unless colors are reduced.

JPEG

Best for photographs. It uses lossy compression, so it is small, but it has no transparency.

WebP

Modern format that supports both transparency and lossy compression, and is usually 25 to 35 percent smaller than JPEG or PNG. Supported by all current browsers.

Short answer: use WebP for the web, JPEG for photos shared everywhere, PNG for graphics that must stay crisp.

1. Resize first. Do not upload a 4000 px photo for a 600 px slot.

2. Compress. Balanced quality is usually invisible to the eye.

3. Use WebP where you can for an extra saving.

4. Lazy load images below the fold with loading="lazy".

5. Name files clearly and add alt text, which helps both accessibility and SEO.