Quick Answer

A 1920x1080 image resized to 800px wide becomes 800x450px, preserving the 16:9 aspect ratio. At 50% scale, it becomes 960x540px.

Original Dimensions

Width (px)

Height (px)

Resize Target

Resize By Width Height Percentage

New Width (px)

Common Examples

Input	Result
1920x1080 resized to width 800px	800 x 450px (aspect ratio 1.7778)
1920x1080 resized to height 720px	1280 x 720px
4000x3000 resized to 50%	2000 x 1500px
1200x628 resized to width 600px	600 x 314px
800x600 resized to 200%	1600 x 1200px

How It Works

Maintaining aspect ratio when resizing means preserving the proportional relationship between width and height. The core formulas are:

Aspect Ratio = Original Width / Original Height

Resize by width: New Height = New Width / Aspect Ratio

Resize by height: New Width = New Height x Aspect Ratio

Resize by percentage: New Width = Original Width x (Percentage / 100), New Height = Original Height x (Percentage / 100)

Why aspect ratio matters

If an image is resized without maintaining the aspect ratio, it appears stretched or squished. A 1920x1080 image (16:9) resized to 800x800 would distort the image by making it square. Constraining one dimension and calculating the other preserves the original proportions.

Common resize targets for the web

• Thumbnails: 150x150, 300x300 (often cropped to square)
• Blog images: 800px or 1200px wide
• Social media: 1200x630 (Facebook/Twitter), 1080x1080 (Instagram square)
• Retina displays: 2x the CSS dimensions (e.g., 1600px wide for an 800px display slot)

Worked Example

For a 4000x3000 image (aspect ratio = 4000 / 3000 = 1.3333, or 4:3):

Resized to 800px wide: New Height = 800 / 1.3333 = 600px. Result: 800x600.

Resized to 50%: New Width = 4000 x 0.50 = 2000px. New Height = 3000 x 0.50 = 1500px. Result: 2000x1500.

Resized to 720px tall: New Width = 720 x 1.3333 = 960px. Result: 960x720.

Related Calculators

Aspect Ratio Calculator

Calculate and simplify aspect ratios from width and height, or scale dimensions to a target ratio.

Image File Size Estimator

Estimate image file size from dimensions, color depth, and format with compression ratios for JPEG, PNG, WebP, and more.

Frequently Asked Questions

How do I resize an image without distortion?

Always maintain the aspect ratio by constraining one dimension and calculating the other. This calculator does this automatically. In image editors, hold the Shift key while dragging a corner handle, or lock the aspect ratio option. In CSS, set one dimension and use height: auto or width: auto.

What happens to image quality when I resize?

Scaling an image down (making it smaller) generally preserves quality because pixel data is being consolidated. Scaling up (making it larger) can cause blurriness because the software must create new pixels through interpolation. For the best results, start with the highest resolution source image.

Should I serve different image sizes for different devices?

Yes. Serving a 4000px-wide image to a mobile device wastes bandwidth and slows loading. Use the HTML srcset attribute or the <picture> element to serve appropriately sized images. Common breakpoints include 400px, 800px, 1200px, and 1600px wide.

What is the difference between CSS resizing and actual image resizing?

CSS resizing changes how the browser displays the image but does not change the file. The full-size file is still downloaded. Actual image resizing (in an image editor or build tool) creates a smaller file with fewer pixels, reducing download size and improving page load time.

How do I calculate dimensions for Retina displays?

Retina (HiDPI) displays have a device pixel ratio of 2x or 3x. For a 2x display, serve an image twice the CSS dimensions. If your CSS displays an image at 600x400, the source image should be 1200x800 for sharp rendering on Retina screens.