High-resolution images are the primary cause of slow websites. A raw photo from a smartphone or stock site can be 5MB – 10MB in size. For the web, you need that same image to be under 100KB – 200KB.

To achieve this 95% reduction without making the image look “pixelated” or blurry, you must use Lossy Compression.

1. Resize the Dimensions First

The most common mistake is uploading an image that is physically too large in dimensions (pixels).

• A standard website content area is rarely wider than 1200px. If you upload a photo that is 4000px wide, the browser has to download the huge file and then shrink it down visually. This wastes data.
• Resize the image to the maximum width it will ever be displayed (e.g., 1920px for a full-screen hero banner, or 800px for a blog post image) before you compress it.

2. Choose the Right Format

Different file types handle compression differently.

• JPEG (or JPG): Best for photographs with many colours. It compresses well but loses sharpness on text.
• PNG: Best for logos, icons, or images with transparent backgrounds. It is “lossless” (perfect quality) but produces much larger file sizes for photos.
• WebP: The modern standard. It supports both transparency (like PNG) and high compression (like JPEG) but is typically 25–35% smaller than both.

3. Use “Lossy” Compression Tools

“Lossy” compression works by removing data from the image that the human eye cannot perceive (like slight variations in colour tone).

Recommended Tools:

• Squoosh.app (Free / Manual): Built by Google. It allows you to drag and drop an image and use a slider to reduce quality until you see the artifacting, then back off slightly. It is the best way to get the absolute smallest file size manually.
• TinyPNG / TinyJPG (Batch): Excellent for dragging and dropping 20 images at once. It uses smart lossy compression to reduce file size by ~70% automatically.
• WordPress Plugins: If you are on WordPress, use Smush or ShortPixel. These compress images automatically as you upload them to the media library.

4. Adjust the “Quality” Slider

If you are exporting from software like Photoshop or Lightroom, you will see a “Quality” slider (0 – 100).

• The Sweet Spot: You rarely need 100% quality. Dropping the quality to 80% or 85% often reduces the file size by half with zero visible difference to the naked eye.
• The Limit: Below 70%, you will start to see “artifacts” (blocky noise) in the sky or smooth gradients.

The Human Eye vs. The File Size

It is important to trust the algorithms over your anxiety about “quality.”

“Lossy compression… can reduce file size by a significant amount. Because the human eye is not sensitive to small changes in color information, we can discard some of this data without the user noticing.”

You are not printing these images for a gallery; you are displaying them on a screen. Speed is a “feature” of the image just as much as its resolution is.