Visual tutorial · website image editor

How to Resize & Watermark Product Images: Visual Guide

Prepare a product image you already have. This illustrated guide follows the actual field and button names in our image editor; it does not describe the E-Media extension.

Independent guide. Extension features are listing claims, not hands-on test results.

Before you start

A short walkthrough of the website tool

Use one JPEG, PNG or non-animated WebP image, no larger than 15 MiB and 20 million pixels. You can start with the built-in example photo. A device-selected file is edited in your browser; choosing a sample or extracted image fetches that same-site file.

The pictures below are original step illustrations based on the current controls. They are not browser screenshots or images of the E-Media extension.

Open the image editor

Follow these four steps

  1. 1. Choose your image or use the example

    Step 1 illustration: Choose an image, or Try the example product photo.
    Step illustration · not a screenshot. Select the picture to view it larger.

    Select Choose an image and pick a file from your device. To practice without uploading a personal file, select Try the example product photo. Wait for the file name and source dimensions to appear before changing settings.

  2. 2. Set the size, format and quality

    Step 2 illustration: Width 600 px, proportional height, JPEG format and quality 85 percent.
    Step illustration · not a screenshot. Select the picture to view it larger.

    Enter the desired Width (px); the tool calculates height to preserve the aspect ratio. For the 640 × 427 example photo, a width of 600 gives a height of 400. Select JPEG, WebP or PNG. JPEG/WebP use the quality slider; PNG ignores it. Lower quality can reduce size, but a smaller file is not guaranteed for every source.

  3. 3. Add optional text and create the output

    Step 3 illustration: Optional text watermark, Bottom right position and Create output button.
    Step illustration · not a screenshot. Select the picture to view it larger.

    Enter your own text in Text watermark (optional), or leave it blank. Choose Bottom right or Center. Select Create output. The tool then prepares a preview and reports output dimensions and file size. A watermark adds your text; it does not remove existing marks or restore missing image detail.

  4. 4. Inspect the preview and download the copy

    Step 4 illustration: Inspect the processed preview, then select Download output; Remove image clears it.
    Step illustration · not a screenshot. Select the picture to view it larger.

    Check the preview and the output size, then select Download output. Look in your browser’s Downloads list for the edited copy. If you change any setting, select Create output again before downloading. Remove image clears the current file and preview. Your source file stays unchanged.

Choose an output for your task

Use JPEG for an opaque product photograph when broad compatibility matters; transparent areas become white. Choose WebP if your destination accepts it and you want its compression options. Choose PNG when you need lossless output or transparency. Export can discard metadata or color profiles; inspect a copy before using it in a catalog.

If the file or output is rejected

Check the file format, 15 MiB input limit and 20-million-pixel cap. SVG, GIF and animated inputs are not supported. Both output edges must stay within 4096 pixels, so a tall photograph may require a smaller width. If a format cannot be encoded by your browser, choose another supported format; an error is not a completed export.

Bring an extracted image into the editor

In the product-media tool, choose Edit this image on an image result. Keep the same browser session. The editor fetches that selected file from this site; expired results or a different session cannot be opened. Once loaded, editing happens in browser memory just like a local file.

Questions, answered

Does lowering quality always make the file smaller?

No. File size depends on the source, output format, dimensions and encoding. Compare the reported output size before saving it. PNG does not use the quality slider.

Why did the download link disappear after a change?

A previous output no longer matches the current settings. Select Create output again to generate a matching copy.

Does this editor retrieve Shopee product links?

No. It edits files. Product URL extraction is a separate tool with its own supported-source and access limitations.