Updated
1. Choose the format for the content
- Photos and detailed artwork: WebP. It gives a smaller file than JPG at similar quality and every current browser supports it.
- Screenshots, UI and graphics with sharp edges or text: PNG, or lossless WebP. Lossy compression smears fine edges.
- Logos and icons: SVG. It stays sharp at any size and is often only a few kilobytes.
- JPG remains the safe choice when the image has to work outside a browser — in email, print, or older software.
2. Resize before you compress
The biggest saving is rarely the quality slider. A 4000-pixel-wide photo displayed in an 800-pixel column carries about twenty-five times more pixels than the page can show. Export at roughly twice the largest size the image is displayed at, which covers high-density screens, and no larger.
3. Lower the quality until you can see it, then step back
For lossy formats, a quality setting around 75 to 85 percent is where most photos lose a large share of their file size with no visible change. Compare the result with the original at the size it will actually be shown, not zoomed in.
Lossy compression is cumulative. Always compress from the original file, never from a copy that has already been compressed.
Why PNGs barely shrink
PNG is lossless, so a quality slider has little to work with. If a PNG is large because it contains a photo, the fix is to change the format, not to compress harder. Converting it to WebP keeps transparency and usually cuts the size dramatically.
Clean up SVG exports
SVGs exported from design tools include comments, editor metadata and whitespace that the browser does not need. Stripping those is lossless and makes the file easier to inline.
What it does for performance
On most pages the Largest Contentful Paint element is an image, so image weight feeds directly into that Core Web Vital. Beyond compression, set width and height attributes so the layout does not shift as images load, and lazy-load anything below the first screen.