Everyday · Editorial draft
How to Resize and Compress Product Photos
Pixel dimensions, aspect ratio, format and compression quality answer different questions. Preview both the layout and actual saved file.
Pixel dimensions, aspect ratio, format and compression quality answer different questions. Preview both the layout and actual saved file.
Use your own inputs in the tool ↗Change the right property
Resizing changes pixel dimensions. Compression and conversion change how an image is encoded and how many bytes the file occupies. A 900 × 600 image can keep those dimensions while being re-encoded; a resize to a 300 × 300 canvas is a different operation. Choose the task based on the destination and inspect the resulting file instead of relying on a universal savings promise.
Contain versus cover
A 400 × 200 source has a 2:1 aspect ratio. Containing it inside a 100 × 100 canvas scales the image to 100 × 50 and leaves space above and below. Covering the same canvas scales the image to 200 × 100 and crops 50 pixels from each side. Both preserve the image’s proportions. They do not preserve the same visible content.
Understand format and transparency
JPEG is suitable for many photographic outputs but does not retain transparent pixels; this pipeline fills its background with white. PNG and WebP outputs can retain transparency where the browser encoder supports the selected format. The browser export API may vary in supported encodings, so the tool checks actual blob MIME type. Do not rename a file extension and call that a conversion.
Measure actual savings
If the source is 500 KiB and the output is 350 KiB, the reduction is (500 − 350) ÷ 500 × 100 = 30%. If output grows to 600 KiB, it is 20% larger. Some re-encodings grow instead of shrink, especially when the original was already efficiently encoded. Quality inputs are encoder controls, not a guarantee of visual quality or a fixed compression ratio.
Work through a batch
Conversion and compression preserve each source image’s own dimensions; the resize tool uses your target canvas. Review mixed-size outputs rather than assuming every file matches the first image. ZIP order follows the selected queue. Settings changes invalidate the previous download, and cancel clears a current job. Worker availability and output fidelity still require testing in the browsers you will use.
Review before listing the product
Inspect text, fine lines, colour and cropped edges at the intended display size. Re-encoding can remove metadata; it is not an archival copy of the source. Keep your original images. Do not submit private customer or classroom images to an unrelated service just to resize them. This pipeline is designed for local processing, but final network and browser acceptance are still pending for the construction build.
Sources and review notes
External technical reference checked; original arithmetic and implementation explanations remain subject to final editorial/browser review.
- MDN: Canvas toBlob export behavior · checked 2026-10-09
Editorial approval and browser acceptance are pending. This unpublished draft does not claim measured business outcomes.
Try the example with your numbers.
The tool gives you an editable result and shows the assumptions behind it.
Open the free tool ↗