FluffyBench

How do pixel dimensions, PPI, and DPI affect image size?

Changing a photo's PPI can make its print smaller without removing a single pixel. Here's which number to change for paper, a web page, or an upload.

FluffyBench · 5 min read · Reviewed

What do pixel dimensions change when you resize?

Think of an image as a mosaic. Pixel dimensions count the colored squares across and down. Resizing redraws that mosaic on a different grid: fewer squares leave less room for fine detail. The name for calculating those new pixels is resampling.

Halving the mountain photo's width and height gives it one-quarter as many output positions. Displaying the smaller copy larger doesn't bring the lost detail back.

A locator marks mountain detail in the 1,000 × 664 photo. The original 160 × 120 crop is compared with the half-size copy's 80 × 60 crop, first smaller and then displayed larger. The larger display has the same detail as the smaller copy.
Look at the mountain edges: a larger display can't recover the source detail. How we reviewed · Photo: NPS Photo / Tim Rains, Public domain, via National Park Service.

How does PPI change print size without changing pixels?

PPI means pixels per inch: how tightly you pack the mosaic onto paper. Changing the print mapping leaves the pixel grid alone; a higher PPI fits the same picture into a smaller print.

The same 1,000 × 664 pixels photo spans 10 inches at 100 PPI and 3.33 inches at 300 PPI. Both inch rulers use the same scale.
Same pixels, different inches: pixel width ÷ PPI = print width. · Photo: NPS Photo / Tim Rains, Public domain, via National Park Service.

That distinction matters when you're asked for a higher-resolution print. Changing a PPI label doesn't create more scene detail. At a fixed print width, more pixels across the image give you a higher effective PPI—the number of image pixels available for each inch of paper.

How are printer DPI and image PPI different?

DPI means dots per inch: the tiny ink or toner dots a printer puts on paper. A printer can use several dots to reproduce a pixel's color, so its DPI and your image's PPI count different things.

A magnified grid of colored image pixels sits beside a patch of smaller colored printer dots. PPI counts image pixels per inch; DPI counts printer dots per inch. The dot arrangement is illustrative, with no fixed dots-per-pixel relationship.
Use image PPI for print-size calculations and printer DPI for the printer's dot rate.

If a print shop asks you for a ‘DPI image,’ ask what print dimensions and image PPI it needs. Those requirements tell you how many pixels to supply; the printer's dot rate doesn't tell you that on its own.

What controls image size on a web page?

A web layout sets an image's display width in CSS pixels, the page's layout units. You can display the same file at different widths without changing its pixel dimensions; its print PPI tag doesn't set that width.

The same 1,000 × 664 pixels mountain file displayed at 800 and 400 CSS pixels wide. At device pixel ratio 2, those widths occupy 1600 and 800 device pixels.
The layout changes the display size; the source file stays the same. · Photo: NPS Photo / Tim Rains, Public domain, via National Park Service.

The screen maps CSS pixels onto its physical device pixels. A high-density screen may use several device pixels for one CSS pixel, so a wide placement can need more source detail than its CSS width suggests. Stretching a small file across that space won't add detail.

Which number should you change for your destination?

Start with where the picture is going. A print size, a web placement and an upload limit ask for different measurements.

Paper: divide pixel width by print inches, then set print size in your layout app. 1,000 pixels divided by 10 inches gives 100 effective PPI. Web: check CSS width and screen pixel ratio, then set layout width. Upload: check both pixel limits and the KB or MB cap; resize for dimension limits and compress for file-size limits.
The print calculation explains the mapping; it isn't a recommended print-quality target.

Doing it in FluffyBench Image Space Saver

FluffyBench's Image Space Saver changes pixel dimensions through its Size controls. It doesn't edit a print PPI tag. Here's how to make the mountain photo half as wide while keeping its shape.

The completed tile shows both source and output dimensions, so you can check that the resized copy has the grid you wanted.

  1. Choose the mountain photo, then open Settings.
    Choose the mountain photo, then open Settings.
    Step 1. Choose the mountain photo, then open Settings.
    1. Choose images opens your file picker.
    2. Settings opens the Size controls.
  2. Set the width to 500 pixels and let the height follow.
    Set the width to 500 pixels and let the height follow.
    Step 2. Set the width to 500 pixels and let the height follow.
    1. Dimensions enables pixel dimensions.
    2. Width: 500. Height: Auto. Keep aspect ratio: checked.
  3. Close Settings with the same gear button.
    Close Settings with the same gear button.
    Step 3. Close Settings with the same gear button.
    1. Press the gear button again to close Settings.
  4. Process the image with your chosen size.
    Process the image with your chosen size.
    Step 4. Process the image with your chosen size.
    1. Process 1 image creates the resized result.
  5. Check the result's dimensions and file size, then download it.
    Check the result's dimensions and file size, then download it.
    Step 5. Check the result's dimensions and file size, then download it.
    1. The source readout shows 1,000 × 664 pixels.
    2. The result readout shows 500 × 332 pixels and its file size.
    3. Download saves the result to your device.

FluffyBench's Aspect Ratio Calculator works out matching dimensions at a fixed ratio

Search FluffyBench