Image basics
Image Dimensions vs File Size: What Is the Difference?
Image dimensions and file size are related, but they are not the same measurement. Dimensions describe how many pixels an image contains. File size describes how many bytes are needed to store the encoded file. Confusing the two leads to a lot of unnecessary image optimization work.
Dimensions describe the pixel grid
An image that is 3000 × 2000 pixels contains six million pixel positions. If you resize it to 1500 × 1000, you reduce the pixel grid to 1.5 million positions. That can reduce memory and storage needs because there is less visual data to represent.
File size describes encoded storage
A file size such as 850 KB or 4 MB tells you how much storage the encoded image occupies. Two images with identical dimensions can have very different file sizes because of format, compression level, transparency, and image complexity.
A detailed photograph can be harder to compress than a simple graphic with large areas of the same color.
Why a smaller-looking image can still be a large file
CSS or an app can display a large source image at a small visual size without changing the actual source file. A 4000-pixel image shown at 400 CSS pixels is still a 4000-pixel file unless it was resized before delivery.
Which control should you use?
Use resizing when the image has more pixels than the destination needs. Use compression when the dimensions are already appropriate but the encoded file is still too large. Often the best result uses both, in that order.