How to Reduce Image File Size for the Web

Smaller files start with fewer pixels

The fastest way to cut image weight is usually not a magic codec setting. It is serving an image close to the size it will display. A 5000-pixel-wide photo compressed aggressively still wastes memory and decode time if the layout shows it at 800 CSS pixels.

Order of operations that works well:

1. Crop to the needed framing.
2. Resize to the target dimensions (aspect ratio locked).
3. Apply compression appropriate to the format.
4. Weigh visual quality at real display size, not at 400% zoom only.

Resize before you crush quality

Use a local resizer such as the Image Resizer on Filewillow to set width or height with locked proportions. For retina layouts, exporting near 2× the CSS size is common; exporting 8× is rarely useful.

Downscaling reduces pixel count roughly with the square of the linear dimensions. Halving width and height can drop raw pixel count to about one quarter before compression even begins.

JPEG: use the quality slider deliberately

JPEG quality is a tradeoff curve, not a moral grade.

• High quality → larger files, fewer blocky artifacts
• Low quality → smaller files, more banding and edge noise

Practical approach: pick dimensions first, then lower quality until the file meets a budget or artifacts become noticeable in faces and flat skies, whichever comes first. Flat UI screenshots usually look worse in JPEG than photos do; switch those to PNG when edges matter.

Repeatedly opening and re-saving the same JPEG at low quality stacks generation loss. Prefer exporting from the original or a high-quality master.

PNG: size follows complexity

PNG does not use a JPEG-style quality dial in most simple tools. File size grows with resolution, transparency complexity, and noise. To shrink PNGs:

• Reduce dimensions
• Simplify or flatten when transparency is unnecessary
• Convert photo-like PNGs to JPEG or WebP when lossless is not required

Budgets you can actually use

Rough starting targets for many content sites (adjust per design):

• Inline article photo: often 100–300 KB after sensible resize
• Hero image: higher, but still rarely needs multi-megabyte mobile payloads
• Icons/logos: prefer SVG when possible; otherwise small PNGs

Email clients and some CMS limits are stricter than modern broadband, optimize for the channel.

What not to do

• Do not stretch an image smaller in CSS while shipping a huge file.
• Do not “compress” by screenshotting a screenshot repeatedly.
• Do not rely on renaming .png to .jpg; that does not convert encoding.
• Do not expect browser canvas tools to match specialized perceptual encoders byte-for-byte. They are for practical local prep.

Metadata and size

Stripping EXIF can save a little space, but it is primarily a privacy move. Dimension and compression choices dominate file size. Handle privacy with a dedicated cleaner when needed; handle weight with resize and encode settings.

Verify the result

After export:

1. Check dimensions.
2. Check file size on disk.
3. View at final layout width on a phone-sized screen.
4. Keep the original master.

Summary

Reduce image weight by matching pixel dimensions to display needs, then compressing in a format that fits the content. The Image Resizer covers the common JPEG/PNG browser workflow; pair it with honest visual checks instead of chasing the smallest number at any cost.

Related reading

Keep proportions with how to resize without stretching. Format tradeoffs are covered in JPEG vs PNG vs WebP.