Image files are heavy. A smartphone photo is 3-5 MB; a screenshot is 1-2 MB. Before sharing via email, uploading to a cloud service, or embedding in a website, you need to optimize: resize to the right dimensions, choose the best format (JPG, PNG, WebP), and compress without losing visible quality. You can do all of this in your browser—no upload, no account, no external service. This guide walks you through format selection, quality trade-offs, and how to preserve or strip metadata safely. Most people over-solve this problem by either not compressing at all (leading to slow-loading web pages and bounced email attachments) or over-compressing everything to one aggressive setting regardless of content, which visibly ruins photos with fine detail or gradients. The right settings depend heavily on what the image actually contains and where it's going — a product photo for a fast-loading storefront has different requirements than a screenshot in a bug report.
- Choose your format wisely: JPG is best for photographs and complex images with many colors—it compresses well and supports all devices. PNG is best for graphics, logos, and images with transparency—it's lossless but larger. WebP is the modern standard, offering the best compression for both photos and graphics, but older browsers may not support it. Start with JPG for photos; use PNG if you need transparency.
- Understand quality and compression: JPG quality ranges from 1-100. Quality 75-85 is visually excellent and compresses heavily; quality 90+ looks perfect but files stay large. Test different quality levels locally with the Image Optimizer to find your sweet spot—usually 80 is the best balance between visible fidelity and file size for most photos.
- Resize to the intended dimensions: if you're embedding a 6000x4000 original photo in a web article that displays at 800 pixels wide, resize to 1200-1600 pixels wide (1.5-2x the display size for crisp high-DPI displays). Resizing reduces file size by 50-80% compared to just compressing the original at full resolution, since fewer pixels means less data regardless of compression quality.
- Handle metadata and EXIF safely: photos from phones and cameras contain metadata (GPS location, camera settings, timestamps, sometimes a thumbnail). If privacy matters — sharing a photo publicly, posting to a forum, sending to someone you don't fully trust — strip metadata before sharing. If you need attribution or color profile information for archival purposes, preserve it. The Image Metadata tool lets you inspect and understand what's embedded before deciding either way.
- Test on devices before finalizing: a heavily compressed JPG might look fine on your desktop but pixelated on a phone, or vice versa, depending on how each device's display renders compression artifacts. Save your optimized image and test on the devices where it will actually be viewed — quality expectations differ meaningfully between email, a web gallery, and print.
- Know when PNG compression won't help much: PNG is already lossless, so a PNG Compressor mostly optimizes the internal encoding (palette reduction, filter selection) rather than discarding image data. A PNG screenshot with large flat-color areas compresses very well; a PNG photograph with lots of gradients and noise barely shrinks at all — that's a strong signal it should be converted to JPG or WebP instead.
- Consider WebP for the biggest wins when your audience supports it: WebP typically produces 25-35% smaller files than JPG at equivalent visual quality, and it supports transparency like PNG while staying much smaller. The main trade-off is that a handful of older tools, some email clients, and older Windows image viewers may not preview it correctly, so JPG/PNG are still the safer default for maximum compatibility.
- Batch-process consistent sets of images (a product catalog, an album) using the same target dimensions and quality setting rather than eyeballing each one individually. Visual consistency across a set matters as much as any single image looking perfect, and a shared setting also makes file sizes predictable across the whole batch.
- Avoid repeated re-compression: every time a JPG is re-saved with lossy compression, it loses a little more quality, even if the visible dimensions and settings look the same. Always compress from the original, highest-quality source file rather than compressing an already-compressed copy a second or third time.
- Understand color profiles when images look different across devices: most photos are saved in the sRGB color space, which is the safe default for the web. Photos exported from professional cameras or editing software in Adobe RGB or another wide-gamut profile can look oversaturated or washed out in browsers that don't manage color profiles correctly — converting to sRGB before web use avoids this inconsistency.
- Know the difference between resizing and cropping: resizing scales the entire image down proportionally, keeping the full frame but reducing detail; cropping removes part of the frame to change the composition or aspect ratio without necessarily reducing resolution. Confusing the two is a common mistake when someone actually wants a square avatar (a crop) but instead just resizes a rectangular photo (which distorts or letterboxes it).
- Consider image dimensions relative to their container, not just their absolute size: a 2000-pixel-wide image displayed in a 300-pixel-wide sidebar wastes almost all of its detail and bandwidth. Matching source dimensions to actual display size (with some margin for high-DPI screens) is usually a bigger size win than compression quality tweaks alone.
- Preserve an original, uncompressed copy of source images before doing any lossy processing. Once a JPG has been compressed and the original discarded, there's no way to recover the lost detail — keep an untouched master copy (even if it's larger) so future edits or higher-quality needs don't require re-shooting or re-scanning.
- Match compression strategy to how an image will actually be viewed: an image destined for a full-bleed hero banner needs more headroom for quality than one used as a small supporting thumbnail, since compression artifacts become far more visible the larger an image is displayed relative to its pixel dimensions.
- Factor in animated formats separately: GIF and animated WebP behave very differently from static image compression — a GIF's file size scales with frame count and color palette rather than JPG-style quality settings, so shrinking an animated file usually means reducing frame count, dimensions, or color depth rather than adjusting a single quality slider.
- Plan for high-DPI (Retina) displays deliberately rather than by accident: modern phone and laptop screens often render at 2x or 3x pixel density, so an image sized exactly to its display width can look soft on these screens. Exporting at 1.5-2x the intended display size and letting the browser or app scale down is the standard way to keep images crisp without needlessly bloating file size for standard-density screens.
- Double-check orientation and rotation metadata before publishing: some cameras and phones save a photo in its native sensor orientation and store the correct display rotation in EXIF data rather than physically rotating the pixels. If metadata gets stripped by a tool that doesn't also apply the rotation first, the image can appear sideways or upside-down in viewers that don't read EXIF orientation.
- Finish with a side-by-side comparison rather than trusting the file-size number alone: open the original and the compressed version at the same zoom level and glance at both for a few seconds before publishing anywhere. File size is an easy number to optimize for, but the actual goal is always an image that looks acceptable to the people who will see it — the number is a proxy, not the point.
The purpose of this guide is to strengthen the app page with supporting context, not to replace the app itself.