How to shrink images for the web

Resize first, compress second

Dimensions describe the number of pixels; file size describes the bytes stored. A 4000-pixel photo displayed at 800 pixels makes visitors download detail they cannot see. Resize it to the largest size the layout actually needs before tuning quality.

Keep the aspect ratio locked unless intentional stretching is required. After resizing, compression can reduce bytes further by changing quality or format.

A concrete ratio check is 4000 × 3000 to 800 × 600. With the lock enabled, entering 800 for width should calculate 600 for height. That math and the Canvas export path have deterministic checks, but an actual browser download still needs inspection. The resizer stretches rather than crops when the ratio is unlocked, so a square preset applied to a wide photograph is not a crop.

Tools used in this section

• Image Resizer — Set target width and height while preserving aspect ratio.
• Image Compressor & Converter — Adjust quality, compare size, and export JPEG, PNG, or WebP.

Pick a format based on the image

JPEG is a practical choice for photographs without transparency. PNG preserves transparency and sharp graphic edges but can be large for photos. WebP often provides a smaller web output while supporting both photographic content and transparency.

Format conversion is not automatically an improvement. Inspect text, faces, gradients, and transparent edges at normal display size before accepting the smaller file.

In the compressor, start with WebP at 80% and record the displayed Before and After byte counts. The tool keeps the original file when browser re-encoding would be larger. That honest “already optimized” result is a valid outcome, not a failure. JPEG output fills transparent pixels white; use PNG or WebP when transparency is required.

1. Keep an untouched source image.
2. Resize to the maximum rendered dimensions.
3. Choose a compatible output format.
4. Lower quality gradually and compare the preview.
5. Download and verify dimensions, visual quality, and transparency.

Verify QR exports as scannable output

A QR code is an image whose success depends on both its exact payload and the final display or print conditions. Choose URL, enter https://example.com/docs?ref=guide, keep a quiet zone of 4, select 600 px, and export PNG. The deterministic payload is exactly the entered URL; the expected browser result is a PNG download containing that code.

Open the downloaded file rather than relying only on the preview, then scan it with at least two phones and confirm both offer the exact HTTPS destination before publishing or printing. If example.com is entered without https://, URL validation blocks export. If a scan-safety error appears, restore strong contrast, reduce logo coverage, or shorten dense content before trying again.

Tools used in this section

• QR Code Generator — Build a validated payload, review scan-safety warnings, and export PNG, SVG, or PDF.

Special cases

A transparent subject needs PNG or WebP output; JPEG cannot preserve transparency. AI background removal is a separate server-processed workflow, so do not treat it as equivalent to the local compressor and resizer.

Tools used in this section

• Background Remover — Create a cutout when automated subject isolation is appropriate.

Continue learning

Browse every RizzKit guide or use the linked tool pages to review exact processing details, examples, and limitations before starting.