Smart Home & Tech

JPEG Quality Explained: How Compression Changes Image Size

By TechHomeTips Editors Published October 5, 2026 Updated October 27, 2026 4 min read Report a correction

JPEG quality is a lossy slider that starts at 80 percent in the site tool. Compare exports at display size and keep the byte count you measured.

About the tool

This guide explains how JPEG compression works and how to choose quality settings when preparing images in a browser. It does not describe a specific software tool with upload or AI processing. Instead, it outlines a manual workflow using client-side browser tools (e.g., Squoosh, ImageOptim web) where all processing happens locally on your device.

Methodology and limitations

The guide provides general starting points (quality 75–80) based on common web publishing practices. Optimal settings vary by image content, display size, and audience. No automated testing or benchmarking was performed. File size reductions cited (60–80%) are typical observations, not guaranteed results. The guide does not cover server-side optimization pipelines, CDN transformations, or CMS-specific image handling.

JPEG quality is a slider that throws away detail to make a smaller file. The number is not a grade. A setting that looks fine on a cloudy photo can band on a sunset or ring around text. This site’s Compress JPG slider starts at 80 percent. That is the control’s initial position. It is not the correct quality, and a file saved at 80 percent is not guaranteed to be smaller or “visually the same.”

The tool runs in your browser and does not upload the image. Judge the export at the size the page shows, next to the file’s byte count from Image Information.

Step 1: Know what the slider is discarding

JPEG is a lossy photo format. The encoder keeps an approximation of the picture. Lower on the slider often makes a smaller file, with a higher chance of blocks, halos on edges, and bands in smooth color. Check the actual export because file size depends on the picture and the encoder. Higher means more of the source survives and the file is often larger. There is no lossless position on this slider. If you need the original pixels, keep the master and do not use JPEG for that copy.

Saving a JPEG again from an existing JPEG discards more, even if you pick a high number the second time. The second file never recovers what the first save removed. Go back to the master or to the resized copy you made before the first export.

Step 2: Set the pixel size first

Quality cannot fix a file that is thousands of pixels wider than the column. Resize a copy with Image Resizer to the width the layout uses, or twice that if you are checking a dense screen and you will compare the extra bytes. The order is in reducing JPG file size. Compressing a camera original and then resizing the damaged result is the wrong order. The resizer has its own quality control when it writes a JPEG. Treat that as another lossy save. Prefer one resize, then one compress, from the master.

Step 3: Compare two exports, not a rule of thumb

  1. Export from the resized copy at the slider’s starting 80 percent.
  2. Export again from that same resized copy at a lower and a higher stop, such as one notch you can see on the control. Do not stack the exports.
  3. View them at the on-page size. Look at edges, text, and any smooth sky or wall.
  4. Read the byte sizes in Image Information. Keep the smallest file that does not show damage you can see at that size.

A “2 MB into 200 KB at quality 75” example does not predict the result for your photo. Treat such ratios as examples, not measurements. Your byte counts are the measurement.

Step 4: Leave JPEG when the picture is not a photo

Screenshots, logos, and hard-edged graphics pick up junk around letters when they are forced through JPEG. Use PNG or WebP for those, and read WebP or JPG before you convert a transparent image. JPEG has no transparency. A conversion that asks for a background color, such as WebP to JPG, is filling that in. Pick the color on purpose.

A page that is still slow after a sane JPEG is not a reason to drop the slider until the photo breaks. Check dimensions and the rest of the page in optimizing images.

A quality choice you can defend

  • The master is intact.
  • The web file’s pixel width matches the slot, or twice the slot if you kept the extra bytes on purpose.
  • You compared at least two slider positions made from the same resized copy.
  • You looked at display size, not at a huge zoom, and you wrote down the byte size.
  • You did not re-save the export.

Example: 80 percent on a sky, then a notch higher

A resized photo of a window and a pale sky is exported at the tool’s starting 80 percent. At the column width the window frame is clean and the file is smaller than the resize. A second export from the same resize, lower on the slider, bands the sky. They delete the banded file and keep the 80 percent export. They do not claim 80 percent is correct for the next photo, which is a screenshot of a menu. That screenshot stays a PNG because the letters fringe when it is a JPEG. The sky photo is this example. The next image gets its own pair of exports.

Last updated: October 28, 2026

Last reviewed October 22, 2026. Suggest a correction

Questions readers ask

Is 80 percent the right JPEG quality?

It is where Compress JPG starts. Look at your picture. Move the slider if you see damage or if the file did not shrink.

Why does a second save look worse even at a high setting?

The first JPEG already discarded detail. Saving again discards more. Return to the master or the resized copy.

Can I recover a small JPEG into a sharp one?

No. Keep the master. A tool cannot put back detail the encoder removed.

Does a smaller JPEG guarantee a faster page?

It removes bytes the browser would have downloaded for that image. Other files, scripts, and a width the layout does not need can still dominate. Check the byte size. Do not claim a ranking change.

What quality should I use for print?

This page is for a web slot. Print needs the master’s resolution and the printer’s instructions, not the web slider.

Sources and methodology

Claims that depend on an outside authority are tied to the references below. Product details change. Confirm the current specification sheet before you buy or install anything.

  1. HTMLCanvasElement: toBlob() method — MDN Web Docs (official), accessed October 24, 2026. Documents the browser JPEG quality parameter and export behavior; it does not recommend a universal setting.
  2. Lossy compression — MDN Web Docs (official), accessed October 24, 2026. Explains irreversible loss of image data; it does not quantify a compression ratio for a particular photo.

Information on this site is for general educational purposes and is not professional advice.

Parent topic: Smart Home & Tech · Related tool: Compress JPG