Compress images for your website

Images are often the heaviest files a page loads, and heavy pages feel slow, especially on phones. The fix is usually simple: stop serving a 4000 px photo in an 800 px slot. Here is a quick routine that does it in your browser, with nothing uploaded.

Open the image compressor

1. Size the image to where it appears

Find the widest the image is ever displayed, such as an 800 px article column or a full-width banner. Set the “Max width/height (px)” box to about that width, or up to double it if you want crisp results on high-density screens. The longest side is scaled down, proportions are kept, and images are never enlarged. Dropping pixels you will never display is the biggest saving you can make.

For example, a phone photo that is 4000 px wide and shown in an 800 px column can be set to 1600 px and still look sharp on a high-density screen, while carrying far fewer pixels than the original. Check your page’s layout or your browser’s inspector if you are unsure how wide a slot really is.

2. Set the quality

For photos in JPG or WebP, start at 75% and compare the before and after sizes. Most photos look nearly the same at 70–80% as at 100%, at a fraction of the size. Lower it a notch at a time; each run starts from your original, so you can try again without losing anything. PNG ignores the slider because it is lossless, so resizing is its only lever.

3. Choose the format

Photos: WebP is usually smaller than JPG at similar quality, and all current major browsers support it. JPG is the safe fallback.
Screenshots, text and logos: PNG keeps edges sharp and handles transparency; WebP also supports transparency.
Hero and banner images: the free plan outputs up to 2000 px on the longest side, which is plenty for most layouts.

Converting between formats and processing unlimited batches are part of Pro ($9 one-time, no subscription). The free plan handles up to 5 images at a time at quality up to 80%.

4. Finish in your page code

Add width and height attributes to each <img> so the layout does not jump while it loads.
Add loading="lazy" to images below the fold, but not to the main image at the top.
Use descriptive file names and alt text.

Then reload the page and look at it on a phone-sized window. If it still feels heavy, the largest remaining images are the ones to shrink further.

Compress your website images