How to compress images for the web

A JPEG quality number tells the encoder how aggressively to discard detail. It is not a promise that the file will shrink by that percent. A quality of 80 can make a photo smaller and can make a small PNG larger, because the new file is a JPEG of the pixels, not a trim of the old bytes. On the image compressor the slider runs from 10 to 100 and opens at 80. Lower usually means a smaller JPEG. It also usually means softer edges and more blockiness in flat color.

PNG is a different trade. The PNG encoder on the resizer and on the HEIC and WebP converters is lossless. The quality slider does not apply to it. A PNG keeps the pixels you drew, including a transparent background. A JPEG cannot keep transparency. The compressor flattens transparent pixels to white and always downloads a .jpg.

Use JPEG for photographs where a small loss of detail is acceptable and there is no transparent background. Use PNG for logos, screenshots with sharp text, and any image that must keep a clear background. WebP can store a lossy photo or a lossless image, and it can store transparency, which is why many sites serve it. UtilGenie’s WebP converter does not write a WebP. It reads a WebP and writes a JPEG or a PNG. The compressor can read a WebP and also writes a JPEG.

There is no single format that is smaller for every picture. A flat logo is often smaller as PNG than as a low-quality JPEG, and it looks cleaner. A 12-megapixel photo is usually smaller as JPEG than as PNG. Measure the file you actually downloaded. Do not copy a percentage from a different image.

Before it encodes, the compressor fits the picture inside 1920 by 1080 if either side is larger. The scale is the smaller of 1920 divided by the width and 1080 divided by the height. Each side is rounded to a whole pixel. A 4000 by 3000 photo uses 1080/3000 = 0.36, so it becomes 1440 by 1080. An 800 by 600 picture is already inside the box and stays 800 by 600. The compressor does not enlarge.

The download name keeps your base name, strips the old extension, and adds -compressed.jpg. The original file is not modified. Processing runs in the browser. The bytes are not uploaded. Clear the preview when the photo is sensitive, because it is still on screen until you leave.

The image resizer has three modes. Fit inside scales down so both sides fit the width and height you type, and it never scales up. Exact pixels uses the width and height you type, even when that stretches the picture. Percent multiplies both sides and can grow the picture. A 4000 by 3000 photo set to fit inside 800 by 800 becomes 800 by 600. The same photo set to exact 800 by 800 becomes 800 by 800 and changes shape. Percent 25 on a 1920 by 1080 frame is 480 by 270.

Width times height has to stay at or under 40 million pixels. JPEG or PNG are the outputs. A clear background survives only if you pick PNG. Use the resizer when the layout needs a pixel size. Use the compressor when the pixel size can shrink only to the 1920 by 1080 box and you want a JPEG.

Phone photos that are still HEIC or HEIF belong on the HEIC page. The file has to really be HEIC, at most 20 MB, and a batch stops at 20. JPEG presets are High 92, Standard 85, and Smaller 70, and the slider accepts 1 to 100. PNG ignores that slider. A Live Photo keeps the first still and says so. Pixel size stays the decoded size. This page does not fit the photo inside 1920 by 1080.

The WebP converter uses the same JPEG presets and the same 20 MB cap, and it writes JPEG or PNG rather than another WebP. A renamed file that is not WebP is refused. Both converters run in the browser. After you have a JPEG or a PNG, the resizer and the compressor can take the next step if you still need a different size or a smaller JPEG.

Decide the pixel box first, then the format. A hero photo can be resized to the width the layout uses, then saved as JPEG around the compressor’s default of 80 if it has no transparency. A logo with a clear background should stay PNG, or be converted to PNG from HEIC or WebP, and should not be sent through the compressor if the white flatten would ruin it. Scan the result at the size it will be shown. A file that looks fine at 100% zoom can look soft when the page stretches it.

None of these pages promise a target kilobyte size. They apply the scale and the encoder setting above. If the JPEG is still larger than you can ship, lower the quality or shrink the pixels and export again. Keep the original until the new file looks right.

A logo with a transparent background should leave as PNG. The compressor always writes JPEG and flattens clear pixels to white, so a logo sent there gains a white box. The resizer can write PNG and can keep the clear pixels. Exact pixels stretches the logo when the width and height do not match its shape. Fit inside does not stretch, and it does not enlarge a small logo.

A photograph can use the compressor. A 4000 by 3000 frame becomes 1440 by 1080, then a JPEG at the quality you set. Quality 80 is the opening value, and 10 is the low end of that slider. The HEIC slider starts at 1. The two minimums are not the same. After a HEIC conversion at Standard 85 you still have the decoded pixel size. Resize or compress only if the layout needs fewer pixels.

WebP as a format can be lossy or lossless, and it can store transparency. That describes the format, not a measurement of one file. This site does not write a WebP download. The WebP converter reads a WebP and encodes JPEG at 92, 85, or 70, or a PNG if you change the target. The compressor can open a WebP the browser can decode and then writes JPEG, after the 1920 by 1080 fit.

If a pipeline must ship WebP, do that encode where the file is served. Use these pages to inspect a JPEG or a PNG first. A renamed file that fails the header check is refused. A PNG saved as .webp will not convert, and a HEIC saved as .jpg will not pass the HEIC page.

Compare the original byte length with the download on your machine. The compressor shows both sizes for the file you just encoded. A high quality setting can make the JPEG larger than a PNG that was already small. That is a possible result. Lower the quality or keep the original. There is no claim here that every image shrinks by a fixed percent.

Read edges and any text in the picture at the size the layout will use. JPEG softness shows up on screenshots more than on photographs. If the words are part of the image, PNG from the resizer is the safer encode. These steps run in the browser. The file is not uploaded. Clear the preview when the photo is private.