Pixel360Image resize formula
An image resize calculator keeps both sides in proportion, so a photo is scaled rather than stretched. Pick the side you care about (or a percentage) and the other side follows from the original aspect ratio.
new height = new width × (original height ÷ original width)
new width = new height × (original width ÷ original height)
scale % = new width ÷ original width × 100
Worked examples
- 4000×3000 to 1200px wide: 1200 × 900 px, 30% scale
- 3024×4032 to 1080px tall: 810 × 1080 px, 26.79% scale
- 1920×1080 to 50%: 960 × 540 px, 50% scale
- 6000×4000 to 2048px wide: 2048 × 1365.33 px (round to 1365), 34.13% scale
The last example shows why you should check for decimals. 6000×4000 is 3:2, and 2048 is not divisible by 3, so the exact height falls between two pixels.
Upscaling vs downscaling quality
Downscaling (below 100%) throws away pixels, and modern resampling filters such as bicubic or Lanczos do it cleanly. You can shrink a photo to a fraction of its size and it will still look sharp.
Upscaling (above 100%) is different. The software has to invent the new pixels by interpolating between the existing ones, so edges soften and text or line art gets fuzzy. Small enlargements are often acceptable on screen, but if you need a much larger image, go back to a higher-resolution source or re-export a vector file. AI upscalers can produce convincing detail, but that detail is generated, not recovered, so check the result closely before using it for product or documentation images.
Choosing a size for the web
For websites, size images for how they are displayed, not how they were shot. A phone photo of 4032 pixels is far bigger than any layout needs. A common approach is to export at twice the displayed CSS width for high-density screens, then let the browser choose between several sizes with the srcset and sizes attributes, described in MDN’s guide to the img element. Always set width and height attributes (or a CSS aspect-ratio) so the page doesn’t jump while images load.
If you need to fit an image into a specific shape such as 16:9 or 4:5, find the target dimensions with the aspect ratio calculator and crop rather than stretch. For printing, the DPI calculator tells you how many pixels a given print size needs.
Common mistakes
- Typing both new dimensions. Unless the new size has exactly the same ratio, the image will distort. Set one side and let the other follow.
- Resizing the same file repeatedly. Each resize and JPEG save loses a little quality. Always resize from the original.
- Using CSS to shrink huge files. A 6000px image displayed at 600px still downloads at full size. Resize the file itself.
- Upscaling for print. Enlarging a small web image to meet a 300 DPI target adds pixels but not detail.
Frequently asked questions
How do I resize an image without distorting it?
Change only one dimension and calculate the other from the original proportions: new height = new width × original height ÷ original width. Scaling both sides by the same percentage gives the same result.
Does resizing an image reduce quality?
Making an image smaller keeps it sharp, although fine detail is merged into fewer pixels. Making it larger cannot add real detail, so upscaled images look soft or blocky, especially beyond about 150%.
What size should images be for a website?
Export images at the largest size they are displayed, multiplied by 2 for high-density screens. An image shown 600px wide in your layout works well at 1200px wide, served with srcset so smaller screens get a smaller file.
Why do I get a decimal height when resizing?
Pixels must be whole numbers, so the exact height is often fractional. For example 1000×667 at 50% is 500×333.5. Image editors round it, which changes the ratio by a fraction of a pixel and is not visible.
Does resizing change the file size?
Usually yes. Fewer pixels means less data, so a 50% resize keeps one quarter of the pixels. The final file size also depends on format and compression settings.