Large images make web pages slow, fill up inboxes and get rejected by upload forms. Most photos can be made much smaller with little visible difference, as long as you do things in the right order. This guide explains how.
Why image files get so big
An image's file size depends mainly on two things: how many pixels it has, and how those pixels are stored. A modern phone photo is often 4000 × 3000 pixels or more, which is 12 million pixels. That's far more than most screens can show at once, so much of that data is never seen. How the pixels are stored (the file format and its compression settings) then decides how many bytes each one takes up.
That gives you two levers: use fewer pixels, and store them more efficiently. Start with the first.
Step 1: Resize before you compress
Making an image narrower usually saves more space than any quality setting. If an image will be shown 1,200 pixels wide on a website, a 4,000-pixel-wide original is mostly wasted data.
File size is closely tied to the number of pixels, and the pixel count shrinks faster than the width. Halve the width and the height follows, leaving about a quarter of the pixels. Going from 4000 × 3000 to 1920 × 1440 removes roughly 77% of the pixels.
Some sensible starting widths:
- Full-width website banners: around 1,920 px
- Images inside an article or blog post: 1,000–1,400 px
- Photos to email or message: 1,280–1,600 px is usually plenty for viewing on screens
- Profile pictures and thumbnails: often 400–800 px
These are starting points, not rules. Check how large the image will actually appear. Many phones and laptops have high-density screens, so for sharp results you may want up to twice the displayed width.
Step 2: Choose the right format
The format matters as much as the settings:
- Photos: JPG or WebP. Both are designed to compress photographic detail efficiently.
- Screenshots, logos and graphics with text: PNG, or WebP at high quality. These keep sharp edges crisp.
- Anything with a transparent background: PNG or WebP. JPG can't store transparency.
Saving a photo as PNG is a common cause of oversized files: PNG keeps every pixel exactly, so photos often end up much larger than they need to be. Our guide JPG vs PNG vs WebP explains the differences in more detail.
Step 3: Pick a quality setting
For JPG and WebP, the quality setting controls how much fine detail is thrown away. There's no single right number, because it depends on the image. A practical approach:
- Start at around 75–80%.
- Compare the result with the original.
- Lower the quality in steps until you start to notice a difference, then go back up a little.
When comparing, look for:
- Smearing in fine textures such as hair, grass or fabric
- Blocky squares in smooth areas such as skies or walls
- Banding: smooth gradients turning into visible stripes
- Fuzzy halos around text and sharp edges
Busy, detailed images usually need a higher quality setting than simple ones. Images that will be shown small can usually go lower, because the flaws are harder to see.
Step 4: Check the result
- View it at full size. Problems that are invisible in a small preview can be obvious at 100% zoom.
- Check it where it will be used, for example on a phone if most of your visitors use phones.
- Compare the file sizes. If the new file isn't meaningfully smaller, keep the original.
Mistakes to avoid
- Compressing the same JPG again and again. Each time a lossy format is saved, a little more detail can be lost. Always compress from your original.
- Throwing away the original. Keep a full-quality copy for printing or editing later.
- Expecting every image to shrink. Photos that were already compressed, for example by a phone or a social network, may barely get smaller, and can even get larger. A good tool tells you the real result.
- Compressing images meant for print. Printing needs far more pixels than screens do. Ask your printer what they need instead.
How to compress an image with QuickKit Tools
- Open the Image Compressor and choose your image (JPG, PNG or WebP).
- If the image is wider than you need, choose a smaller maximum width.
- Adjust the quality slider and compare the two previews.
- Check the Saved figure. If the file didn't get smaller, try a lower quality or the WebP format.
- Download the result. Your original file isn't changed.
Quick checklist
- Resize to the largest size the image will actually be shown at.
- Use JPG or WebP for photos, and PNG or WebP for graphics and transparency.
- Start at 75–80% quality and adjust by eye.
- Check the result at full size before you share it.
- Keep your original.