The short answer
Resize the image to the largest size it will be shown, save it as WebP at around 80% quality, and make sure it loads only when needed. This often cuts file size by half or more with little visible change.
Why image size matters
Images are usually the heaviest part of a web page. Smaller files load faster, use less mobile data and help your page pass speed checks such as Google's Core Web Vitals.
1. Resize first
A photo straight from a camera can be thousands of pixels wide, far more than any screen shows. Resize it to the largest size it will appear on your page. This alone often saves the most.
2. Choose the right format
- WebP: usually the smallest for photos and graphics, and supported by all current browsers.
- JPEG: a safe choice for photos that must work everywhere.
- PNG: best for graphics with sharp edges or transparency, but makes bigger files.
- SVG: ideal for logos and icons, because it scales without losing quality.
3. Pick a quality setting
For WebP and JPEG, a quality around 75 to 85 is a good balance. Lower numbers make smaller files but show more compression. Compare before and after.
4. Compress in your browser
The Image Compressor converts and shrinks images on your own device. Nothing is uploaded, and camera and location data is removed.
5. Load them wisely
- Add width and height to each image so the page does not jump as it loads.
- Use lazy loading for images below the fold.
- Serve smaller versions to small screens with responsive images.
Try the free tools
Frequently asked questions
Does compressing hurt quality?
Lossy formats discard some detail, but at a sensible quality setting the change is hard to see. PNG compression is lossless.
Is WebP supported everywhere?
All current major browsers support it. If you need to support very old software, offer a JPEG fallback.
Are my images uploaded?
Not with the ScriptGarden Image Compressor. It works entirely in your browser.