How to optimize images for the web

Image optimization is the practice of delivering the smallest possible file that still looks good to the viewer. It matters because images are usually the heaviest part of a web page: optimizing them is the single most effective thing most people can do to make a site load faster, which in turn improves user experience, search ranking, and bandwidth costs.

Start with the right dimensions

The most common mistake is serving an image far larger than it will ever be displayed. A photo that appears 800 pixels wide on screen gains nothing from being stored at 4000 pixels wide — it just wastes bandwidth. Before anything else, resize images to the largest size they will actually be shown at, perhaps doubled for high-density retina screens.

Choose the right format

For photographs, WEBP at quality 75–85 usually gives the best balance, falling back to JPG for compatibility. For graphics with text, sharp edges, or transparency, PNG or lossless WEBP is appropriate. Matching the format to the content is half the battle.

Tune the quality setting

Quality is a slider, not a switch. The difference between quality 100 and quality 85 is usually invisible to the eye but can halve the file size. Between 85 and 70 you start to trade visible quality for size; below 70, artefacts become noticeable on most photos. The sweet spot for web photography is generally 75–85. The only way to know for a specific image is to compress it and look — which the compress tool here lets you do interactively.

Strip unnecessary metadata

Photos straight from a camera or phone carry metadata: camera model, settings, and often GPS coordinates. This data adds weight and can leak private information such as where a photo was taken. Re-encoding an image through a converter typically strips this metadata, making the file both smaller and more private.

Test the result

Optimization is empirical. Compress, compare against the original at the size it will be displayed, and adjust. A good target for a full-width web photo is well under 200 KB; many can go below 100 KB with no visible loss. The tools on this site let you iterate through this process in seconds, entirely in your browser.