A photo that looks stretched usually has a width-to-height ratio that differs from its original. Resizing a 4:3 photo into a 16:9 rectangle by changing both dimensions independently makes the objects in it wider or narrower.
Keeping the aspect ratio avoids that distortion. It doesn't mean the result will fill every box you give it, though. That distinction matters when a website asks for an image at a specific size.
Maximum dimensions and exact dimensions
Maximum width and height describe a box the image must fit inside. Both output dimensions must stay below their limits, but they don't both have to reach them. The image can keep its original shape.
Exact dimensions describe the required output rectangle. If its ratio differs from the source, you need to choose between cropping, adding padding and stretching. Cropping removes content. Padding keeps the content but adds a border or bars. Stretching changes the proportions.
Before choosing a tool, check which result you need. A content image with a maximum width is a different job from a social preview card that must have an exact shape.
A 4032x3024 photo in a 1200x630 box
This source photo has a 4:3 ratio. Scaling its width to 1200 would give a height of 900, which exceeds the 630-pixel limit.
Instead, scale by the height: 4032 multiplied by 630, divided by 3024, gives a width of 840. The fitted result is 840x630. It stays within both limits and preserves the source ratio, but it isn't 1200x630.
To fill an exact 1200x630 rectangle without stretching, crop the source to the target ratio in an editor first, or use an editor that adds padding. Choose the crop yourself if important content is near the edges.
The same issue appears with 1920x1080. A 3000x2000 source has a 3:2 ratio. Fitting it into that box gives 1620x1080, not 1920x1080. A 16:9 source can reach both target dimensions if it is large enough and the tool allows that output size. A smaller source won't reach them in a tool that never enlarges images.
Dimensions and file size are separate
Reducing dimensions removes pixel data. Choosing PNG's lossless encoding doesn't undo that resizing step or restore the removed pixels.
JPEG and WebP quality settings affect encoding too. A smaller output isn't guaranteed: re-encoding an already compressed image can make its file larger. Compare the result with the original and inspect the preview before replacing anything.
Transparency is another decision. JPEG doesn't support it. The Firm Beacon resizer fills transparent areas with white when exporting JPEG; PNG or WebP can keep transparency.
What the browser tool does
I work on Firm Beacon. Its free image resizer uses maximum dimensions and processes one selected JPG, PNG or WebP in the browser. It doesn't crop, stretch or enlarge the image, and it requires no account.
The input limit is 20 MiB, with neither side above 8,192 pixels and no more than 24 million pixels in total. The 4032x3024 example has about 12.2 million pixels, so it meets the dimension limits; its file still needs to meet the byte limit.
The selected image, filename, dimensions and settings aren't uploaded or saved by the tool. Loading the page still makes normal website and analytics requests. Analytics can record resizing and downloading actions without those image details.
The Canvas export produces a still image without the original camera metadata or animation. Keep your original if you need either.
Before downloading, check the output dimensions, transparency and file size. If your destination requires an exact rectangle, make sure you haven't mistaken a maximum-size setting for a crop.
Try the resizer: https://www.firmbeacon.co.uk/tools/image-resizer?utm_source=devto&utm_medium=article&utm_campaign=image_resizer_guide
Top comments (0)