How Image Compression Works: Resolution, Quality and File Size
Understand the three main levers that determine whether an image is genuinely optimized or merely damaged.
Pixel dimensions come first
A 4000×3000 photo contains 12 million pixels. If it will only appear 1000 pixels wide, storing all those pixels is usually wasteful. Resizing can reduce file size with no visible downside at the intended display size.
Lossy quality is the second lever
JPEG and lossy WebP approximate image information so it can be stored more compactly. Lower quality means smaller files, but artifacts become increasingly visible around edges and textures.
Image content changes compression efficiency
A blue sky and smooth wall compress easily. Leaves, hair, noise and fine textures are harder. Two images with identical dimensions and quality settings can therefore have very different file sizes.
Metadata also takes space
Camera files can include EXIF data such as device information, orientation and timestamps. Removing unnecessary metadata can save some space, though usually far less than resizing a large photo.
Optimize for the destination
There is no universal “best quality percentage.” Use the real display dimensions and inspect the result where it will be used.
A task you can work through
A 4000 by 3000 phone photo has 12 million pixels. If it is displayed at 1000 by 750, resizing first reduces each dimension by four and the pixel count by sixteen, usually a much larger saving than lowering JPEG quality alone. Save one 1000-pixel-wide version at a moderate quality setting and inspect it at the actual display size. The site’s image compressor uses browser canvas export; its output depends on source format and quality setting.
Where this approach fails
Compression can fail to reduce size if a tiny, already-optimized image is re-encoded or if a photograph is exported to a lossless format. Fine text, logos and screenshots can show ringing or blurred edges at settings that look fine on natural photos. Changing a PNG to JPEG loses transparency. Some camera metadata can be dropped during canvas export, which matters if orientation or provenance must be retained.
Check the result before using it
Write down source dimensions and bytes, then record output dimensions and bytes. Check faces, text, thin lines and smooth gradients at 100% and at intended display size. Confirm orientation is correct and a transparent area has not turned opaque. If the output is bigger or visibly worse without meeting a target requirement, keep the original.
A controlled image experiment
Take a non-sensitive photo and make three exports: original dimensions at moderate JPEG quality, half dimensions at the same quality, and original dimensions at lower quality. Compare all three byte sizes and appearance at the intended display width. The half-size copy may have the best visual/size balance for a webpage, but it will be unsuitable if the same image must later fill a print layout. This experiment isolates pixel count from quality setting instead of changing both at once.
Check beyond file size
Look for block artifacts around hard edges, banding in smooth skies, softened hair and distorted small text. A file that is 60% smaller is not automatically a better output if the destination needs legible detail. PNG and JPEG encode very different kinds of information, so the same quality number does not have a universal meaning across formats. Record the intended use alongside any size comparison.
Try the related tool
Shrink JPG or PNG file size, keep quality. The tool page explains its implementation and limitations. Keep your original and inspect any important result.
Compress Image →Technical references
These external references explain the underlying formats or browser APIs. The worked examples above describe this site's specific tool behavior.