WebP, JPEG or PNG: how to compress images for the web
Practical criteria for choosing format, dimensions and quality before publishing an image.
Heavy images increase loading time and mobile data use. The answer is not to lower quality until the file becomes unrecognizable. The largest gains usually come from combining suitable dimensions, the right format and visual review.
Photos, logos, screenshots and illustrations should not receive exactly the same treatment. Start by deciding where the image will appear and the largest size it actually needs.
Resize before adjusting quality
If an image will be displayed at 800 pixels wide, publishing a 5,000-pixel source transfers information most visitors will never see. Preserve the original and make a separate version for the intended use.
High-density screens may benefit from a somewhat larger file, but that does not justify using the camera original in a small card. Test the real layout on desktop and mobile.
When to use JPEG, PNG and WebP
JPEG works well for photographs and many color transitions but does not support transparency. PNG suits transparency, sharp lines and cases where visual loss is unacceptable, although photographic PNG files are often large.
WebP can handle photos and transparency and often provides a good publishing balance. Consider destination compatibility and test a sample before processing a large batch.
Find the right compression level
Start at high quality, lower it gradually and compare difficult areas such as hair, skies, shadows, small text and gradients. Stop before blocks, color bands or blurred outlines become visible at the real use size.
There is no perfect percentage for every image. A portrait with a soft background tolerates more compression than a screenshot with small letters. Test representative samples and record what works for that content type.
Avoid repeated compression
Keep the original separate and generate published versions from it. Reopening and saving a lossy file repeatedly accumulates defects. Return to the source whenever another size is needed.
Use names that show dimensions and purpose, such as “product-1200-web.webp.” Clear naming prevents thumbnails from being used as main images and makes replacement easier.
Final checklist
- Define the largest display dimensions.
- Use JPEG or WebP for photos and PNG or WebP for transparency.
- Compare difficult details at the actual use size.
- Avoid repeated lossy exports.
- Test loading on a mobile connection.
Put it into practice
Image Compressor
Use the free tool and compare your result with this guide’s checklist.
References
External sources used to confirm concepts and best practices covered in this guide.