How to Compress Images for Website Speed — Complete Guide

How to Compress Images for Website Speed (The Right Way)

Kinsutools

June 2, 2026 7 min read

Uncompressed images are the #1 cause of slow websites. Learn the right settings, formats, and workflow to compress images without hurting quality.

Why Image Size Directly Affects Your Rankings

Google uses page speed as a ranking factor. Studies consistently show that images account for 50–90% of a webpage's total size. A page that loads in 1 second converts 3× better than one that takes 5 seconds.

The fix is simple: compress and optimize every image before uploading.

The Ideal Image Size for Websites

Image Type	Target File Size	Max Dimensions
Hero / banner image	Under 300KB	1920px wide
Blog featured image	Under 150KB	1200px wide
Product image	Under 100KB	800px wide
Thumbnail	Under 30KB	400px wide
Logo / icon	Under 10KB	As needed

Step 1: Choose the Right Format

JPG — Best for photographs. Small files, universal support. Can't do transparency.

PNG — Best for logos, screenshots, and anything with text or transparency. Larger files than JPG.

WebP — Best for web. 25–35% smaller than JPG at the same quality. Supported by all modern browsers. Use this whenever possible.

Rule of thumb: Photos → WebP (or JPG). Logos/UI elements → PNG or WebP with transparency.

Step 2: Resize Before Compressing

Don't upload a 4000×3000px photo if it's displayed at 800×600px. Resize first — this alone can reduce file size by 70–80%.

For responsive sites, target the largest size the image will be displayed at, then let CSS scale it down for smaller screens.

Try: Resize Image free →

Step 3: Compress at the Right Quality

For web images, 70–80% quality is the sweet spot — significant size reduction with no visible difference.

Use Case	Quality Setting
General web images	70–75%
Hero images (viewed large)	75–80%
Thumbnails	65–70%
Print output	85–95%

Try: Compress Image free →

Step 4: Convert to WebP

After compressing, convert to WebP for the smallest final file size. WebP is now supported by Chrome, Firefox, Safari, and Edge — covering 95%+ of users.

Try: Convert to WebP free →

A Simple Workflow for Every Image

Resize to the display dimensions
Compress at 75% quality
Convert to WebP
Check the final file size — aim for the targets in the table above

Following this workflow consistently will cut your average page weight by 60–80%.

Tools That Don't Require Software

All of the steps above can be done in your browser for free — no Photoshop, no plugins, no subscriptions.

Start compressing images →