Image dimensions vs file size: what changes the bytes?

It's tempting to assume file size and pixel dimensions are the same thing, because they usually move together. They aren't the same thing. Dimensions describe how much information an image contains before compression; file size is what's left after format and quality have done their work. A 3000×2000 image can be smaller than a 1000×700 one if the first is a heavily compressed JPG and the second is an uncompressed PNG of a noisy photo.

Three independent levers

• Dimensions — total pixel count. Halving width and height removes roughly 75% of the pixels and, usually, a similar share of the file size.
• Format — JPG and WEBP discard information the eye barely notices; PNG keeps everything. This alone can be a 5–10x difference on a photograph.
• Quality setting — within a lossy format, how aggressively detail is discarded. Diminishing returns kick in fast above about 85.

Uncompressed memory size vs compressed disk size

Every pixel decoded in a browser occupies 4 bytes of RAM (one byte each for Red, Green, Blue, and Alpha), regardless of whether the file on disk is a 90 KB WebP or a 4 MB PNG. Multiplying width × height × 4 reveals the uncompressed memory footprint: a 4000×3000 (12-megapixel) image always requires 48 MB of raw pixel memory per canvas buffer. On disk, however, the encoder only writes compressed blocks — which is why reducing pixel dimensions lowers both network transfer time and browser decoding memory, whereas lowering the quality slider only reduces the network download.

Why a PNG won't shrink no matter what you try

PNG has no quality dial — it is lossless by definition. Running a PNG through a 'compressor' with nothing else changed will produce a file roughly the same size, sometimes even fractionally larger, because a competent encoder already found a near-optimal lossless representation. The only ways to actually shrink a PNG are to reduce its dimensions, reduce its colour count, or convert it to a lossy format like WEBP or JPG.

Which lever to pull first

Dimensions first, always. It's the only lever that reduces file size with zero quality trade-off, provided you're not displaying the image larger than the new size. Format comes second — moving a photo from PNG to JPG or WEBP is close to a free win. Quality is the last lever to touch, and the one to touch most gently, because it's the one most likely to introduce visible artefacts.

A practical example

Each step targets a different lever, and each one is measurable — that's the point of doing them in order and checking the byte count after each, rather than guessing at a single quality number and hoping.