When an image is too large, it is tempting to drag the quality slider straight down. That can blur lettering and texture before the file becomes usefully small because the original pixel dimensions never changed.
Find out how large the image will actually appear, resize it, choose the format, and tune quality last. That order is easier to control and easier to repeat across a batch.
Resize before lowering quality
Crop and resize first, then choose a format and tune quality. Check the result in the real page. A file-size target means little while dimensions and format are still changing.
What resolution, quality, and complexity control
Resolution here means pixel width and height. A 4000 by 3000 image contains 12 million pixels, while 1600 by 1200 contains about 1.9 million. If a page displays the image at 800 pixels wide, carrying all 4000 pixels often adds transfer and decoding work without adding visible value.
Encoding quality tells a lossy codec how aggressively it may discard hard-to-notice information. It is not a universal percentage: a value of 80 in two tools or formats can produce different results. Complexity matters too. Flat backgrounds are easier to compress than foliage, hair, sensor noise, or dense fabric texture.
| Variable | Typical effect | Common risk | Where to inspect |
|---|---|---|---|
| Pixel dimensions | Smaller dimensions reduce size substantially | Insufficient detail or zoom | Target page and dense displays |
| Encoding quality | Lower values reduce lossy output | Banding, blocks, soft edges | Gradients, skin, text, shadows |
| Format | Changes compression and features | Lost alpha or failed compatibility | Browser, CMS, editing software |
| Scene complexity | Complex detail needs more data | Files vary under identical settings | Create standards by content type |
Work backward from the display area
Find the maximum content width instead of inheriting the camera dimensions. A 1200 CSS-pixel article column may need a larger source for dense displays, but not an unlimited one. A zoomable ecommerce gallery, a full-screen portfolio, and an inline article image are separate requirements and should have separate outputs.
Responsive sites often generate several candidates and let the browser choose. If only one file can be supplied, roughly 1.5 to 2 times the maximum display width can be a useful test starting point for dense displays. It is a starting point, not a rule for every product or audience.
Example: an article header
A 6000 by 4000 camera file is 8 MB but appears in a 960-pixel article column. Crop it first, then test a 1600- or 1920-pixel JPG and WebP. This usually preserves useful detail more cleanly than keeping 6000 pixels and forcing the quality setting extremely low.
Build a repeatable quality test
Begin at a higher quality and step downward while retaining each candidate. Check at 100% view, not only as a thumbnail. Hair, product edges, lettering, skies, and painted walls reveal block artifacts, halos, and color banding quickly. When those defects become visible, return to the last acceptable export.
Group batches by content. Photography, screenshots, and transparent graphics should not share one preset. Record longest edge, format, acceptable quality range, and a realistic size budget for each category instead of forcing every file under one arbitrary number.
- Confirm the crop and maximum display dimensions, then resize the pixels.
- Choose two candidate formats and export a high-quality first pass.
- Lower quality in steps, recording file size and visible defects each time.
- Inspect the finalists in the real page on both phone and desktop.
- Save the successful settings as the starting point for the next similar batch.
Why some images remain large
High-ISO noise, foliage, water, woven material, and dense lettering contain high-frequency information that a codec cannot describe cheaply. Before dragging quality lower, ask whether dimensions can be reduced, unnecessary sharpening removed, or a more appropriate format selected.
A photographic PNG is often large because lossless compression is a poor fit for that content, not because the tool failed. Conversely, a low-quality JPG screenshot may be small but no longer readable. The image task sets the acceptable size-quality tradeoff.
Frequently asked questions
Does quality 80 mean that 80 percent of detail remains?
No. It is an encoder parameter, not a measurable percentage of retained detail, and values are not directly comparable across tools or formats.
Should I compress before resizing?
Usually crop and resize first, then tune encoding quality. Repeatedly opening and saving a lossy file can also accumulate damage.
Why do two photos at the same size and quality have different file sizes?
Their complexity differs. Noise, hair, foliage, and texture require more data than flat or defocused regions.