Updated: August 1, 2026
Quick answer: Save the original, determine the largest required display size, choose JPEG/WebP/AVIF for photos or PNG/WebP/SVG for graphics, export a moderate candidate, and compare it at 100% and in its final layout.
The phrase “compress without losing quality” describes an acceptance test, not a single button. Your goal is to reduce bytes while keeping the details that matter for the destination: readable text in a screenshot, a clean product edge, natural skin tones, or a transparent logo with no halo.
This workflow works for a local editor, a browser compressor such as LessMB, or a build pipeline. The order matters because reducing unnecessary pixels is usually safer than aggressively lowering encoding quality.
Before You Start: Identify the Job
Write down the destination and the failure that must be avoided.
| Destination | Protect first | Typical first choice |
|---|---|---|
| Blog or article | readability and page weight | WebP or JPEG for photos; PNG/WebP for screenshots |
| Ecommerce product page | labels, texture, and zoom detail | WebP/AVIF plus an appropriately sized original |
| client compatibility and predictable dimensions | JPEG or PNG, tested in the target clients | |
| Social preview | crop, text, and platform reprocessing | export to the platform’s required dimensions |
| Private sharing | pixels and privacy | local processing; remove GPS only if appropriate |
The same source can need different delivery copies. Do not replace a high-resolution master just because a web page needs a 1200px version.
Step 1: Preserve the Original
Create a working copy and keep the original in a separate folder. This protects you from a bad export and makes later re-use possible. Repeatedly saving a JPEG after each adjustment can introduce additional artifacts, so make the final export from the cleanest source available.
If the image is part of an inventory or design system, name the output with its role and dimensions, for example product-front-1200.webp. A filename does not change compression, but it makes variants easier to audit.
Step 2: Find the Largest Useful Dimensions
Inspect the destination CSS or upload requirements. If an image is displayed at 800 CSS pixels and there is no zoom, a 5000px-wide source is likely carrying pixels that never reach the viewer. Resize to the largest useful display width, then retain a larger source when print or zoom is a real requirement.
For responsive pages, create multiple widths rather than serving one oversized file everywhere. The browser can choose from srcset and sizes; Google’s image guidance recommends responsive image practices, and web.dev’s responsive image guide explains why a desktop-sized asset can waste data on a phone.
Example:
<img
src="photo-1200.webp"
srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 700px) 100vw, 800px"
width="1200"
height="800"
alt="A ceramic mug on a wooden table"
/>
The width and height values describe the intrinsic ratio; they do not force every visitor to download the largest copy.
Step 3: Pick the Format From the Pixels
Use the format that matches the asset:
- Photos: start with WebP, AVIF, or JPEG.
- Screenshots and line art: start with PNG or WebP and inspect text at 100%.
- Transparency: use PNG or WebP; do not use JPEG if the alpha channel matters.
- Logos and simple icons: keep SVG when the source is vector and the destination accepts it.
- Animation: compare animated WebP/GIF or a short video based on the destination.
The MDN format guide is a useful reference for capabilities and fallback behavior. Format choice can save more than a small adjustment to a quality value.
Step 4: Export Two or Three Candidates
Do not chase a target by making one file smaller and smaller. Export a small test set:
- a conservative candidate with more detail;
- a middle candidate for normal web use;
- a smaller candidate only if the destination has a strict limit.
For JPEG or WebP photos, a quality range around 75–85 is a reasonable starting point. It is not a promise: a face, a fine pattern, or a low-contrast gradient may require a higher setting, while a simple image may tolerate a lower one. AVIF and other codecs use different scales and encoders, so compare results rather than copying the number.
Step 5: Remove Only Unneeded Metadata
Metadata may include EXIF camera details, timestamps, GPS coordinates, copyright, and color information. Removing GPS from a casual photo can protect privacy; removing a required color profile or rights record can create a new problem.
For a public web copy, remove optional capture metadata when it is not part of the publishing requirement. Preserve the original with its metadata if the file may later be edited, cataloged, or licensed.
Step 6: Inspect the Output in Two Ways
Open the candidate side by side with the original at 100% zoom. Look for:
- text that has become soft or developed halos;
- block boundaries around high-contrast edges;
- banding in skies and smooth gradients;
- waxy skin or missing hair and fabric texture;
- color shifts in brand assets;
- light or dark fringes around transparent objects.
Then view it at the actual rendered size. A 100% crop can make harmless differences look dramatic, while a small thumbnail can hide a real text problem. Both views are necessary.
Step 7: Verify the Uploaded Copy
CMSs and social networks may resize or recompress a file after upload. Check the URL delivered to a real browser, not only the local export. Inspect the response type, dimensions, and file size, then test on a slower mobile connection if the image is important to the first screen.
For page images, reserve their aspect ratio so the content does not jump while the file loads. web.dev’s CLS guidance explains why explicit dimensions help the browser allocate space early.
What to Change When the Result Is Still Too Large
Change one variable at a time:
- remove unnecessary metadata;
- reduce dimensions if they exceed the real requirement;
- switch to a suitable format;
- lower quality slightly and recheck the important details;
- create responsive variants for different display sizes.
If the image is still too large after a reasonable visual compromise, the target itself may be unrealistic. Keep a larger copy for zoom, but use a separate delivery copy for the page.
What Not to Do
- Do not overwrite the only original.
- Do not turn every image into JPEG; it cannot preserve transparency.
- Do not compare files with different pixel dimensions and call the format the winner.
- Do not judge quality only from a tiny preview.
- Do not assume an online tool is appropriate for confidential material.
- Do not serve a 3000px file to a 360px viewport just because it was compressed.
A Five-Minute Final Check
Before publishing, confirm the output has the required dimensions, opens in the destination, keeps readable text and important detail, and is smaller than the original for a reason you can explain. Check the real URL after upload, and keep the master untouched.