Workflow

Prepare a product image for publication

Publish a small JPEG of a drawing that already has a white background, and check what changes when the file is transparent.

Goal

Get a JPEG whose longest side is 160 px from a white-background product drawing, and a second JPEG that shows what conversion does to transparent pixels.

This page is static HTML. The compressor and converter need JavaScript because they redraw the image on a browser canvas. You can still read the sequence, measurements, and limits with JavaScript off.

Inputs

Both PNGs are original drawings made for this guide, not photographs. The red rectangle is #d91f2a and the teal band is #0f766e. Neither file contains personal data.

White rectangle with a red block above a teal band.
product-on-white.png Input. 240×160 PNG with a white background, 367 bytes.
Red block above a teal band on a transparent background.
product-transparent.png Input. The same drawing with a transparent background, 707 bytes. The checkerboard is not part of the file.
Smaller red and teal drawing on a white background.
product-on-white-compressed.jpg Compressor output. 160×107 JPEG, 1518 bytes.
The same drawing exported as a JPEG, with white where the background was transparent.
product-transparent.jpg Converter output. 240×160 JPEG, 2226 bytes, with the formerly transparent corner now white.

Decisions

Do not remove the background of these files

The first file already has the white background a JPEG listing can keep. The second file is already transparent. Neither one needs the background remover.

Use the compressor when the longest side must shrink

The Image Compressor changes format, quality, and the longest side. The converter keeps 240×160. For a listing capped at 160 px, the compressor is the tool in this sequence.

Use the converter to see transparency become white

The Image Converter fills the canvas white before a JPEG export. That shows what happens after background removal without chaining the tools.

Verified sequence

The tools do not receive the file from this page. Download each input and choose the file again in the tool. Nothing is uploaded to Kitly.

  1. Download product-on-white.png and product-transparent.png above.
  2. Open the Image Compressor and choose product-on-white.png.
  3. After the file loads, the format is PNG and the quality control is disabled. Change the format to JPEG. The quality label should read 78%, which is its starting value. Change max dimension from 240 to 160.
  4. Click Compress image. Dimensions should read 160 x 107. In Chrome 154, the size reads 1.5 KB and the comparison reads Output is larger, 313.6%. Download product-on-white-compressed.jpg.
  5. Open the Image Converter in a fresh visit and choose product-transparent.png. Change the format to JPEG. Do not move the quality control. If it was moved, reload the page: the starting value is 0.86, and the control does not display that number.
  6. Click Convert. Dimensions stay 240 x 160. In Chrome 154, the size reads 2.2 KB. Download product-transparent.jpg and check that the transparent corner is white.
  7. Stop there. Do not open the Image Background Remover for either file.

Observed result

Measured on macOS in Headless Chrome 154.0.8037.99 by replaying the tools' canvas export: createImageBitmap, a white fill before JPEG, and canvas.toBlob at the stated quality. The JPEG files were opened again and sampled. The page buttons were not clicked for this measurement; compare the size shown in the tool if your browser differs.

Checked measurements
product-on-white.png Input. 240×160 PNG, 367 bytes. Pixel (0, 0) is 255, 255, 255, 255. Pixel (120, 50) is 217, 31, 42, 255. Pixel (120, 110) is 15, 118, 110, 255.
Compressor JPEG product-on-white-compressed.jpg. 160×107 JPEG, 1518 bytes, shown as 160 x 107 and 1.5 KB. Comparison: Output is larger, 313.6%. Reopened, (0, 0) is 255, 255, 255, 255. The scaled sample of (120, 50) at (80, 33) stayed 217, 31, 42, 255. The scaled sample of (120, 110) at (80, 74) was 14, 118, 107, 255.
product-transparent.png Input. 240×160 PNG, 707 bytes. Pixel (0, 0) is 0, 0, 0, 0. The red and teal samples match the white-background file.
Converter JPEG product-transparent.jpg. 240×160 JPEG, 2226 bytes, shown as 240 x 160 and 2.2 KB. The file has no alpha channel. Reopened, (0, 0) is 255, 255, 255, 255. (120, 50) stayed 217, 31, 42, 255. (120, 110) was 16, 117, 111, 255.

Limitations

  • These are flat drawings. A photograph will not reproduce these file sizes.
  • JPEG size depends on the browser encoder. These bytes come from Chrome 154 on macOS.
  • The compressor offers JPEG, PNG, and WebP when the browser can encode them. AVIF was not used.
  • The background remover was not run. On first use it may download a model, and it can fall back to an edge-color method that also removes similar subject colors.
  • Canvas export does not keep camera metadata. These drawings had none.
  • No tool passes the file to the next one. A small file can get larger: 367 bytes became 1518 bytes.

Tools in this language

Open each tool in this same language. The tool page does not receive these files automatically.

  • Image Compressor Shrinks the longest side to 160 px and exports the JPEG of the white-background drawing.
  • Image Converter Exports the transparent drawing as a 240×160 JPEG and paints the transparency white.
  • Image Background Remover Not part of the measured result. Use it only when a photo background is not the background you want to publish.