Why Your Images Eat Memory: Understanding Pixels, DPR, and Performance

1. Image‑Related Concepts

When a page is zoomed, the element dimensions in CSS pixels stay the same, but the visual size grows; this is achieved by adjusting the CSS pixel size to match the device’s physical pixels.

1.1 PX (CSS pixels)

Virtual pixel; all lengths in a browser are measured in CSS pixels (px).

A pixel is the basic unit of image display, an abstract concept rather than a fixed physical point. Different devices have different sampling units, and the physical pixel on a screen equals the device pitch.

Because physical pixel sizes vary, browsers adjust the CSS pixel size so that a CSS pixel appears roughly the same size on different devices, using the device pixel ratio for conversion.

1.2 DP (device pixels)

Device pixels (physical pixels) are the fixed points that compose a screen; each point’s size is measured in points (pt), an absolute unit.

When desktop resolution matches the physical resolution, display quality is optimal.

1.3 DIP (device‑independent pixel)

Also called logical pixel or dip.

CSS pixel = device‑independent pixel = logical pixel

You can obtain screen.width and screen.height to get these values.

1.4 DPR (devicePixelRatio)

Device pixel ratio = physical pixel / device‑independent pixel = physical pixel / CSS pixel.

In JavaScript, window.devicePixelRatio returns the current DPR. A DPR of 2 means one CSS pixel occupies a 2×2 block of device pixels.

The formula is 1 px = (DPR)² × 1 dp, meaning a CSS pixel consists of multiple device pixels.

1.5 PPI (pixels per inch)

PPI measures pixel density, i.e., how many pixels fit in a unit area of physical screen.

How to calculate PPI

Given screen resolution and diagonal size, PPI = diagonal pixel count / diagonal inches.

Example for iPhone 6 (5.5‑inch diagonal, 1920×1080):

斜边尺寸 = V(1920^2 + 1080^2)  // V means square root
ppi = 斜边尺寸 / 5.5
ppi = 401 ppi

PPI gives a more intuitive sense of screen fineness than resolution alone.

Revisiting CSS pixel relativity

By default a CSS pixel equals one physical pixel, but browser zoom (e.g., 200%) makes a CSS pixel span two device pixels. On high‑PPI devices, a CSS pixel may already cover multiple physical pixels.

1.6 Scaling and Logical Pixels

Terms like 2× screen, 3× screen, 2× image, 3× image refer to Retina displays that pack more pixels into the same area, making individual pixels indistinguishable at normal viewing distances.

When two devices have the same logical pixel dimensions, their displayed images appear identical despite different physical resolutions.

2. Image Memory Size Calculation

[(Height in pixels) × (Width in pixels) × (bit depth)] / 8 / 1024 = image size in kilobytes (KB).

Color depth (bits per pixel) defines how many bits represent each pixel. For example, 24‑bit depth can display 2^24 ≈ 16.7 million colors.

Different devices may use different bytes per pixel, affecting memory usage. You can query screen.colorDepth for the current device.

Example: a 640 × 480 image on a 24‑bit device occupies 640 × 480 × 24 / 8 / 1024 ≈ 900 KB.

In practice, a 172 KB image may consume about 1.16 MB of memory, while a 3× version can reach ~10.44 MB.

3. Image Performance Comparison

3.1 img tag vs. canvas

3.1.1 Memory usage comparison

Key questions: Is there a direct link between file size and memory usage? Does rendering the same image at different sizes affect memory? Does displaying an image once vs. multiple times affect memory? Are there differences between img, background‑image, and canvas rendering?

Memory can be observed via Chrome’s Task Manager.

Image cache resides in disk cache, not in‑page memory.

Once an image file is loaded, it must be decompressed, which is computationally intensive and consumes more memory than the original file.

After a period, the browser releases decoded image data, leaving only the compressed size.

Canvas rendering on Retina screens requires multiplying width/height by the DPR to maintain clarity; using a 3× image in a 1× canvas yields blur but slightly lower memory usage.

<!-- <canvas width=813 height=1250 id='canvas'></canvas> -->

var imgsUrl = [
  'https://p9-juejin.byteimg.com/.../image1.png',
  'https://p1-juejin.byteimg.com/.../image2.png',
  'https://p1-juejin.byteimg.com/.../image3.png',
  'https://p6-juejin.byteimg.com/.../image4.png',
  'https://p3-juejin.byteimg.com/.../image5.png'
];
var imgs = [];
for (var i = 0; i < 5; i++) {
  imgs[i] = new Image();
  imgs[i].width = 817;
  imgs[i].height = 375;
  imgs[i].src = imgsUrl[i];
}
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 5; i++) {
    imgs[i].onload = function () {
      console.log(i, imgs[i]);
      ctx.drawImage(imgs[i], 0, 375 * 3 * i, 812 * 3, 375 * 3);
    };
  }
}
draw();

Preloading images with new Image() can improve user experience in certain scenarios.

Overall conclusions:

Image memory usage correlates with pixel count, not file size.

Rendered width/height (px) does not affect memory consumption.

Local loading vs. network request has little impact on final memory usage.

Using new Image() with canvas rendering saves memory compared to <img>.

Rendering multiple images from the same source has similar memory usage to a single image; different sources increase memory.

Canvas rendering of multiple images shows similar memory usage to a single image.

3.1.2 Load and draw performance

A 23 MB image rendered via <img> loads progressively, while canvas waits for the entire file before drawing, leading to a longer white‑screen period.

Both methods take comparable total time to render; optimizing image format and size is more critical than the rendering technique.

LCP (Largest Contentful Paint) only tracks <img>, <svg> and <video> elements, not canvas.

4. Performance Optimization Directions

Image rendering speed is not the dominant factor in page load; memory consumption can be mitigated by using canvas for multiple high‑resolution images, but for a single image responsive srcset is sufficient.

<img src="./image/[email protected]" srcset="./image/[email protected] 1x, ./image/[email protected] 2x" />

Ultimately, compressing image files and choosing appropriate formats yields the greatest performance gains.