Reduce a website image in two ways: choose pixel dimensions suited to its display, then choose an encoding that gives an acceptable file size and appearance. Use Image Resizer when the source is much larger than needed, and Image Compressor to compare encoding settings.
There is no setting that guarantees the same visible detail at a smaller size for every picture. A photograph, a transparent logo and a screenshot of small text need different checks.
Work out the display size first
Check the largest space the image occupies in the layout. For a 400-CSS-pixel slot, an 800-pixel-wide source can provide two image pixels per CSS pixel on a 2× display. That does not mean every visitor should download the largest available image; responsive image candidates can serve different sizes.
Resize a copy, keeping the source. Image Resizer accepts up to 20 JPEG, PNG or WebP files, 64 MiB each and 128 MiB together, with 40-megapixel input and output limits. Fit inside preserves the whole picture, while Fill crops to a box. For a more detailed choice between fitting, cropping and padding, see resizing to exact dimensions.
Avoid enlarging a small source merely to reach a preset size. It adds output pixels without restoring detail.
Match the encoding to the content
| Content | Useful starting point | What to inspect |
|---|---|---|
| Photograph | JPEG or WebP | Faces, fine texture and smooth gradients |
| Screenshot or diagram | PNG | Small text, thin lines and flat colors |
| Transparent graphic | PNG or WebP | Edge colors and partial transparency |
Convert to WebP accepts JPEG and PNG inputs and opens on WebP output at quality 0.9. Its WebP encoding is lossy and keeps transparency, but can be larger than the input. Compare the measured files rather than assuming the format alone guarantees savings.
Understand what PNG color reduction changes
Compress PNG opens on a 256-color palette. Reducing a palette can change colors, gradients, text edges and partial transparency. Full color avoids that additional palette reduction; it does not undo earlier edits or resizing.
PNG itself stores its chosen pixel values losslessly. The loss in a reduced-color workflow happens when the image is mapped to fewer colors before those values are encoded. The W3C PNG specification distinguishes indexed-color and truecolor images within the format.
Palette reduction is limited to 16 megapixels after resizing. If the source is too large, turn off No maximum pixel size and set Maximum longest side first. A 4,000-pixel square has 16 million pixels. PNG ignores the JPEG/WebP quality control and its KB target; compare the actual output after changing the palette or dimensions.
Compare JPEG and WebP settings
Compress JPEG opens at 80% quality, with a supported range of 50–100%. Image Compressor also offers JPEG and WebP quality settings, optional resizing and a best-effort target size.
Inspect a downloaded copy at the intended display size and at 100% zoom. If a lower setting damages punctuation, creates halos around a logo or bands a gradient, use a higher quality, a different format or more suitable pixel dimensions.
The compressor can return the unchanged original when no suitable smaller encode is found. That original retains its metadata. A fresh encoding drops original capture metadata; an explicit metadata-removal request can force a fresh JPEG even when it is larger. Check the reported result and review colors when removing color profiles.
Example: a product photograph
Suppose a 4000 × 3000 photo will occupy at most 1200 CSS pixels across. For a 2× candidate, Fit inside at 2400 × 1800 preserves its 4:3 shape. A separate 1200 × 900 candidate can serve smaller display needs.
Compare JPEG and WebP versions of the resized image. Choose by the delivered bytes and the detail that matters in the product, rather than by the same numerical quality value across formats. Keep the source for another export if the layout changes.
Check the image in its actual page
Load the final file in the layout and inspect narrow and wide screens. Confirm the dimensions, crop, small text and transparent edges, then check which file the browser downloads. The file named in the page may differ from the original you edited if a CMS creates or re-encodes image variants.
Measure the delivered size and keep only the versions you intend to serve. A reduced editor preview helps compare settings, but the complete download and the actual page are the useful final checks.