Most images that feel “too big” for a website are not badly compressed. They are simply wider and taller than they need to be. A photo straight from a phone can be 4000 pixels across and still end up in a box that is 700 pixels wide. Resizing that image does far more for its file size than nudging a quality slider ever will.
The two jobs are related but not the same. Resizing changes the number of pixels. Compression changes how much data is used to describe each pixel. Get the dimensions right first, then compress—and your images will look better at the same file size.
Start with dimensions, not the quality slider
Decide how wide the image will actually appear, then account for high-density screens. A practical rule is to export at twice the CSS width if you want it to stay sharp on phones and laptops with dense displays. A 600-pixel-wide card, for example, benefits from a 1200-pixel image.
| Where it appears | Longest side | Notes |
|---|---|---|
| Full-width hero image | 1600–2000 px | 1600 px is enough for most sites; larger only helps on very wide screens. |
| Article body image | 1200 px | At 2× density, this covers a 600 px content column. |
| Card or thumbnail | 600 px | Smaller than this starts to look soft when enlarged. |
| Email inline image | 800 px | Aim for well under 200 KB; many clients block large images anyway. |
| Social share image | 1200 × 630 px | A common landscape ratio that most platforms crop predictably. |
You do not need to calculate this perfectly. If the original is 6000 pixels wide and the largest it will ever be displayed is around 1600, there is no visual benefit to keeping the extra pixels. Reducing the long side is the single biggest saving available.
What the quality setting actually changes
For JPEG, the quality value controls how aggressively the encoder throws away detail that the eye is less likely to notice. It is not a percentage of the original quality, and 80 does not mean “80% as good.” It is simply a point on a scale where lower values produce smaller files and more visible artifacts.
- Around 80–85 is a comfortable range for photographs that need to look clean. The difference from the original is usually hard to see at normal viewing size.
- Around 70–78 works well for web images that sit in a layout and are never examined closely. File sizes drop noticeably.
- Below about 60, artifacts become easier to spot: blocky patches in smooth skies, halos around edges, and fuzzy text. For screenshots or graphics with type, avoid going this low.
JPEG compression also compounds. Saving an already-saved JPEG at a lower quality does not reveal the original detail again; it adds a second layer of loss. Start from the best copy you have and export once at the size you need.
PNG is lossless, so a quality slider does not apply. A PNG will generally be larger than a JPEG for photographic content, but it keeps sharp edges and transparency intact. WebP can be used in either lossy or lossless mode; at similar quality, lossy WebP is often smaller than JPEG, though compatibility with older software is slightly narrower.
Choose the format before you fine-tune it
Format choice does more than compression settings. Use JPEG or lossy WebP for photographs, screenshots with photographic content, and any image where continuous tones matter. Use PNG for flat-color graphics, logos, interface screenshots, and anything that needs a transparent background. JPEG has no transparency; when an image with a cut-out background is saved as JPEG, those areas are filled—usually with white.
A common mistake is saving a crisp screenshot of text as JPEG. The compression creates faint halos and smudges around letters, which makes the image feel low quality even at a moderate setting. PNG or WebP will keep the type clean and often produce a smaller file for this kind of content anyway. There is a closer comparison in JPG, PNG, or WebP?
A sensible workflow
- Keep the original. Work from a copy and never overwrite the only version of a photo you care about.
- Resize to the largest size it will be shown. Use twice the layout width if you want high-density screens to stay sharp. Do not crop or stretch just to hit a number; keep the aspect ratio unless the composition needs changing.
- Pick the format based on the content. Photo: JPEG or WebP. Flat graphic or transparency: PNG or WebP.
- Start at quality 80. Compare it with 75 and 85 if you are unsure. Move down only while the image still holds up at the size people will see it.
- Look at it at 100% and at layout size. Zoomed out, almost everything looks fine. Zoomed in, you can spot artifacts around edges and faces. Check both.
With the image compressor, the longest-side cap and quality value are visible together, so you can test a combination and compare the before-and-after size before downloading. The resizer is the better choice when the dimensions need to be exact, including percentage scaling and fixed aspect ratios.
Common mistakes, and what to do instead
Compressing before resizing
Saving a 6000-pixel photo at quality 50 produces a file that is still large, now with visible damage. Resize first, then compress. The same photo at 1600 pixels and quality 80 will usually look better and weigh less.
Chasing the smallest possible file
“Smaller” is not the goal by itself. A product photo that looks muddy at quality 40 may be smaller than one at quality 78, but it also looks worse on the page. Aim for small enough: clear at the size it is shown, without wasting pixels or megabytes.
Converting transparency to JPEG
If a logo has a transparent background, JPEG will fill it with white. On a colored page, that shows up as an obvious box. Keep PNG or WebP, or prepare a version designed for a specific background color.
Re-saving the same JPEG repeatedly
Every lossy save adds artifacts. Batch edits should start from the original file, not from the last exported version. Keep a high-quality master and generate the web version from it.
Forgetting metadata
Photos can carry camera details and location data in their metadata. Re-encoding through a canvas, as Lovely Tools does, produces a fresh image without that attached metadata. This is often good for privacy, but it also means you should keep the original if you need the metadata for archival or professional reasons. Modern browsers apply a photo’s orientation when drawing it, so portrait photos should not arrive sideways.
Where the compression happens
In Lovely Tools, the image is decoded by your browser, drawn to a canvas at the chosen dimensions, and encoded again as a new file. Nothing is uploaded. The original stays untouched, and the compressed copy exists only in the browser tab until you download it.
That also explains the limits. All the work happens in your device’s memory, so extremely large images or large batches can be slow on a phone. The browser’s canvas engine also has a maximum size. If an image is too large, the tool will ask for a smaller dimension rather than quietly producing a degraded result.
Ready to try it? Compress an image or read what running locally actually means.