Resizing and compressing images for the web

Images are usually the heaviest part of a web page, an email, or a form upload. A single photo from a modern phone can be 3–5 MB and 12 megapixels or more, while the space it fills on a page might be 800 pixels wide. Sending the full file wastes bandwidth, slows pages, and fails upload limits. This guide covers a simple routine that cuts image sizes by 90% or more without visible loss.

Step 1: resize to the size you need

Pixel dimensions matter more than anything else. A 4000 × 3000 photo has 12 million pixels. At 1600 × 1200 it has 1.9 million, 84% fewer, before any compression. Resize first with resize image, keeping the aspect ratio so the image is not distorted:

• Full-width images on a website: 1600–2000 px wide covers most layouts, including high-density (Retina) screens.
• Images inside an article column: 1200–1600 px wide.
• Email newsletters: around 1200 px wide at most.
• Thumbnails and avatars: 300–600 px.
• Open Graph share images: 1200 × 630 px.

High-density screens show images at two or three device pixels per CSS pixel, which is why a 800px-wide slot benefits from a 1600px image. Going beyond twice the display size rarely adds visible detail.

Step 2: choose the right format

• Photos: WebP or JPEG. WebP is typically 25–35% smaller at the same visual quality and is supported by every current browser. Keep JPEG for email and older software.
• Screenshots, logos, diagrams: PNG, or WebP in lossless mode. JPEG blurs sharp edges and text.
• Transparency: PNG or WebP. JPEG cannot store it.

The image format guide explains the trade-offs in detail.

Step 3: compress at a sensible quality

Lossy formats let you trade quality for size. For photos, quality 75–85 is usually indistinguishable from the original at normal viewing size. Below about 60, artifacts start to show in smooth areas such as skies and skin. With compress image you choose the format and quality and see the real before-and-after sizes. If the result is larger than the original, which happens when a JPEG was already heavily compressed, keep the original.

Avoid repeated lossy saves. Every JPEG save loses a little more detail, so keep an original master and export from it each time.

Step 4: fix orientation and strip metadata

Phones store orientation as an EXIF tag instead of rotating the pixels. Most software respects the tag, but some upload forms and older viewers do not, and photos appear sideways. The image tools here apply the EXIF orientation when they re-encode, so the output is upright everywhere. If a photo was taken sideways in the first place, rotate image turns it by a quarter turn. Re-encoding also drops EXIF metadata, including GPS location, which is a privacy win for photos you publish. See the photo metadata guide.

A worked example

A 4.2 MB, 4032 × 3024 phone photo for a blog post:

1. Resize to fit 1600 × 1600 with the aspect ratio kept: 1600 × 1200.
2. Convert to WebP at quality 80.
3. The result is typically in the region of 150–300 KB, depending on detail. That is a reduction of over 90%, and it looks the same in the page.

The exact size depends on the content. Busy scenes such as foliage and gravel compress less than skies and studio shots. Always check the actual output size shown by the tool.

Why it matters for websites

Large images slow down Largest Contentful Paint (LCP), one of Google’s Core Web Vitals, which affects both user experience and search visibility. On mobile connections, a page with 5 MB of images can take several seconds longer to become usable. Beyond compression, add width and height attributes to prevent layout shift, use loading="lazy" for images below the fold, and consider srcset to serve smaller files to smaller screens.

All image tools on this site run in your browser, so private photos are never uploaded. Very large images, over 24 megapixels, exceed the browser limits the tools use to stay responsive.