Web Tools tools.bryantsmith.com

Guide

Resize and compress an image for the web

A large image costs bandwidth twice: once in the pixels that are sent and once in the bytes per pixel. This workflow fixes the dimensions first, then the format and quality, so each change is easy to judge on its own.

Step 1 — set the pixel dimensions

Start with the Image Resizer and choose Exact size with the aspect lock on. Enter only the width you need and the height is derived, so the image is not stretched. The preview reports the source size, the output size, the scale factor and the download name before you save anything.

Input

Sample image 1600 × 1000
Mode: Exact size
Width: 800 px
Lock aspect ratio: on

Output

Output: 1600 × 1000 → 800 × 500 px
Scale: ×0.5
Download name: sample-1600x1000-800x500.png

Turning the lock off gives 800 × 1000 and visibly distorts the image. To fit an image inside a maximum box instead, switch to Fit box and use Contain; use Cover only when you want to crop to fill the box.

Step 2 — choose the format

The Image Format Converter moves between PNG, JPEG and WebP. PNG is lossless and keeps transparency; JPEG and WebP are lossy and usually much smaller. The converter names the output file, shows whether the result is lossy, and says when transparency is being flattened, which is important for JPEG.

Input

Source: holiday-photo.png, 1920 × 1080
Format: JPEG
Quality: 80

Output

File name: holiday-photo.jpg
Format: image/jpeg (lossy)
Transparency flattened to #ffffff
Size: 1920 × 1080 (not scaled)

JPEG has no alpha channel, so any transparent pixel becomes the chosen background colour. WebP supports alpha and is a better choice when transparency must survive.

Step 3 — reduce the bytes

The Image Compressor re-encodes the file at a chosen quality and an optional maximum width. It keeps the aspect ratio and never enlarges an image, so the output only gets smaller or stays the same.

Input

File: beach.jpg, image/jpeg, 4200000 bytes
Format: WebP
Quality: 80
Max width: 1920 px

Output

Output name: beach.webp
Quality fraction: 0.8 (lossy)
Scaled size: 1920 × 1440 (was 4000 × 3000)

The exact byte count is produced by the browser encoder when you export, so the tool cannot promise a specific file size. If you need a target, use the Image Savings Calculator to compare formats and dimensions.

Common mistakes

  • Uploading the full-resolution photo and letting CSS scale it down; the bytes are still sent.
  • Using JPEG for a logo or screenshot with sharp edges or transparency.
  • Compressing the same JPEG repeatedly, which compounds lossy artefacts.
  • Forgetting that an animated GIF becomes a single still frame when re-encoded.