To reduce an image’s file size for a website, first decide how large it needs to appear, then compare suitable output formats and compression settings. Keep the version that preserves the detail your reader needs at an acceptable download size. The smallest file is not automatically the most useful image.
This workflow uses the Image Compressor. It provides an optional maximum width, a quality slider, before-and-after previews and a downloadable result. Its current input limit is 20 MB per image.
Separate dimensions, format and compression
Dimensions describe the pixel width and height. Format describes the file type, such as JPEG, PNG or WebP. Compression affects how image data is stored. These are different decisions: lowering the quality setting does not necessarily reduce pixel dimensions.
Imagine a 4,000-pixel-wide product photo that appears in a 700-pixel-wide content area. Keeping the full source width may be unnecessary for that placement. A 1,400-pixel version is one candidate for a display using two image pixels per CSS pixel. This is a planning example, not a rule for every website; zooming, responsive layouts and other placements may require different sizes.
Choose an output to compare
| Image | Candidate to try | What to inspect |
|---|---|---|
| A photograph with many colors | JPEG and WebP | Fine texture, edges and smooth color transitions. |
| A transparent product cutout | PNG or a supported WebP export | Transparent edges against the actual page background. |
| A screenshot containing small text | Keep PNG as a comparison candidate | Whether letters remain readable at the displayed size. |
| An already optimized small file | The original alongside the new export | Whether re-encoding actually saves any bytes. |
A browser export can behave differently from a dedicated image editor. MDN’s canvas export documentation explains that quality applies to formats supporting lossy compression, and unsupported requested formats can fall back to PNG. Check the downloaded file’s actual type.
Compress one image, step by step
- Keep your original. Save the export separately so another page layout can still use the source image later.
- Choose a representative image. Start with one photo containing the difficult detail found in the rest of your set, such as product lettering or fabric texture.
- Load it in the compressor. Check the original dimensions and file size shown in the preview.
- Set a maximum width if needed. The current tool reduces the image proportionally when the maximum is smaller than the source width. Leaving the field blank keeps its dimensions.
- Try JPEG or WebP for a photo. Use the default quality of 80 as an initial comparison point, then adjust based on the visible result. It is not a universal recommended setting.
- Compare both previews. Look at text, faces, fine edges and shadows. A blurry logo matters even if the overall picture looks acceptable.
- Download and inspect the export. Open the actual file and then check it in the intended page layout. Keep the original if the export is larger or visibly worse.
For a separate dimension-only task, use the Image Resizer. If you are comparing file types, the Image Format Converter offers another starting point.
Use a small comparison log
Record the source filename, intended placement, output dimensions, format, quality setting and resulting bytes. Add a short visual note such as “label readable” or “gradient shows bands.” This makes it easier to choose settings for a group of similar images without repeatedly guessing.
For example, if an original is 800 KB and a candidate is 240 KB using the same size unit, the reduction is (800 - 240) / 800 × 100 = 70%. Those are illustrative numbers, not a promised result. A different source may shrink less, or grow when exported again.
Handle these tool-specific details
- PNG and the slider: the current compressor’s PNG export ignores the quality slider. Changing dimensions or comparing a different format may make a more meaningful difference.
- Transparent areas: this tool fills the canvas white before exporting JPEG, so transparent areas can become white.
- Metadata: canvas re-encoding can discard source metadata. Keep the original if you need embedded information, and verify orientation in the downloaded result.
- Animation: this workflow is for still images. Do not assume a canvas export will preserve an animated file.
Finish the image on the page
Compression is only one part of publishing. Give the file a descriptive name, place it beside relevant text and write alt text appropriate to its role. For a product photograph, describe the visible item; do not turn the alt text into a list of search keywords.
Google’s image guidance covers discoverable HTML image elements, responsive images, meaningful surrounding content and the balance between visual quality and speed. A smaller file alone does not establish that an image is indexed or that a page will rank.
Before publishing the page, also check its headline with our SEO title-tag examples and checklist.