How to Compress Images for the Web Without Ruining Them

Lossy versus lossless compression

Every image format falls into one of two families. Lossless compression shrinks a file by describing the same pixels more efficiently, the way a zip file shrinks a document. When the image is opened again, every pixel is exactly what it was. PNG is the familiar lossless format for the web, and it is excellent for screenshots, logos, icons, diagrams and anything with sharp edges, flat colors or text.

Lossy compression goes further by throwing away detail the human eye is unlikely to miss. JPEG, for example, splits the image into small blocks, converts them into frequency information, and keeps fine high-frequency detail only as precisely as the chosen quality setting allows. It also stores color at lower resolution than brightness, because our eyes are more sensitive to light and dark than to subtle shifts in hue. For photographs, which are full of gradual texture and noise, lossy compression produces dramatically smaller files than lossless compression ever could.

The practical rule is simple: use lossy formats for photographs and realistic imagery, and lossless formats for graphics, interface captures and anything where crisp edges or exact colors matter. Running a screenshot through heavy JPEG compression produces smudgy halos around text, while saving a vacation photo as PNG can produce a file several times larger than it needs to be.

Choosing between JPG, PNG, WebP and AVIF

JPEG remains the most universally compatible photo format. Every browser, email client, operating system and image editor understands it. It does not support transparency, and at low quality settings it shows blocky artifacts, but at moderate settings it is a dependable default.

PNG supports full transparency and is lossless, which makes it the standard choice for logos, illustrations with flat color and screenshots. Its weakness is photographic content, where file sizes balloon.

WebP was designed for the web and supports both lossy and lossless modes as well as transparency. For the same visual quality, a lossy WebP is typically noticeably smaller than an equivalent JPEG, and all current major browsers support it. For most websites today, WebP is the best everyday choice for photos and many graphics.

AVIF is newer and often compresses even more efficiently than WebP, especially at lower file sizes, and it also supports transparency. The trade-offs are that encoding is slower and some older software and devices still cannot open it. A common approach is to serve AVIF or WebP to modern browsers and keep a JPEG fallback where broad compatibility matters, such as images that will be shared by email or downloaded by visitors.

Quality settings: finding the sweet spot

The quality slider in a lossy encoder is not a percentage of quality you keep. It is a control over how aggressively detail is discarded, and its effect is not linear. Moving from 100 to 90 usually cuts file size substantially with almost no visible change. Moving from 90 to 75 cuts size again and is still invisible for most photos at normal viewing sizes. Below roughly 50, artifacts start to appear in smooth areas like skies and skin, and around sharp edges.

There is no universal best number, because different images respond differently. A busy photo of foliage hides artifacts well, while a portrait against a smooth gradient reveals them quickly. The reliable method is to compare. Start around 75, look at the result at the size it will actually appear on the page, then step down until you notice a difference and back up one notch. Always compare against the original rather than judging the compressed version on its own.

Avoid recompressing an image that has already been saved as a lossy file several times. Each round of lossy encoding throws away a little more detail, and the damage accumulates. Whenever possible, start from the highest-quality original you have.

Resizing matters more than any slider

The single biggest saving usually comes from reducing pixel dimensions, not from the quality setting. File size scales roughly with the number of pixels, and pixel count grows with the square of the width. Halving the width of an image removes about three quarters of its pixels.

Here is a worked example. A typical 12 megapixel phone photo measures 4,032 by 3,024 pixels, which is 12,192,768 pixels. Suppose it will appear in a blog post column that is never wider than 800 CSS pixels. To look sharp on high-density screens, which use two device pixels per CSS pixel, you might export it at 1,600 pixels wide. Keeping the same 4:3 proportions, that gives 1,600 by 1,200 pixels, or 1,920,000 pixels. That is about 15.7 percent of the original pixel count, meaning roughly 84 percent of the pixels are gone before compression even begins. Uncompressed, at three bytes per pixel, the original holds about 36.6 megabytes of color data and the resized version about 5.8 megabytes. Apply WebP or JPEG compression at a balanced quality on top of that, and the final file is a small fraction of what the phone produced.

A good habit is to decide the largest size an image will ever be displayed at, double it for high-density screens, and never upload anything wider. Uploading a 4,000 pixel image and letting the browser shrink it to 800 pixels wastes bandwidth on every single page view.

Dealing with HEIC photos from iPhones

Recent iPhones save photos by default in HEIC, a format based on the High Efficiency Image File Format standard. HEIC compresses photos very efficiently, which saves storage space on the phone, but support outside Apple devices is uneven. Many websites, content management systems, older Windows installations and most browsers other than Safari cannot display it directly.

Before publishing an iPhone photo, convert it to a web-friendly format. JPEG is the safest choice for compatibility, while WebP gives smaller files for use on a website. You can also change the iPhone camera setting to Most Compatible so new photos are captured as JPEG, though that uses more storage on the phone.

Metadata: the hidden data inside your photos

Most photos carry metadata alongside the pixels. The most common kind, EXIF, can record the camera or phone model, lens, exposure settings, the date and time the photo was taken and, if location services were on, precise GPS coordinates. Editing software may add its own XMP data, and some files carry embedded color profiles and thumbnails.

This information is useful in a personal photo library but is rarely needed on a public web page. It adds weight, and more importantly it can reveal where you live or where a photo of your children was taken. Some platforms remove metadata automatically when you upload, but many websites and file-sharing services publish the original file exactly as you sent it. If you are not sure, remove it yourself before uploading. One caution: if an image depends on its embedded color profile to look correct, check the result after stripping metadata, because colors can shift slightly on some displays.

A practical workflow with ToolWorld tools

The ToolWorld Image Compressor handles the core job in your browser. You choose a target format of JPEG, PNG, WebP or AVIF, adjust the quality slider or pick a quick setting such as Smaller file, Balanced or More detail, and set a maximum width to resize. It shows the original file size next to the actual encoded output size and dimensions so you can compare before downloading. For PNG it applies lossless optimization, so the quality slider does not apply.

For iPhone photos, the HEIC to JPG Converter turns HEIC or HEIF images into JPG, PNG or WebP locally, with a quality control, an optional maximum width, rotation and a background color for JPEG output. It works in batches and can package the results as a single ZIP download.

Before publishing anything personal, the Image Metadata Remover lets you inspect the tags detected in JPEG, PNG and WebP files and remove standard metadata without re-encoding the pixels, so image quality is untouched. It also supports batches with a ZIP download. A sensible order is convert, then resize and compress, then check metadata on the final file. Done once per image, that routine keeps your pages fast and your private details off the public web.