Images & page speed
Why images are the most common cause of slow websites, how to optimize them, and what to do before uploading photos to your site.
Images are beautiful — and often the main reason a website loads slowly. A single unoptimized photo can be ten times larger than it needs to be. The good news: image optimization is one of the easiest speed improvements you can make.
Quick summary
Resize images to the dimensions they will actually display at, compress them before uploading, and use modern formats like WebP. Doing these three things can dramatically speed up most sites.
Why images cause speed problems
A photo from your phone or camera is typically 3,000–6,000 pixels wide and 3–15 MB in file size. Your website might display that image at 800 pixels wide — but if you upload the original, visitors still have to download the entire large file.
This is the core of the image speed problem:
- The file is too large (too many bytes to download)
- The dimensions are too big (more pixels than the browser needs to show)
- The format is outdated (JPEG and PNG are larger than modern alternatives)
Fix those three things, and images stop being a speed problem.
Step 1: Resize before uploading
Resize your image to roughly the maximum width it will appear on your site. Common sizes:
- Full-width banner or hero image: 1,600–2,000 pixels wide
- Half-width image or sidebar: 800–1,000 pixels wide
- Blog post thumbnail: 600–800 pixels wide
- Team member photo: 400–600 pixels wide
You do not need to be precise. The goal is to avoid uploading a 5,000-pixel image when it will display at 600 pixels.
Tools you can use to resize: the Preview app on a Mac, Microsoft Paint or Photos on Windows, or a free web tool like Squoosh.
Step 2: Compress the image
Compression reduces file size without noticeably reducing quality. A well-compressed image at the right dimensions should be:
- Photos (JPEG/WebP): under 200 KB for most uses
- Illustrations or logos (PNG/SVG): varies, but aim for under 100 KB
Step 3: Use the right format
| Format | Best for | Notes |
|---|---|---|
| WebP | Photos and most web images | Modern, excellent compression, widely supported |
| JPEG | Photos (if WebP is not available) | Good for photographs, not for logos |
| PNG | Images with transparency | Larger file size than WebP; use only when needed |
| SVG | Logos, icons, simple graphics | Scales to any size with no quality loss |
| GIF | Avoid for most uses | Very large; use video format instead |
WebP is now supported by all major browsers. If you can use it, do — it is typically 25–35% smaller than an equivalent JPEG.
What WordPress does automatically
If your site runs WordPress with a modern theme and an image optimization plugin (like Smush, Imagify, or ShortPixel), some of this may happen automatically after you upload. These plugins can:
- Convert images to WebP automatically
- Compress uploaded images
- Serve different image sizes to different devices
However, they work best when you upload reasonably-sized images to begin with. They cannot work miracles with a 20 MB raw photo.
Lazy loading
"Lazy loading" means images are not downloaded until the visitor scrolls close to them. Images below the fold (the part of the page you cannot see without scrolling) do not need to load right away.
Modern browsers and WordPress handle lazy loading automatically for most images. You generally do not need to do anything — but it is worth knowing this is happening behind the scenes.
The tradeoff: quality vs. speed
Aggressive compression reduces file size but can reduce visible quality. Find the balance that looks good to you. Most visitors will not notice moderate compression — but they will notice a page that takes five seconds to load.
We recommend compressing to the point where the image still looks clean and sharp on a desktop screen, then accepting that file size.
Common questions
Related guides
- What slows websites down
- Image basics for your website
- Image formats explained
- How to compress images
- Image sizes for the web
Need a hand?