Best Image Compression Settings for Websites
Use a repeatable comparison method to choose image compression settings by format, content type and display size instead of trusting one universal quality number.
In this guide
The best website compression result is the smallest file that still looks acceptable in the image's real context. No quality number works for every photograph, screenshot, format and encoder. Start near the middle, change one input at a time, and record both appearance and delivered bytes.
TinyImage starts at 75, with a range of 40 to 95 in steps of 5. Treat that number as a compression preference, not a label for the final codec setting. TinyImage may try multiple candidates—including lower internal quality values—and select one of those results. Compare the files returned from inputs such as 70, 75 and 80; do not assume they are exact encoder-quality samples or that their sizes will be perfectly ordered.
Why one quality number cannot be universal
A quality value is an encoder instruction, not an objective percentage of detail retained. JPEG quality 75 and WebP quality 75 do not promise the same appearance or size. Even two encoders for one format may interpret their scales differently.
Content matters too. Fine hair, foliage and low-light noise can be difficult to compress; flat backgrounds may expose banding; high-contrast text can reveal ringing or color bleed. Defects hidden in a small thumbnail may be obvious in a full-width hero.
Web.dev's image performance guide recommends trying different compression levels to find a suitable compromise between quality and size. It also distinguishes lossy JPEG, WebP and AVIF output from lossless formats and modes such as PNG and lossless WebP.
A repeatable comparison method
- Set delivery dimensions first. Resize a copy to the largest dimensions the layout needs. Keep the crop fixed.
- Choose the delivery format. Use JPEG, WebP or AVIF for a lossy candidate. Treat PNG as a separate palette and lossless-compression workflow.
- Process a baseline with input 75. Keep the original untouched and use clear filenames such as
product-chair-input-75.webp. - Process inputs 70 and 80. Compare all three returned files at the intended CSS size and on relevant displays. These are three TinyImage requests, not three guaranteed codec-quality levels.
- Test one neighboring input when useful. If the result from 70 passes and is smaller, try 65. If it fails, compare a higher input. Judge every returned file on its own instead of assuming a monotonic quality curve.
- Record actual bytes and observations. Choose the smallest returned candidate that passes; never infer the result from the slider alone.
- Verify the page. Confirm the intended file is requested and responsive markup is not sending an oversized source.
Define “passes” before comparing. A product image may require accurate texture at the available zoom level; a thumbnail may only need to remain clean at its fixed size. Legible text and one-pixel lines may rule out lossy compression for a screenshot.
You can compare returned files with the relevant JPEG compressor, WebP compressor, or AVIF compressor. Keep the source, crop and dimensions identical during the comparison.
Starting points by image type
These are first-pass TinyImage input values, not exact encoder settings or guarantees. Move in steps of 5 and let the inspected output decide.
| Image type | First TinyImage input | Other inputs to compare | What to inspect |
|---|---|---|---|
| General photograph | 75 | 70 and 80 | Texture, faces, edges and smooth skies |
| Product photograph | 80 | 75 and 85 | Material detail, fine edges and color transitions |
| Small editorial thumbnail | 70 | 65 and 75 | Recognizable detail at actual card size |
| Large hero photograph | 80 | 75 and 85 | Broad gradients and detail across the full viewport |
| Screenshot exported as a lossy format | 85 | 80 and 90 | Text, thin rules and solid-color boundaries |
| Logo, icon or diagram | Do not begin with lossy quality | Test SVG or PNG | Crisp geometry, transparency and exact color |
The table intentionally does not assign a PNG quality number. PNG requires a different decision model.
Test JPEG, WebP and AVIF independently
JPEG, WebP and AVIF can encode photographs lossily, but their scales are not interchangeable. Treat every format's returned file as a separate result.
JPEG
JPEG suits many photographs. Watch high-contrast edges, small text and repeated re-encoding. TinyImage can try lower-quality JPEG candidates when the first encode does not save enough space, so the slider is the starting input rather than a guarantee about the returned file. Keep a high-quality master: a new export cannot restore detail removed from an earlier lossy JPEG.
WebP
WebP supports lossy and lossless modes plus transparency. TinyImage first tries the selected input and may try a lower-quality fallback when the first result misses its savings target. If Smart resize is enabled, it may also downscale an oversized input. Compare the returned output with the source rather than reading the slider as final encoding metadata. Check semi-transparent edges on the page's real light or dark background.
AVIF
AVIF also supports lossy and lossless compression. TinyImage derives multiple internal AVIF candidates from the selected input, applies format-specific floors and caps, and can choose among those candidates. Use the control to request a different compression preference rather than to measure an exact AVIF quality value. Inspect smooth color transitions and fine texture, and account for the encoding work added to the publishing pipeline.
MDN's image format guide documents each format's compression modes, transparency support and intended uses. Those capabilities select the candidates; inspected exports select the setting.
Handle PNG as palette reduction, not JPEG quality
PNG is normally lossless. Additional compression effort may reduce bytes without changing decoded pixels, so it is not equivalent to lowering JPEG quality.
An indexed PNG uses a color palette. Reducing that palette may save more space, but colors can merge and transparency transitions can change. The file compresses its indexed pixels losslessly, yet the palette conversion can alter the image.
Use the PNG compressor and inspect:
- brand colors and subtle background shades;
- soft shadows and semi-transparent edges;
- gradients for banding;
- small text and one-pixel rules; and
- whether a full-color PNG should instead be a photographic WebP or JPEG.
A small palette may preserve a simple illustration cleanly. Screenshots containing shadows, photos and antialiased text usually need closer inspection.
Keep dimensions separate from compression quality
An oversized image can remain wasteful after careful encoding. Web.dev's image size guidance recommends matching source dimensions to their display size while accounting for device pixel ratio.
A 400-CSS-pixel card should not receive only a 2000-pixel source and rely on CSS to shrink it. Create width candidates with the image resize tool, then compress those outputs. Use srcset and sizes when the slot needs different widths across viewports.
Keep dimensions and quality in separate test rounds so you know which change produced a saving or defect.
Use a worksheet instead of invented targets
An arbitrary rule such as “every image must be under 100 KB” ignores image count, role and viewport. Record real candidates instead:
| Candidate | Dimensions | File size | Visual check | Decision |
|---|---|---|---|---|
| Input 80 | Record pixels | Record bytes | Pass or note defect | Keep or reject |
| Input 75 | Same source pixels | Record bytes | Pass or note defect | Keep or reject |
| Input 70 | Same source pixels | Record bytes | Pass or note defect | Keep or reject |
| Input 65 | Same source pixels | Record bytes | Pass or note defect | Keep or reject |
This creates evidence another editor can verify. Test a varied sample before applying one preset to a collection, and allow exceptions for noisy, dark or detail-heavy files.
After publishing, use the TinyImage website analyzer to identify heavy raster images. A person must still make the visual acceptance decision in context.
Common questions
Is quality 75 always the best setting?
No. It is TinyImage's default input and a useful middle candidate. Choose the input that returns the smallest result meeting the visual standard for that image and placement, while remembering that the backend may evaluate adaptive candidates.
Should thumbnails use lower quality than hero images?
Often, but not automatically. Their smaller display size may hide some defects, while a page containing many thumbnails makes total bytes important. Test representative thumbnails at their actual rendered size.
Does the maximum quality setting mean lossless?
No. A maximum quality value in a lossy encoder does not necessarily switch the format to a lossless mode. Choose an explicit lossless format or mode when exact pixel preservation is required.
Can I reuse one preset for an entire website?
Use presets by content class—such as product photos, editorial thumbnails and screenshots—rather than one site-wide number. Validate a varied sample, record exceptions, and revisit the preset when the design, encoder or source material changes.