Compression settings that usually work
A good starting range for photos is 70 to 85 percent quality. For simple graphics you can often go lower without visible artifacts. If you must hit a strict size target, allow a small downscale and reduce quality in small steps.
Do not rely on guesswork. Always preview the result. What looks fine on a phone may show artifacts on a large monitor. Keep the target audience in mind when choosing settings.
Comparison table: compression choices
| Image type |
Recommended format |
Typical quality |
Notes |
| Photos |
JPG or WebP |
70-85% |
Best balance of size and quality |
| Illustrations |
PNG or WebP lossless |
100% |
Keeps clean edges |
| Icons with transparency |
PNG |
100% |
Transparency support |
| High end web |
AVIF |
45-65% |
Smallest files with good quality |
Real-world use case: newsletter images
Email clients often block large images or load them slowly. If you compress a 1.2 MB hero image down to 150 KB, it loads faster and improves engagement. Resize to the exact email width, then compress until you reach a practical target size. The image will still look sharp on most screens.
Avoiding common artifacts
Compression artifacts show up as blocky shadows or smeared edges. They are easier to spot in gradients and low light areas. If you see artifacts, increase quality slightly or try a more modern format like WebP. You can also try a small downscale, which often reduces visible noise and allows more compression.
Picking a realistic target size
A target size should match the channel. For a hero image on a website, 150 to 300 KB is often a good range. For email, 100 to 200 KB is safer. For social media, platform compression usually takes over, so focus on a clean upload under 1 MB. If you set an unrealistic target, you will either destroy quality or spend time chasing a number that does not matter.
A good strategy is to start with a moderate quality setting, then adjust by 5 percent increments. Small changes have a big impact on both file size and visual quality.
Compression workflow by destination
For websites, resize first, then compress to a web-friendly format like WebP. For email, keep dimensions small and use JPG at moderate quality. For archives, use lossless formats only when you need exact preservation. For client delivery, include both a high quality original and a compressed web version so the recipient can choose.
A repeatable compression checklist
If you work with many images, consistency matters. Keep a checklist: resize to display size, choose a format, set quality, preview, then export. Save a preset for common destinations like blog posts, email headers, and social posts. This keeps your results consistent and avoids guesswork.
When working with a team, agree on quality targets and formats. A shared guideline prevents wildly different file sizes and keeps your pages predictable.
Workflow tips for teams and clients
If multiple people touch image assets, consistency matters. Create a small set of shared presets for size and quality, then document when to use them. This keeps a blog post, landing page, and product page visually consistent. It also reduces revision cycles because everyone follows the same playbook.
Avoid quality loss from repeated edits
Every time you re-export a lossy format, you lose a little detail. The best practice is to keep a master file and only export once for delivery. If you need a new size or format, go back to the master. This keeps compression artifacts from stacking up.
Accessibility and context still matter
Even perfect image quality is less valuable if the context is unclear. Use descriptive filenames and alt text for web images. Make sure important text is not baked into the image if it needs to be searchable or readable by screen readers. The technical optimizations work best when paired with clear context.
Summary
Compression is one of the easiest ways to make images faster without hurting quality. Resize first, compress second, and choose the format that best matches the content. Small changes can cut file size dramatically.
