Start with the place where the image will appear
A smaller file is useful only if it still does its job. For this exercise, use a photo you own that measures 2400 × 1600 pixels. Assume it will appear in a 600 CSS-pixel-wide article column. Keep the original and create a separate export. The numbers below are a worked scenario, not a measured compression benchmark or a promise about every image.
The original aspect ratio is 3:2. An export at 1200 × 800 keeps that ratio and offers two image pixels for each CSS pixel in the assumed 600-pixel layout. An export at 600 × 400 uses fewer pixels but may look softer on a high-density display. These are starting points; test at the actual rendered size before choosing. Enlarging a small source does not recreate missing detail.
Calculate the dimensions before changing quality
Use output height = source height × output width ÷ source width. For this photo, 1600 × 1200 ÷ 2400 = 800. The pixel count falls from 3,840,000 to 960,000, one quarter of the original. That does not mean the compressed file becomes exactly one quarter as large: detail, format, metadata, and encoding settings also affect bytes.
Resize first, then compare encoding quality. If you change dimensions and quality at the same time, you cannot tell which change made the result blurry. Keep the ratio lock enabled. Cropping changes the composition; resizing changes the dimensions. If the destination needs a square, choose a crop deliberately and check that faces and important text remain inside it.
Pick a format for the content
| Image | Starting point | What to inspect |
|---|---|---|
| Photo without transparency | JPEG or WebP | Faces, gradients, and fine texture |
| Diagram or screenshot with small text | PNG, or carefully checked WebP | Thin strokes and letter edges |
| Logo needing transparency | PNG or WebP with alpha | Edges on both light and dark backgrounds |
JPEG does not retain an alpha channel. If you export a transparent logo to JPEG, choose a background explicitly and inspect the result. PNG is lossless, but that does not make it the smallest option for photos. Changing a filename extension does not convert the encoded format. Confirm the selected output format and reopen the downloaded file.
Run a controlled comparison
Open the image resizer and resize your copy to 1200 × 800. Then use the image converter to make separate JPEG and WebP exports from that same resized input. Label each file with its format and setting so you can compare them without overwriting the source.
Record the source dimensions and byte size, export dimensions and byte size, and visible defects. For a hypothetical 900 KB source and 270 KB export, the saving is (900 − 270) ÷ 900 × 100 = 70%. Use your own measured sizes; the example does not predict your result. A quality number is an encoder setting, not a measured percentage of visual fidelity, and the same number can behave differently across formats.
Inspect the downloaded result
Open the export at its intended display size and at 100% pixel view. Check small lettering, hair or foliage, gradients, and transparent edges. Then view it in the actual page on a narrow screen. Ensure the image fits the container, has useful alternative text, and does not push other content sideways. For an informative chart, the alternative text should explain the key information rather than merely saying “image.”
If text becomes unreadable, keep a lossless export or increase dimensions before pushing compression further. If the file becomes larger, compare a different format or keep the original. A successful download proves that a file exists; it does not prove readability or that a receiving website accepts it.
Privacy and limits
The linked tools process selected files in the browser, while loading the page, libraries, or advertisements can still make network requests. “Local file processing” does not mean zero network traffic or zero risk. Remove private information you do not intend to share before publishing. Do not assume a conversion strips every metadata field without inspecting the exported file.
References and next exercise
MDN's image format guide describes format capabilities. Repeat the comparison with a text-heavy screenshot. Keep a short record of which output you chose and the visible reason; a decision based only on the smallest byte count misses the purpose of the image.