How to compress images for a website without visible quality loss
A practical order of operations: pick the right format, resize to the size you display, then lower quality until you can see a difference and step back.
Images are usually the heaviest part of a web page, and most of that weight is avoidable. You do not need special software: three decisions, taken in the right order, remove most of the excess. Format first, dimensions second, quality last.
Why file size matters
A large image delays the moment a visitor sees the main content of the page, uses mobile data, and costs you bandwidth. Search engines measure loading experience too: Google’s Core Web Vitals include Largest Contentful Paint, and on many pages the largest element is a hero image. Smaller files are one of the most direct ways to improve it.
Choose the format first
| Format | Good for | Avoid for |
|---|---|---|
| JPEG | Photos and images with smooth gradients. Universally supported. | Transparency (not supported), text and sharp edges (blurry artifacts). |
| PNG | Screenshots, logos, interface graphics, anything needing exact pixels or transparency. | Photos: lossless compression makes them several times larger than JPEG. |
| WebP | Both photos and graphics. Supports transparency and usually beats JPEG at the same visual quality. | Very old software that cannot open it, for example some email clients or legacy editors. |
For a website built in the last few years, WebP is a safe default: every current major browser displays it. Keep JPEG when the image will also be sent by email or opened in older desktop software.
Resize before you compress
Dimensions matter more than the quality setting. A phone photo is often 4000 pixels wide; if your blog column is 800 pixels wide, the browser downloads around 25 times more pixels than it can show. No quality slider can compensate for that.
Measure the largest size the image is displayed at, then double it so it stays sharp on high-density screens. An image shown at 800 CSS pixels needs to be about 1600 pixels wide, not 4000.
Open the Image ResizerSet an exact width with the aspect ratio locked.Find the quality floor
Lossy formats let you trade quality for size. The relationship is not linear: going from 100 to 85 typically cuts the file dramatically with no visible change, while going from 60 to 40 saves little and adds visible blocks and smearing.
- Start at quality 80 and compare the result with the original at 100% zoom.
- Lower it in steps of 5 until you notice a difference in edges, skin tones or skies.
- Step back up one level. That is the floor for this image.
Photos with lots of fine texture (foliage, gravel, fabric) need higher quality than flat illustrations. If the compressed file is larger than the original, the original was already well compressed: keep it.
Open the Image CompressorCompare sizes before and after, without uploading the image.Metadata and privacy
Photos from phones often carry EXIF metadata, including the camera model and sometimes GPS coordinates. Re-encoding an image in the browser, as Toolora’s image tools do, writes a new file without that metadata. That is usually what you want for publishing. If you need to keep copyright or color-profile information, use desktop software that preserves it.
Checklist
- Photo or graphic? Choose JPEG or WebP for photos, PNG or WebP for graphics.
- Resize to twice the displayed width, never larger than the original.
- Compress from quality 80 and adjust by eye.
- Set
widthandheightattributes on the<img>tag so the page does not jump while it loads. - Add
loading="lazy"to images below the first screen.