How to Reduce Image File Size

Work through the biggest causes

Start with pixel dimensions. Delivering a very large source to a small display wastes transfer and decode work. Produce responsive sizes when an image appears at substantially different widths. A browser image compressor can reduce image file size, but matching dimensions to the display often gives a better result than lowering quality alone.

Next choose a format that fits the content: JPEG or WebP for many photos, PNG for exact pixel graphics, and WebP where its transparency and browser support suit the asset. Then adjust lossy quality in small steps and inspect the result.

Work toward an upload size limit

If a form has a file-size cap, resize to the dimensions it needs before tuning quality. A photo may need a lower resolution to fit under 500 KB or 1 MB; getting below 100 KB or 50 KB can require more visible trade-offs, and a 20 KB target may only suit a tiny or simple image. No image compressor can guarantee the same target for every source.

GZ shows the output bytes after each quality or dimension change, so you can compare the actual result against a 100 KB, 200 KB or other limit. Keep details such as text, edges and faces legible, and check the compressed copy before replacing the original.

Measure the actual outcome

Compare output bytes, dimensions and visual quality. Re-encoding an already optimized file may increase its size. Keep an original master and treat optimized versions as replaceable derivatives.

For a site, also consider delivery details such as caching, responsive markup and lazy-loading offscreen content. Image byte reduction is one part of page performance, not the entire performance plan.

Frequently asked questions