Compress Images for Faster Websites: A Practical Guide

Images are usually the heaviest thing on a web page. A single 4000 by 3000 pixel photo straight from a phone can weigh several megabytes, which is far more than the 800-pixel-wide slot it fills on screen. Visitors on slow connections wait, search engines notice slow pages, and the page layout jumps around as pictures load in.

Fixing that is not about one magic compressor. It is a short sequence: the right dimensions, the right format, then the right quality. This guide walks through each step using three free browser tools.

Why image weight matters

Two things make images costly. The first is pixels: a file with 12 million pixels takes far more bytes than one with 1 million, however well it is compressed. The second is encoding: the same pixels can be stored in a heavier or lighter way depending on format and quality setting.

For most sites, the largest image above the fold is also the element a browser measures when it reports how fast the main content appeared (the Largest Contentful Paint metric). A smaller hero image directly shortens that time. Images lower on the page matter less if you load them lazily, but they still use data.

The three-step order: resize, convert, compress

Most guides say "compress your images" and stop. The order matters, because each step changes what the next one can achieve.

1. Resize to the displayed size. Reducing a 4000-pixel-wide photo to 1600 pixels removes about 84 percent of the pixels before any quality loss.
2. Choose the format that suits the picture.
3. Compress with a quality setting you have checked by eye.

Step 1: resize to the size you need

Decide how wide the image appears on your page. A blog column is often 700 to 800 pixels wide. A full-width hero on a desktop may be 1600 to 2000 pixels. For sharp display on high-density screens, supply about twice the displayed width, but not much more than that.

1. Open Image Resizer.
2. Choose a JPG or PNG. The tool fills in the original width and height.
3. Leave lock ratio on so the proportions stay correct, then change the width. The height follows.
4. Click resize. The file downloads as name-resized.jpg or .png, matching the input format.

Remember that scaling up does not add detail. Never enlarge a small image to make it "bigger"; it will look soft.

Step 2: pick the right format

• JPEG suits photographs and images with smooth colour gradients. It cannot store transparency.
• PNG suits logos, icons, screenshots and anything with sharp edges or transparency. It tends to be large for photographs.
• WebP is a newer format that supports both lossy and lossless modes and transparency, and is usually smaller than JPEG or PNG at similar visual quality. Support in current mainstream browsers is broad, but check your own audience.

To change format, use Image Format Converter. It converts between PNG, JPEG and WebP and re-encodes at a fixed high quality of 92 percent, so it is better as a format switch than as a size reducer. WebP output depends on your browser's ability to encode it, so open the downloaded file and confirm it really is WebP, and try a different browser if not.

Step 3: compress with a quality you have checked

1. Open Image Compressor.
2. Choose a JPG or PNG.
3. Set the Quality slider. It starts at 70 percent and moves in steps of 5. For photos, somewhere between 65 and 85 is the common sweet spot.
4. Click Compress image. The page shows a before and after size in kilobytes and downloads the result as name-compressed.jpg.
5. Open the output next to the original at the size it will appear. If you cannot see a difference, try a lower setting; if you see blocky edges or smeared detail, go higher.

Important details about this tool: the output is always a JPEG, whatever you put in. A PNG with transparency will lose it, and the transparent area turns into a solid fill. It also compresses at the image's current dimensions, so resize first if you also want fewer pixels. And it handles one image at a time.

Reaching a target such as 100KB

Forms and portals often demand "under 100KB" or "under 50KB". There is no target-size option, so work toward it:

• Resize to a smaller width first (for example 1000 pixels for a photo).
• Compress at 70 percent and read the size.
• If it is still too large, lower the quality in steps of 5 and try again.
• If quality gets ugly before you hit the number, go back and reduce the dimensions more.

Photos with a lot of fine detail, like foliage or crowds, compress less than simple images.

Where current tools fall short

Many popular image compressors upload your pictures to a server. That is a questionable choice for photos of documents, children or ID cards. Free tiers frequently limit the number of files per batch or the maximum file size, and some add a watermark or require an account to download. Others re-encode with settings you cannot see or change, so you cannot tell how much quality you lost.

MergeDoc does all the work on a canvas in your browser tab, so nothing is sent anywhere, and you set the quality yourself. The trade-offs are real: one file at a time, JPG and PNG input only for the compressor and resizer, no batch mode, and no smart target-size search. Re-encoding through a canvas also drops metadata such as camera details and GPS location, which is helpful for privacy but means you should keep an original if you need that information.

Everyday use cases

• Blog hero images. Resize to 1600 pixels wide, compress at 75 percent, and keep it a JPEG.
• Product photos. Resize all to the same width so the grid looks consistent.
• Job portal uploads. Get a passport-style photo under a stated KB limit.
• Email attachments. Shrink a handful of phone photos before sending.
• Favicons and icons. Create the right dimensions with the Favicon Generator rather than shrinking by hand.

A realistic example: a blog hero image

Say you have a phone photo at 4032 by 3024 pixels that weighs about 3 MB, and your article column is 760 pixels wide.

1. Resize it to 1520 pixels wide, twice the column width for sharp display on high-density screens. The pixel count falls by roughly 86 percent.
2. Keep it as JPEG, since it is a photograph with no transparency.
3. Compress at 75 percent and compare against the original at full screen size.

The exact result depends on the photo, which is why the tool shows the before and after sizes instead of promising a number. A photo of a cloudy sky compresses far more than one of a busy market. If the output is still heavier than you want, reduce the width again or lower the quality by 5 points and re-check.

For logos and screenshots the order changes. These have flat colours and sharp edges, where JPEG creates visible fuzz around text. Resize with the Image Resizer, which keeps a PNG as a PNG, and consider converting to WebP with the converter if you do not need the PNG itself.

Last, test the page. Load it on a throttled connection in your browser's developer tools or on your phone with mobile data. The best proof that the images are light enough is that the page feels quick.

Tips and mistakes to avoid

• Resize before you compress. It is the biggest single saving.
• Do not compress twice. Every JPEG re-encode throws away more detail. Compress from the original each time.
• Keep an untouched original. Lossy compression cannot be undone.
• Check on a real device. What looks fine on a laptop may show artefacts on a large display.
• Add width and height attributes in your HTML so the browser reserves the space and the page does not shift while images load, and use loading="lazy" for images below the fold.
• Do not use PNG for photos. The file will be much bigger than a JPEG or WebP.

Related reading

If the same problem affects documents, read how to reduce PDF file size and note that the PDF compressor here only restructures files. For the image quality question in more depth, see resize an image without losing quality. Everything for pictures lives under image tools.