How to Compress Images for a Faster Website (Without Visible Loss)

On most web pages, images are the heaviest part of what a visitor downloads. Oversized pictures make pages slow, especially on phones, and slow pages lose visitors and search rankings. The good news is that images are also the easiest thing to fix. This guide gives a step-by-step process that reduces image weight dramatically without visible quality loss.

Why image size matters

Page speed influences user experience and is part of how search engines judge pages. One of Google's Core Web Vitals, Largest Contentful Paint, measures how quickly the main content appears, and on many pages that main content is an image. A hero photo of 4 MB on a mobile connection can delay the whole page by seconds. Saving data also helps visitors on limited plans.

Step 1: Use the right dimensions

The biggest saving comes from dimensions, not quality settings. A camera photo may be 4,000 by 3,000 pixels, which is 12 million pixels. If it appears on your page 800 pixels wide, you need about 1,600 pixels for sharp display on high-resolution screens, which is only 1.9 million pixels for a 4:3 picture, about 16 percent of the original. Resize before you compress with the Image Resizer and crop away unneeded areas with the Image Cropper.

Typical target widths:

• Full-width hero or banner: 1,600 to 2,000 pixels
• Article body image: 1,200 to 1,600 pixels
• Thumbnails and cards: 400 to 800 pixels
• Icons and avatars: 64 to 400 pixels

Step 2: Choose the right format

Photographs belong in JPG or WebP; graphics with flat colours and sharp text belong in PNG or WebP; logos should be SVG when possible. WebP is typically 25 to 35 percent smaller than JPG at similar quality and is supported by all current browsers. Read JPG vs PNG vs WebP for detail on each.

Step 3: Compress at a sensible quality

For JPG and WebP, a quality setting of 75 to 85 percent gives large savings with little visible change. Compare the compressed picture with the original at normal viewing size; if you cannot see the difference, you have not gone too far. Detailed images with fine textures or gradients may need a higher setting than simple ones. The Image Compressor shows the exact size saved for each file and handles up to 30 at once.

Step 4: Serve the size the screen needs

A phone does not need the desktop image. Responsive images let the browser choose from several sizes using the srcset and sizes attributes, so a phone downloads a 600-pixel version while a large monitor downloads a 1,600-pixel one. Many content management systems and frameworks do this for you. If you build your own pages, create two or three versions per image.

Step 5: Load lazily and avoid layout jumps

Images below the fold do not need to load at once. Adding loading="lazy" to img tags delays them until the visitor scrolls near them, which speeds up the first view. Do not lazy-load the main image at the top of the page, since that delays the most important content. Always set width and height attributes, or reserve space with CSS, so the page does not jump as images arrive; this is measured by Cumulative Layout Shift.

Step 6: Check the result

• Test the page with a speed tool such as Lighthouse or PageSpeed Insights, and note the image warnings.
• Look at the network panel of your browser's developer tools and sort by size to find the heaviest files.
• View the page on a real phone, on a mobile connection if possible.
• Zoom in on the important images to make sure they are still sharp.

Common mistakes

• Uploading full camera files straight to the website.
• Using PNG for photographs.
• Compressing an already compressed image again and again.
• Forgetting alt text, which helps accessibility and search.
• Resizing with CSS only: the browser still downloads the full file.

Other places this helps

The same process helps email newsletters, documents and presentations. When you build a PDF from pictures, compress the pictures first and then use JPG to PDF, or shrink the finished file with Compress PDF. For very small icons, Image to Base64 can embed them directly in your page, but only for tiny files. If your photos come from an iPhone, convert them first with HEIC to JPG.