Skip to content
LeedyBox
Support

Resizing Images: Pixels, Aspect Ratio and DPI

Resizing looks simple, but the choices behind it decide whether an image stays sharp, keeps its shape and has a sensible file size. This guide explains pixel dimensions, aspect ratio, resampling quality, DPI and how to pick sizes for screens.

Pixels, Dimensions and File Size

A digital image is a grid of pixels. Its dimensions, such as 4000 × 3000, give the pixels across and down; multiplied, they give the pixel count, here 12 million pixels (12 megapixels). Resizing replaces that grid with a new one and calculates each new pixel from the old ones, which is called resampling.

The pixel count grows with the square of the sides: halving the width and the height leaves a quarter of the pixels. That is why reducing the dimensions often shrinks a file the most, although the format, the quality setting and the amount of fine detail matter too. To display or edit an image, programs decode it to uncompressed pixels, typically 4 bytes each, so a 12-megapixel photo needs about 48 MB of memory however small the file is.

Keep the Aspect Ratio, or Crop First

The aspect ratio is the relation between width and height: 4000 × 3000 is 4:3, and 1920 × 1080 is 16:9. If you keep it, you choose one side and the other follows, so a 4000 × 3000 photo resized to a width of 1,200 pixels becomes 1200 × 900. If you set both sides freely, an image with a different ratio is stretched or squashed, and circles turn into ovals.

To get an exact size in a different shape without distortion, crop to the target aspect ratio first, then resize. In a batch of portrait and landscape photos, a fixed width makes portrait images tall: a 3000 × 4000 photo at a width of 1,200 pixels becomes 1200 × 1600.

Making Images Smaller or Larger

When an image is reduced, each new pixel should summarise several original pixels. A fast method that samples only a few nearby pixels skips detail in a large reduction, which shows as jagged edges and shimmering patterns (aliasing or moiré) on fabric, fine lines and text. Better resampling takes more source pixels into account. The LeedyBox resizer reduces in steps of one half, each averaging neighbouring pixels, which gives smoother results with browser scaling. Strongly reduced images can still look slightly soft; LeedyBox does not sharpen them.

Enlarging estimates new pixels from their neighbours, so edges become soft or blocky and no new detail appears. Specialised upscaling software can add detail that looks plausible, but it is generated, not recovered. If you need a larger image, go back to a larger original where possible.

DPI, PPI and Print Size

DPI (dots per inch), more precisely PPI (pixels per inch), is a number stored in some image files. It tells printing and layout software how large to print the pixels; it does not change the pixels. Print size in inches = pixels ÷ PPI (multiply by 2.54 for centimetres).

Image width Printed at 300 PPI Printed at 150 PPI
1,200 pixels 4 in (10.2 cm) 8 in (20.3 cm)
2,400 pixels 8 in (20.3 cm) 16 in (40.6 cm)
3,600 pixels 12 in (30.5 cm) 24 in (61 cm)

Changing only the DPI value changes the printed size, but the pixels stay the same, so the image looks identical on screen. To print sharply you need enough pixels: a 6 × 4 inch print at 300 PPI needs 1800 × 1200 pixels. Around 300 PPI is often recommended for photos viewed up close; large prints viewed from a distance can use less. LeedyBox does not keep the original's DPI value, so set the print size when you print.

Choosing Sizes for Web Pages and Screens

On a web page, what matters is the width at which the image is displayed. Layouts are measured in CSS pixels, and high-density screens use two or more device pixels per CSS pixel in each direction. An image shown 600 CSS pixels wide therefore needs about 1,200 pixels to look fully sharp on a "2×" display, while a 4,000-pixel photo in the same place wastes bandwidth and memory.

Measure the largest displayed width in your layout, for example with the browser's developer tools. With the srcset and sizes attributes you can offer the same picture in several widths, such as 600, 1200 and 1800 pixels, and the browser downloads the one that suits the screen. If an upload form, shop or social network asks for particular dimensions, check its current documentation, because such requirements differ and change.

Format Choice and Batch Resizing With LeedyBox

After resizing, choose the format by content. Photos are usually smallest as JPG or WebP. Screenshots, logos and images with transparency suit PNG, or WebP, which also supports transparency. JPG cannot store transparency, so transparent areas become white, and a photo saved as PNG can be larger than the original JPG. See JPG vs PNG vs WebP vs AVIF for details.

The LeedyBox Image Resizer resizes many images in one go, in your browser, without uploading them:

  • Choose Pixels or Percentage (1 to 400 %). With "Keep aspect ratio" on, each image keeps its own proportions.
  • Images smaller than the target are not enlarged unless you turn that option off.
  • "Same as original" keeps JPG, PNG and WebP and saves GIF, BMP and AVIF as PNG. JPG and WebP use quality 90 unless you change it.
  • The camera orientation is applied, metadata is not copied, and two or more results can be downloaded as a ZIP file.

To make the files smaller still, use the Image Compressor and read Image Compression Settings Explained.

Frequently Asked Questions

Does a higher DPI value make an image sharper?

No. It only tells software how large to print the image. Sharpness depends on the number of pixels and the size at which they are shown.

Why is my resized file larger than the original?

Usually because a photo was saved as PNG, the quality is higher than the original's, or the image was enlarged.

What width should a photo for a website have?

Take the largest width at which it is displayed and double it for high-density screens. If it also appears smaller, offer extra sizes with srcset.