Images for the Web: Format, Size & Quality

Every image you publish online represents a trade-off between quality and file size. A 5 MB JPEG slows page load and costs mobile users bandwidth; a heavily compressed image looks blurry on retina screens. Understanding the underlying formats — JPEG, PNG, WebP, AVIF — and how resizing algorithms affect sharpness gives you control over that trade-off rather than hoping the defaults are good enough.

Format choice is the most impactful decision. JPEG is still the universal fallback for photographs, but WebP delivers 25–35% smaller files at equivalent perceptual quality and is now supported by all major browsers. AVIF pushes that further — typically 50% smaller than JPEG — but encoding is slower and compatibility is still catching up for some use cases. PNG remains the right choice for screenshots, logos, and anything requiring a transparent background. Knowing when to reach for each format is the foundation of efficient image delivery.

Resizing is where most people lose quality unnecessarily. The algorithm matters: nearest-neighbour produces blocky results on photos, bilinear is smooth but soft, and Lanczos preserves edge sharpness on significant downscales (4:1 or more). The practical rule is always resize down from a larger source — never design for a size larger than your source image, because upscaling always invents pixel data.

Background removal is a separate challenge from resizing and format conversion. Good edge detection — where hair meets a light background, or a product sits on a complex surface — requires either careful manual masking or a dedicated ML model. The expectations differ by use case: e-commerce product images need clean, hard edges on white; portrait photos need soft, natural hair edges. Understanding what the tool is doing helps you identify when to clean up manually.

All image tools on this page process files directly in your browser or discard server files immediately — your images are never stored.