Prepare web images without guessing at format, quality or dimensions

Start with the image's job

Photographs, interface screenshots, transparent illustrations and printable artwork have different compression needs. A format decision should follow the content and delivery target rather than a universal smallest-file rule.

JPEG is a practical lossy choice for photographs, PNG preserves exact pixels and transparency, and WebP can provide lossy or lossless output with broad modern-browser support.

Resize before tuning quality

Sending a 4000-pixel image into a 600-pixel card wastes decoding work even if the file is aggressively compressed. Export near the largest rendered size needed for the target density, then compare compression settings.

• Keep the original master
• Set a deliberate maximum width and height
• Preview text and sharp edges at 100 percent
• Avoid repeatedly recompressing a lossy derivative

Judge quality visually and numerically

A quality slider is encoder input, not a universal percentage score. Compare the source and result at the size users will see, paying attention to gradients, faces, small text and high-contrast edges.

Smart selection should keep the original when re-encoding makes the file larger. File size savings are useful only when the result still serves its visual purpose.

Compose collages for hierarchy

When combining images, pick one focal frame, use consistent gaps and crop secondary images to support the story. Confirm the final aspect ratio before annotating because a later crop can remove labels or watermarks.

Browser canvas export creates a new rendered file and may omit source metadata. That can be desirable for privacy, but the original files remain the authoritative archive.

Use a repeatable image comparison worksheet

For a 600 CSS-pixel-wide card at 2× display density, start with a maximum dimension of 1200 pixels when the width is the image's longest edge. In Image Compressor, compare one photograph and one screenshot using the same target dimensions. Record source dimensions, output dimensions, actual MIME type and downloaded byte size rather than assuming a fixed percentage saving.

Smart mode chooses the smallest candidate and may keep the original when it is eligible and smaller. Inspect the actual result because the selected output can differ from the format you expected. Use an explicit format when a destination requires WebP or JPEG regardless of size.

Source: [filename, width × height, bytes]
Target: 600 CSS px at 2× density
Maximum dimension: 1200 px (if width is longest)
Output: [MIME type, width × height, bytes]
Visual check: [text edges, gradients, transparency]
Decision: [keep original / use result / adjust settings]

PNG format does not promise lossless pixels in this tool

PNG is a lossless encoding format, but XXF's PNG compression path quantizes RGB channels when the quality setting is below 99 percent. The encoder can store those altered pixels losslessly while the overall workflow has still changed the source. Choose full quality and unchanged dimensions when exact pixels matter, and compare the result with the original.

JPEG cannot preserve transparency. Check transparent artwork on the intended background before delivery, and keep the original if metadata, color management or archival fidelity matters. Browser encoders and source content affect byte size, so this guide does not claim measured savings or identical outputs across browsers.

For a collage, export only after confirming the final ratio, crop positions and annotations. The exported canvas is a composed image; it does not preserve editable layers or the original files as a project archive.

• Record dimensions and actual bytes
• Inspect the result at its display size
• Check transparency before choosing JPEG
• Retain source files for archival or pixel-exact work