How Image Dimensions Affect but Do Not Determine File Size
Measure the pixel grid separately from encoded bytes, then test dimensions, format, and quality against a real destination.
Keep the measurements separate
Width × height = pixel count, not encoded file bytes.
File size is the measured byte count of a particular PNG, JPEG, or WebP output.
Display size in CSS or a document can differ from the file's intrinsic pixel dimensions.
Worked test: halve both dimensions
Start with a 2400 × 1600 source and generate 1200 × 800 from that source. Expected pixel count falls from 3.84 million to 0.96 million. Record the source and output MIME, bytes, and visual result; do not assert a 75% byte reduction until the actual Blob has been measured.
Why equal grids can have unequal bytes
A flat two-color diagram and a noisy photograph may share 1200 × 800 dimensions but compress differently. PNG, JPEG, and WebP also encode different structures, and JPEG/WebP quality is a browser hint rather than a target byte budget.
Optimize against a destination
Read the destination's pixel, MIME, and byte limits.
Choose the smallest dimensions that preserve required detail and density.
Choose a format based on transparency, content, and recipient support.
Generate from the original, inspect artifacts, measure bytes, and iterate one variable at a time.
Common failed assumptions
Halving width alone does not halve the full pixel grid; quality 0.8 does not mean 80% size; PNG quality is not controlled by this tool; converting a small image cannot restore missing detail; and repeated JPEG/WebP exports can compound artifacts.
Record enough evidence to reproduce the choice
For each candidate, note source name, source and output dimensions, selected and actual MIME, quality hint when applicable, output bytes, visible defects, and destination test result. Keep the source because browser encoders and requirements can change.
FAQ
About this topic
If both sides halve, why might the file barely shrink?
Headers, transparency, content complexity, and a different encoding can dominate; only the pixel count is guaranteed to become one quarter in this example.
Can a larger-dimension file use fewer bytes?
Yes. A simple or aggressively encoded image can be smaller than a detailed image with fewer pixels, although quality and use may differ.
What is the safest order for a strict upload limit?
Meet composition and pixel requirements first, choose an accepted format, then adjust lossy quality while inspecting the actual output and measured bytes.
Further reading
Related articles
Keep exploring