JPEG Compression Guide: Best Quality Settings for Smaller Image Files

Overview

JPEG is best suited to photographs, artwork with continuous tones, gradients, and other images containing many colors. It uses lossy compression, which means some visual information is discarded when the file is saved. The aim is not to preserve every original pixel; it is to remove information that is unlikely to be noticed at the image’s intended display size.

JPEG quality settings are usually presented on a scale such as 0–100, but the scale is not standardized across every application. A quality value in one editor may not produce the same file size or appearance as the same value elsewhere. Treat the number as a starting point, then inspect the exported image at its actual use size.

For many website images, a quality range around 70–85 is a sensible first test. Portfolio images, product previews, and client-facing work may justify a higher setting, while large background images or secondary thumbnails may tolerate a lower one. These are working ranges, not rules. A detailed photograph, a soft gradient, and a high-contrast graphic can respond very differently to compression.

Before exporting, decide whether JPEG is the right format. Logos, line art, screenshots with text, and images requiring transparency may be better served by PNG, SVG, WebP, or another format. For a broader comparison, see JPEG vs PNG vs WebP for design assets.

Checklist by scenario

For website images

• Resize the image to the largest display dimension required by the page. Do not upload a full-resolution original when the layout only displays a smaller version.
• Export in the color profile expected by your workflow, commonly sRGB for general web publishing.
• Start with a JPEG quality setting around 75–85, then compare the result with the original.
• Set a file-size target appropriate to the image’s role. A prominent hero image may need more detail than a small card thumbnail.
• Check the image on both a large screen and a smaller display. Look for blocky edges, ringing around text, banding in gradients, and loss of fine texture.
• Use descriptive filenames and preserve the correct file extension after compression.

If you manage a WordPress, Shopify, or Webflow site, compression is only one part of the process. Image dimensions, responsive variants, delivery settings, and caching also affect loading. Use the workflow in How to Make JPEG Images Load Faster on WordPress, Shopify, and Webflow as a companion checklist.

For portfolios and design presentations

• Keep a high-quality master file separate from the web-ready JPEG.
• Export at the dimensions used by the portfolio template rather than relying on the browser to scale a much larger file.
• Begin around quality 80–90 when subtle textures, gradients, or retouching details are central to the work.
• Inspect flat color areas and shadows, where compression artifacts can be especially visible.
• Use a consistent naming system so revised exports do not overwrite the source asset.

When presenting mockups or background imagery, compression should support the design rather than compete with it. You can also review free JPEG mockup and background resources for examples of assets that may need different export treatments.

For social media exports

• Confirm the platform’s current aspect ratio and pixel dimensions before exporting.
• Resize and crop first, then compress the final composition. Compressing an oversized source and resizing it later can create unnecessary work and less predictable results.
• Use a moderate-to-high quality setting for text-heavy designs, fine patterns, or small type.
• Zoom in on captions, logos, and high-contrast edges before publishing.
• Keep a clean master so you can create a new export when platform requirements or templates change.

For a reusable dimension checklist, see Social Media Image Size Templates: A JPEG Export Guide.

For batch processing

1. Organize originals and exports in separate folders.
2. Apply the same resize rule, color conversion, naming pattern, and quality range to the group.
3. Process a small sample first, including a portrait, a detailed image, a gradient, and a dark image if those types occur in the batch.
4. Compare file sizes and visual quality before processing the complete folder.
5. Open several finished files after the batch completes. Do not assume a successful process means every image is suitable.

What to double-check

Dimensions: Compression cannot compensate for an image that is much larger than its display size. Resize before the final JPEG export, while keeping the original project or master image untouched.

Visible artifacts: Inspect faces, hair, foliage, fabric, thin lines, and high-contrast boundaries. At lower settings, these areas may show block patterns, smearing, halos, or loss of texture.

Gradients and shadows: Smooth skies, walls, shadows, and brand backgrounds can reveal banding or uneven transitions. If a gradient is important to the design, compare a higher-quality JPEG with an alternative format.

Text and logos: JPEG is not always ideal for small type or sharp interface elements. If text must remain exceptionally crisp, consider whether a vector or lossless format is more appropriate. See JPEG vs SVG for logos, banners, photos, and web graphics for the format decision.

Metadata: Camera and editing metadata can add weight and may reveal information that is not needed for publishing. Remove unnecessary metadata during export when your workflow allows it, but retain copyright or attribution information when it is required for your asset-management process.

Color: Compare the exported JPEG with the source in the same color-managed environment. Unexpected profile conversion can change saturation, contrast, or skin tones, even when compression itself is acceptable.

File integrity: Open the final file, confirm that it has the intended extension, and check that filenames, dimensions, orientation, and transparency expectations are correct. JPEG does not preserve transparency.

Common mistakes

• Using the maximum quality every time: The largest export is not automatically the best export. Extra file size may be difficult to notice at the final display size.
• Compressing repeatedly: Saving an already compressed JPEG again can compound quality loss. Return to the original or a high-quality master whenever possible.
• Choosing one setting for every image: A photographic background and a screenshot with small text need different treatment. Test representative files instead of applying a universal number blindly.
• Skipping resizing: A quality setting does not reduce pixel dimensions. Oversized images can remain unnecessarily heavy even after compression.
• Judging only by the thumbnail: A tiny preview can hide artifacts around edges, type, and faces. Check the image at its actual display size and at a closer inspection level.
• Replacing the master file: Keep editable originals or high-quality masters separate from delivery JPEGs so you can revise crops, dimensions, and settings later.
• Ignoring format choice: JPEG is useful, but it is not a universal format. Review the differences among JPEG, PNG, WebP, and AVIF when the project includes transparency, interface graphics, or demanding performance requirements.

When to revisit

Revisit your JPEG compression workflow whenever the image’s role changes. A file created for a private presentation may need different dimensions and quality from one published as a homepage feature, downloadable asset, or social post. Review exports before seasonal campaigns, portfolio updates, product launches, and large content batches.

It is also worth checking the workflow when your design tool, content platform, image-delivery setup, or export presets change. Platform processing can introduce another round of resizing or compression, so inspect a published sample rather than relying only on the local export.

Use this final checklist before publishing:

1. Confirm the correct format for the image’s content.
2. Resize to the required display dimensions.
3. Choose a quality range and test a representative sample.
4. Inspect detail, gradients, text, color, and edges.
5. Remove unnecessary metadata without losing required attribution or ownership information.
6. Open the exported file and verify its name, dimensions, orientation, and color.
7. Compare the local export with the published result after upload.
8. Save the chosen settings as a documented preset for the next batch, then reassess if the workflow or destination changes.

A reliable compression process is less about finding one perfect JPEG quality number and more about making the same careful checks each time. Keep the master, test the export, and choose the smallest file that still serves the image’s purpose.