The practical answer: first resize the image to the largest dimensions it will actually display, then choose the right format and apply moderate compression. Keep a master copy, compare the output at 100% and at its intended display size, and stop when further savings create visible artefacts.
Lossy versus lossless image compression
Lossless compression rewrites data more efficiently without changing the decoded image. It suits PNG graphics and SVG structure, but the available saving depends on how efficiently the source was already stored. Lossy compression discards selected visual information. JPEG and lossy WebP can become much smaller, but repeated or aggressive encoding can damage detail.
| Method | Best suited to | Main trade-off |
|---|---|---|
| Lossless | Logos, screenshots, line art and transparent graphics | Perfect pixel preservation, usually more modest savings |
| Lossy | Photographs, textured scenes and colour gradients | Greater savings, with quality depending on the chosen settings |
“Without losing quality” normally means without a visible loss for the intended use, not that no source data changes. If exact pixel identity matters, use a lossless workflow.
Why dimensions, format and encoding affect file size
Pixel dimensions determine how many pixels must be stored. Reducing a 4000 × 3000 photo to 1600 × 1200 removes 84% of its pixels before the encoder does any work. Format then determines how those pixels or vector instructions are represented, while encoding settings decide how aggressively redundancy or detail is removed.
- Crop first: pixels outside the useful composition add weight.
- Match the display: do not send a camera-size source into a 900px content column.
- Choose by content: a photographic PNG can be far larger than a suitable JPEG or WebP.
- Avoid repeated lossy saves: return to the master rather than recompressing a compressed copy.
When dimensions are the main problem, follow the guide to resizing images without stretching or losing quality before encoding the final file.
JPEG, PNG, WebP and SVG compress differently
| Format | Compression behaviour | Typical strength |
|---|---|---|
| JPEG | Lossy; removes photographic detail selectively | Photos and gradients without transparency |
| PNG | Lossless; optimises repeated pixel patterns and encoding | Screenshots, flat graphics and transparency |
| WebP | Supports lossy or lossless encoding and transparency | Modern web photos and graphics |
| SVG | Optimises XML structure rather than pixels | Logos, icons and genuinely vector illustrations |
Use the JPEG Optimizer for photographic JPEG files and the PNG Optimizer for lossless PNG optimisation. A format-specific tool makes the processing choice explicit.
See the JPG, PNG, WebP and SVG comparison for a fuller decision guide, including transparency, animation and vector artwork.
Practical before-and-after compression examples
These examples are realistic workflow illustrations, not guaranteed outputs; content and source encoding always change the result.
| Use | Before | Practical change | Illustrative after |
|---|---|---|---|
| Website hero | 4000 × 2667 JPEG, 4.8MB | Resize to 1600px wide, then moderate JPEG compression | Approximately 280KB |
| Email banner | 2400 × 1200 PNG, 3.1MB | Resize to a 1200 × 600 2x source and export suitable JPEG | Approximately 180KB |
| Social graphic | 2160 × 2160 PNG, 1.6MB | Keep required dimensions and losslessly optimise PNG | Approximately 1.1MB |
A website hero rewards dimension reduction; the email banner rewards both resizing and format choice; the flat social graphic may only offer a modest lossless saving.
How to recognise excessive compression
Look around edges
Block boundaries, ringing or bright halos around text and high-contrast shapes indicate that a lossy setting is too aggressive.
Inspect smooth areas
Skies, walls and studio backgrounds can reveal colour banding, blotchy patches or lost texture before a busy region does.
Judge at the intended size as well as 100%. A tiny artefact visible only at extreme zoom may not matter on a thumbnail, while softened product text can make even a small file unusable.
Common compression mistakes and a safer workflow
- Chasing the highest percentage reduction instead of an acceptable visual result.
- Compressing dimensions that are far larger than the final placement.
- Using PNG for every photograph because it sounds higher quality.
- Overwriting the only master image.
- Judging a large image only as a tiny preview.
- Assuming an already optimised source must shrink again.
Frequently asked questions
Can an image be compressed with absolutely no quality loss?
Yes, when a lossless method can store the same pixels or vector structure more efficiently. Lossy JPEG or WebP compression changes image data, even when the visible difference is negligible.
Does reducing image dimensions count as compression?
Resizing and compression are different operations, but reducing unnecessary dimensions often produces the largest practical file-size saving before encoding.
Why did my image not become smaller?
It may already be efficiently encoded, contain complex detail, or use a format whose lossless optimisation has little redundant data to remove.
Should I compress images for email and social media?
Usually yes, but first prepare the correct dimensions for the placement and retain enough quality for readable text, products and important visual detail.