The quick answer: resize, compress, convert, in one run
Pictures are often the heaviest part of a web page, and many carry far more pixels than the page shows. Fix both at once with the image compressor, which handles a whole folder in your browser.
- Drop the folder's pictures on the page.
- Set Largest side to the nearest size on the list that is at or above the biggest size the picture will be shown at, or up to twice that for sharp screens. The list runs from 640 to 4096 pixels and limits the longer side, so for smaller sizes such as a thumbnail, use Resize Image first. For many content images, 1,600 is a good start.
- Leave the level on Balanced. Under Format choose WebP for photos you control, or Same to keep JPG and PNG as they are.
- Compress, open the compare view on the heaviest few, and download the ZIP.
Nothing is uploaded, and your originals are never overwritten: a copy in the same format gets -compressed added to its name, and a copy in a new format gets the new file extension.
Width: export at the size the picture is shown
A phone photo is around 4,000 pixels wide. A column on your page may show it at 800. The browser shrinks it on screen, and the visitor still downloads every pixel. The rule: export at roughly the largest size the picture will be shown, and up to 2x that for sharp, high density screens.
| Shown on the page at | Export at 1x | Export at 2x (sharp screens) |
|---|---|---|
| 300 pixels wide (a thumbnail) | 300 pixels | 600 pixels |
| 800 pixels wide (a content image) | 800 pixels | 1,600 pixels |
| 1,200 pixels wide (a hero) | 1,200 pixels | 2,400 pixels |
Doubling both sides means four times the pixels, so use 2x where sharpness matters, such as a hero or a product photo, and think twice for decoration. Here is the arithmetic for one photo: 4,000 by 3,000 is 12 million pixels, and 1,600 by 1,200 is 1.92 million, about 84 percent fewer before any compression.
Resize Image can set the size in pixels, a percentage or a longest side, and has web presets such as 1920, 1280 and 800. It does not enlarge a small picture unless you turn that on, which is what you want. Pictures stored sideways by a phone are turned the right way up.
Format: which to pick for the web
- Photos: WebP, or JPG when you need it to open everywhere. WebP is usually smaller at a similar look. AVIF can be smaller still, but takes longer to make and is less widely supported.
- Logos, screenshots and anything transparent: PNG, or WebP, which also keeps transparency.
- Fallbacks: current browsers open WebP, but older programs and some upload forms do not. Offer a JPG behind it with the
pictureelement.
JPG to WebP converts a folder at quality 85 by default. In the compressor's tests, WebP came out about 4 to 5 percent smaller than JPG on two large, detailed photos and 20 to 45 percent smaller on small, smooth pictures, so test your own. The full comparison is in JPG vs PNG vs WebP vs AVIF.
Quality settings that are usually safe
One quality number does not suit every picture: a smooth sky can take a low setting while a pile of leaves needs a high one. The compressor measures each picture and keeps the lowest quality that still looks like the original at the level you choose.
| Level | JPG quality it uses | Good for |
|---|---|---|
| High quality | 85 to 95 | Product photos, fine text and thin lines |
| Balanced (default) | 74 to 90, chosen per picture | Most pictures |
| Smallest | 62 to 85 | Backgrounds, thumbnails and decoration |
In the tool's tests, Balanced made camera style JPG photos 40 to 70 percent smaller, PNG photos 60 to 80 percent smaller, and PNG screenshots and logos 50 to 65 percent smaller. Your results depend on the picture. To turn two file sizes into a percentage saved, percentage calculations explained shows the formula. Match the page to the file you have:
- Compress JPG for photos. A JPG saved at a low quality, or one this tool made, comes back unchanged with a note.
- Compress PNG for graphics. It reduces a PNG to at most 256 colors with smooth dithering and keeps transparency. A switch keeps every color exactly instead.
- Compress WebP for WebP files. A WebP exported at quality 90 shrank by 40 to 56 percent in the tool's tests, while one saved at 75 to 80 was not worth saving again.
A rough budget: about 100 KB for a content picture and 300 to 500 KB for a full-width hero. The pages for 100 KB and 500 KB aim to stay under those limits, and reduce a photo to 200 KB or less explains how.
A batch workflow, and file names
For most folders the single run above is best, because every extra step saves a lossy file again. If you need exact pixels, a crop or a padded square, size the pictures first and let the compressor make the final save:
- Open the bulk image resizer, which opens on a longest side of 1600 and keeps every shape. For exact pixels, a crop or a padded square, switch Resize by to Pixels, enter a width and height, and choose Fill and crop or Pad to exact. Results come in one flat ZIP, named like photo-1600x1200.jpg.
- Unzip the result, then drop the resized pictures into the compressor with the level on Balanced.
- Rename the results, then upload.
Use lowercase words joined by hyphens that describe the picture, such as blue-ceramic-mug-800.webp, with no spaces. Search engines can use file names and alt text as a hint about what a picture shows, but alt text is there for readers who cannot see it, so write it for them.
Camera details, the date and the GPS location are removed by default, which saves a few kilobytes and keeps your location off a public page. See remove location data from photos for what that covers.
Before and after: the arithmetic
This is an illustration with round numbers, not a benchmark. A product page has one hero photo and six content photos, straight from a phone, against a budget of 400 KB for the hero and 100 KB for each content picture.
| Item | Before | After |
|---|---|---|
| Hero photo | 3,000 KB | 400 KB |
| Six content photos | 6 x 1,500 KB = 9,000 KB | 6 x 100 KB = 600 KB |
| Page total | 12,000 KB (12 MB) | 1,000 KB (1 MB) |
| Transfer at 10 megabits per second | 96 megabits, 9.6 seconds | 8 megabits, 0.8 seconds |
That is 11,000 KB less, about 92 percent. The transfer row is arithmetic too: a byte is 8 bits, so 12 MB is 96 megabits. Real connections vary and browsers load several files at once, but this is why a heavy page is felt.
What goes wrong, and the fix
- Pictures look soft on a sharp screen. They were exported at 1x. Export the pictures that matter at 2x.
- The page is still slow. One hero can be most of it. Add
loading="lazy"to pictures below the first screen, and keep the hero to a few hundred KB. - A photo is a PNG and huge. Convert it to WebP or JPG. A PNG suits flat graphics, not photos.
- Double compression. Compress from the original, once. Compressing a compressed copy loses detail for little gain.
- A transparent logo got a white box. It went through JPG. Keep it as PNG or WebP.
- A QR code on the page stopped scanning. Lossy compression blurs its squares. Keep it as a PNG or SVG at its full size, as QR codes that keep working explains.