All ToolsStart a project ↗
Image preparation

Resize or compress an image: which change do you need?

Resize an image to change its pixel dimensions. Compress it to reduce the encoded file size. Crop it to change the framing. For a web image, choose the required shape and dimensions first, then compare compression settings at the intended display size.

Proportional rectangles compare 4000 by 3000 pixels with 1600 by 1200: the smaller image has 16 percent of the pixels.
Both rectangles retain a 4:3 ratio. Their areas show the pixel-count change; encoded byte savings depend on the image and settings.Download the reference SVG
Prepare a delivery imagePixels, encoded bytes and visible quality are separate checks.
  1. 1. Define the targetWrite down dimensions, aspect ratio, format and any byte limit.
  2. 2. Resize a copyCrop or fit deliberately, then resize while preserving the intended proportions.
  3. 3. Compress and verifyReopen the saved file and check detail, transparency, dimensions and bytes.
The decision

What this solves

A request for a smaller image can mean fewer pixels, fewer bytes or a different aspect ratio. Solving the wrong problem can produce a tiny-looking image that is still too heavy, or a lightweight file with unreadable detail.

Separate pixels from file bytes

Pixel dimensions describe the sampling grid: width multiplied by height. File size describes the bytes needed to store the encoded image, often including metadata. A 1600-pixel-wide image can have many different file sizes depending on its subject, format and quality setting.

Start with a written delivery requirement. For example, “1600 × 1200 pixels, 4:3, below the receiving system's stated byte limit” tells you three separate checks. A bare instruction such as “make it 1 MB” does not establish the required dimensions or acceptable visual quality.

Resize proportionally, or crop deliberately

To preserve the aspect ratio, multiply both dimensions by the same factor. For a 4000 × 3000 source reduced to 1600 pixels wide, the factor is 1600 ÷ 4000 = 0.4. The height becomes 3000 × 0.4 = 1200 pixels.

A square placement is a different decision. Stretching the 4:3 image into a square changes the product proportions. Crop to a square if losing the edges is acceptable, or fit the complete image inside a square canvas if the whole product must remain visible. Check the receiving layout before choosing.

Compress a delivery copy

Keep the original master so you can prepare another size later. Resize a delivery copy, then compare the formats and quality controls supported by your destination. A photographic render and a sharp diagram may need different choices.

Lossy compression discards some information to reduce file size. Inspect gradients, small type, fine edges and textured surfaces before approving it. Lossless encoding preserves the encoded pixel data, but converting an already damaged source to a lossless format cannot restore the missing detail.

Check quality where the image will be used

Review the full composition at its intended display size, then zoom into the most demanding areas. Look for ringing around lettering, blocks in smooth backgrounds, damaged transparency and altered edges. A tiny preview can hide all of these.

Reopen the downloaded export and verify its dimensions, file type, transparency and bytes. If the target system still rejects it, compare its actual requirements with the exported properties. Do not keep lowering quality when the real problem is a disallowed format or incorrect aspect ratio.

Texture files need an additional check

A compressed download is not a reliable measure of decoded texture memory. For an uncompressed RGBA8 base level, width × height × 4 bytes gives the storage before mipmaps and other allocations. A 4096 × 4096 texture is 64 MiB at that level even if the source download is much smaller.

For normal, roughness and other material-data maps, compression damage can change shading. Check the material in the destination renderer, not only the flat thumbnail. Choose a format and colour interpretation supported by that pipeline.

Tools for this task

Start with these tools

Use the tools in order, or jump straight to the one that matches the question in front of you.

Workflow

Recommended workflow

The sequence keeps the work practical and reduces the usual guesswork before production.

Write the delivery requirement

Separate pixel dimensions, aspect ratio and maximum file bytes. Establish where the image will appear.

Open tool

Prepare the dimensions

Keep a master, crop if the composition requires it, then resize a delivery copy.

Open tool

Check the saved export

Compare detail and file size after compression. Reopen the saved file, not just the preview.

Open tool
Example outcome

A 4000 × 3000 image has 12 million pixels. Resizing proportionally to 1600 × 1200 produces 1.92 million pixels: 16% of the original pixel count. That does not predict a matching reduction in JPEG or WebP file bytes.

Basis and limitations

The dimensions and pixel counts below are calculated examples. Encoded file size depends on image content, format and encoder settings; no universal compression percentage is promised. Calculated examples and practical export checks; confirm the destination requirements before delivery.

web.dev: image performance: Image dimensions, compression and delivery considerations.

web.dev: JPEG: How lossy photographic image encoding differs from preserving a master.

Common mistakes
  • Stretching a product to satisfy a different aspect ratio.
  • Treating fewer file bytes as proof of lower GPU memory.
  • Repeatedly overwriting the only master with lossy exports.
Next pages

Keep going

FAQ

Questions this page answers

Does reducing pixel dimensions always reduce file size?

It reduces the number of pixels, but the final byte size also depends on format, content, metadata and encoder settings. Compare the actual exports.

Can compression fix the wrong aspect ratio?

No. Compression changes encoding. Crop, fit or resize deliberately to meet the required shape without distorting the subject.

Can I enlarge a small image without losing quality?

Upscaling creates more pixels but cannot reliably recover detail absent from the source. Use a higher-resolution original when accurate product detail matters.

Next step

Talk to XO3D

Bring the product, audience, launch date and required assets. We can help define the creative direction and production scope from there.

Tell us about your brief

Published by XO3D Labs: 2026-09-17

Updated: 2026-09-17

About the studio behind these tools

XO3D is a director-led product CGI studio, and these tools come out of its own production pipeline rather than being built as marketing. We work with tech, industrial and premium consumer brands on product films, launch stills and interactive experiences.

That makes us the right choice for launch-critical work where the visual standard has to be high and the product may not exist yet.

It makes us the wrong choice for three things: hundreds of routine SKUs to a fixed template, a permanently live self-service configurator across a large range, and the campaign idea itself.