Compress Images for the Web and Email Without Making Them Mud

A 12-megapixel phone photo is a wonderful thing to keep and a terrible thing to put at the top of a web page. It can be 4–8 MB, take seconds to load on a phone and make an email bounce. Compression fixes the size, but it can also turn a sharp photo into a soft, blocky mess if you push it too far.

The useful question is not “what quality setting should I use?” but “where will this image be displayed, and how large does it need to be there?” A 400-pixel-wide card does not need a 4000-pixel image. Resizing first often does more for the file size than aggressive compression.

Compression versus resizing

Compression reduces the amount of data used to store the image at its current dimensions. Resizing changes the number of pixels. They solve different problems.

If a photo is 4000 × 3000 and will be displayed at 800 × 600, resizing is the biggest win. Compressing the 4000-pixel image is like packing a large suitcase more tightly when you only need a small one.

If the image is already the right dimensions but the file is heavy, compression is the right tool. A 1200-pixel-wide JPEG at 1.2 MB can often become 150–250 KB with little visible loss.

OpenToola’s Compress Image tool has a quality control and a maximum dimension of 4096 pixels. It is designed for quick compression, not for precise layout. Use Resize Image when you need an exact width or height.

Choose dimensions by destination

For a website hero image, 1600–2000 pixels wide is usually enough for a desktop display and a high-density screen. For a card or thumbnail, 400–800 pixels is enough. For an email, 1200–1600 pixels on the long edge is generous.

For social media, use the platform’s recommended dimensions. Uploading a 4000-pixel image to a platform that displays it at 1080 pixels gives the platform more data to throw away, not a better result.

For print, do not compress for the web. A print image needs 300 DPI at the final print size. A 1200-pixel image printed at 10 inches is only 120 DPI; it will look soft.

Choose the format

JPG is the default for photographs. It compresses well and is accepted everywhere. It does not support transparency, so a logo or a PNG with a transparent background will get a white or black box.

PNG is better for screenshots, logos, line art and images with transparency. It is lossless, so the file is larger for photos, but the edges stay sharp.

WebP is often smaller than JPG at similar quality and supports transparency. It is a good choice for modern websites. Not every email client or old application accepts it, so use JPG for email and general sharing unless you know the recipient can open WebP.

Quality settings that make sense

For a photograph on the web, start at 75–85 %. The difference between 85 % and 95 % is often invisible on a screen, while the file size can double. For a large hero image, 80 % is usually enough.

For email, 70–80 % is a reasonable starting point if the image has already been resized. Below 60 %, skin tones and gradients start to show blockiness. Below 40 %, the image looks damaged.

For screenshots with text, JPEG is the wrong format at low quality; the text edges become fuzzy. Use PNG or a high-quality WebP. If you must use JPEG, keep the quality high and avoid resizing the screenshot down too far.

A practical web workflow

Start with the largest original you have. Resize to the display size, allowing for high-density screens (roughly 2× the CSS width). Then compress.

Example: a card displayed at 400 × 300 CSS pixels. Export at 800 × 600 for a sharp high-density screen. Compress to 70–80 % quality. The result is often 60–150 KB, which is reasonable for a card.

A hero image displayed at 1600 × 900 CSS pixels can be exported at 2000 × 1125 and compressed to 150–350 KB. If it is a photograph with a lot of detail, it may be larger; check the result.

Do not compress the same image repeatedly. Each JPEG save re-encodes it and adds artefacts. Keep the original and export once from it.

A practical email workflow

Most email services allow 10–25 MB in total, but the recipient’s inbox may be smaller. A few photos at 4 MB each can exceed the limit quickly.

Resize photos to 1600 pixels on the long edge, compress to 75–80 %, and check the total attachment size. If you need to send many photos, send a link to a cloud folder instead of attaching everything. Email is not a file transfer service.

Do not send a screenshot of a photo. Take the original, resize it, and compress it once. A screenshot adds the screen’s resolution and often a border or interface element.

Transparency and logos

A transparent logo saved as JPG will lose its transparency. The transparent area becomes white, which looks wrong on a coloured header. Use PNG or WebP for logos and icons.

PNG can be larger than JPG, but a logo with flat colours compresses well in PNG. If the logo is a photograph with transparency, WebP is often the best compromise.

Metadata and privacy

Compression can remove EXIF metadata, including GPS coordinates, camera model and capture date. That is often desirable for a public website. It can also remove the orientation tag, so a photo that relied on EXIF rotation may appear sideways after compression.

Check the result. If the photo is sideways, rotate it in an editor and export again. If you need to keep the capture date for an archive, do not use a compressor that strips metadata, or record the information separately.

When compression is the wrong fix

If the image is blurry, compression will make it blurrier. If it is the wrong dimensions, compress less and resize instead. If it is a scanned document with text, use a PDF or a PNG, not a low-quality JPG.

If the image is for print, keep the resolution and avoid lossy compression. If the image is a medical or legal document, do not compress away the detail that makes it readable.

Checking the result

Open the compressed image at 100 % and look at a detailed area: faces, text, foliage or fabric. Check the file size and the dimensions. Open it on a phone if the image will be viewed on a phone.

If the image looks soft, increase the quality or reduce the dimensions less. If the file is still too large, resize more aggressively rather than dropping the quality to a level that ruins the image.

Compression for different platforms

A website, an email and a social network have different limits. A web page can lazy-load images below the fold, so the hero image matters most. An email has to fit the attachment limit and may be viewed in a small preview. A social platform recompresses uploads, so sending a moderately sized file is often better than sending a huge one.

For a marketplace listing, 1200–1600 pixels on the long edge is usually enough. For a profile photo, 400–800 pixels is enough. For a print-on-demand product, follow the printer’s DPI requirement and do not compress to web sizes.

How to test image quality

Open the original and the compressed file side by side at 100 %. Look at a face, a text label and a textured area. If the compressed version looks soft at 100 %, it will look soft on a high-density screen.

Then view the compressed image at the size it will actually appear. A photo that looks bad at 400 % zoom may look perfectly fine in a 400-pixel card. Do not judge a web image at a zoom level nobody will use.

Check the file size in KB, not just the quality slider. The slider is a setting, not a guarantee. A detailed image may stay large even at 70 %; a simple graphic may become small at 90 %.

One image at a time

OpenToola’s Compress Image tool handles one image at a time. For a small batch, that is fine: compress, download, repeat. For a large catalogue, use a dedicated batch tool or a script; doing 200 images one by one is slow.

Keep the original files in a separate folder. Name the compressed copies with a suffix that tells you the setting, for example photo-web-80.jpg or photo-email-1600.jpg. If a client asks for a larger version later, you still have the original.

Transparency and screenshots

A screenshot with text should not be saved as a low-quality JPG. The letters develop halos and become hard to read. Use PNG for screenshots, or WebP at high quality if the destination supports it.

If a PNG has transparency and you compress it as JPG, the transparent area becomes a solid colour. Check the result before uploading it to a site with a coloured background. If the transparency is important, keep PNG or WebP.

Privacy

OpenToola compresses the image in the browser. The file is not uploaded and is not stored in an account. The compressed copy is downloaded to your device.

That is useful for personal photos and documents. It does not make a shared computer safe. Delete the downloaded file after uploading or sending it, and keep the original in a private folder.

Tools mentioned

• Compress Image
• Resize Image
• Convert Image
• OpenToola Guides