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.