Compress Images for Website
Images are usually the heaviest part of a web page, and a heavy hero image is the most common reason for a poor Largest Contentful Paint score. Compressing before upload is the cheapest speed gain there is. The preset here is WebP at quality 80 and a 1,920 pixel width, which suits full-width images on most screens.
Settings this page uses
- Output: WebP, supported by all current browsers.
- Quality: 80.
- Max width: 1,920 pixels.
You can change any setting above the results.
Checklist before you upload
- Budget: about 100 to 200 KB for content images and under 300 to 500 KB for a hero image.
- Give every image width and height attributes so that the layout does not jump.
- Lazy-load images below the fold, but not the main image at the top.
- Use srcset to serve smaller files to phones.
- Keep the originals. You can re-export in a newer format later.
If something goes wrong
If a transparent logo gets a halo, raise the quality to 90 or use PNG for that one file. If banding shows in a gradient, raise the quality or add a little noise in the original.
Other sizes and purposes
Sizes: 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.
Purposes: Passport photo, Visa photo, Job application, Exam photo, ID photo, Email, WordPress, Ecommerce. See also the image compression guide.