How to Resize Images for Websites and Email

Practical rule: Resize to the largest dimensions the final use actually needs, keep the aspect ratio locked, and then choose an appropriate format and quality.

Pixel dimensions and file size are different

Pixel dimensions describe the width and height of an image, such as 4000 by 3000 pixels. File size describes how much storage the encoded file uses. A large image can sometimes have a small file size because of strong compression, while a small PNG can remain relatively heavy because it stores sharp details without lossy compression.

For online use, both measurements matter. Dimensions affect how much image data a browser must decode and how sharply the image can appear. Format and quality settings affect transfer size. Resizing first prevents you from spending time compressing millions of pixels that will never be displayed.

Choose dimensions from the final layout

Start with the largest place where the image will appear. If a content column is 900 pixels wide, a 4000 pixel source is usually unnecessary. A wider export can be useful for high-density screens, but the target should still be connected to a real layout rather than an arbitrary number.

For email, consider both the message width and the recipient's device. Images between roughly 800 and 1400 pixels wide are often easier to send and view than an untouched camera original. An application form may publish a specific maximum, so follow that requirement exactly.

Keep the aspect ratio locked

Aspect ratio is the relationship between width and height. Changing only one dimension while the ratio is locked lets the other dimension update proportionally. This prevents faces, circles, products, and text from becoming stretched or squeezed.

If the destination requires a different shape, crop the composition first and resize afterward. Forcing a wide image into square dimensions by unlocking the ratio changes the geometry of every object in the picture.

Select a suitable output format

JPG is a practical choice for ordinary photographs and is accepted by most email and form systems. WEBP often produces smaller website images at similar visual quality. PNG is better for screenshots, diagrams, text-heavy graphics, and images that require transparency.

Format conversion cannot restore missing detail, and a smaller file is not automatically a better result. Inspect the export at normal display size, especially around text, hair, gradients, and high-contrast edges.

A repeatable resizing workflow

Keep the original file, make a working copy, crop if the composition needs to change, and then enter the target width or height with aspect ratio enabled. Export once in the format required by the destination. Compare the new dimensions and file size with the original.

Open the result in the website, email draft, or form where it will be used. This final check catches images that are technically valid but still too soft, too large, or framed incorrectly.

Use the result in its real context

Keep the original information and review the final output in the website, document, application, or decision where it will be used. A browser tool can make a task faster, but the relevant policy, agreement, specification, or official source remains authoritative.