How to Compress Images for a Faster Website

By Thiago · Updated September 25, 2026 · 3 min read

On most websites, images make up the largest share of what visitors download. Heavy images mean slow pages, and slow pages lose visitors and rank worse on Google. Fortunately, image weight is also the easiest thing to fix.

Why image size matters

• Visitors leave slow pages, especially on phones with mobile data.
• Google measures page experience. Core Web Vitals include "Largest Contentful Paint", how long it takes for the main content (very often an image) to appear.
• Hosting and bandwidth costs grow with every megabyte you serve.

Step 1: use the right dimensions

This is the most overlooked step and often the one that saves the most. A photo straight from a phone might be 4000 pixels wide, but the column on your blog might be 800 pixels wide. The browser downloads all 4000 pixels and then throws most of them away.

As a rule of thumb, export images at about twice the width they are displayed at, so they look sharp on high-resolution screens. For a full-width hero image that's usually around 2000–2400 pixels. For an image in an article column, 1200–1600 pixels. For thumbnails, just a few hundred pixels. Use our Resize image tool (or any photo editor) before compressing.

Step 2: use the right format

Every current browser supports WEBP, so for a website it's usually the best default. Use JPG to WEBP and PNG to WEBP. For more detail, see WEBP vs PNG vs JPG.

Step 3: compress

Compression removes data you won't miss. The image compressor keeps each image in its original format and resolution and applies stronger, smarter settings:

• JPG: re-encoded with MozJPEG at quality 72, an encoder built specifically to make smaller JPGs at the same visual quality.
• PNG: reduced to an optimized palette of up to 256 colors (the technique used by tools like pngquant) with maximum compression. Screenshots and graphics often shrink dramatically.
• WEBP: re-encoded at quality 70, and animated WEBPs keep their animation.
• No surprises: if an image is already well optimized and the result wouldn't be smaller, you get the original back.

The image also gets rotated the way it appears on your phone, and the result is the same format you uploaded, so you can drop it straight into your site.

Checking the result

Always compare before and after at the size the image is actually displayed. Look at areas with fine detail (hair, text, leaves) and smooth gradients (skies). If you see blockiness or banding, use a lighter setting or the original for that specific image. Heavy compression is almost never noticeable on thumbnails and background images, so be more aggressive there.

Beyond compression

• Lazy loading: add loading="lazy" to images below the fold so they load only when the visitor scrolls to them.
• Width and height attributes: set them on every image so the page doesn't jump around while loading.
• Descriptive alt text: it helps visitors who use screen readers and helps search engines understand the image.
• Descriptive file names: "red-running-shoes.webp" says more than "IMG_4821.webp".