Open almost any slow website and look at its images: a 5 MB photo straight from a phone, displayed in a box 400 pixels wide. The browser downloads every one of those unused pixels. Fixing images is usually the single biggest, easiest speed improvement a website can make — and it rarely requires any change a visitor would notice.
Why It Matters
- Speed — images typically make up the largest share of a page's weight.
- Mobile visitors — many users browse on mobile data, where every megabyte costs time and money.
- Bounce rates — people leave slow pages before they finish loading.
- Search visibility — page experience is one of the signals search engines consider, and speed is part of it.
Step 1: Resize to the Size You Actually Display
This is the step people skip, and it saves the most. If your blog's content column is 800 pixels wide, there's no reason to upload a 4000-pixel photo.
| Image use | Typical width |
|---|---|
| Full-width hero/banner | 1600–2000 px |
| Blog content image | 800–1200 px |
| Product photo | 800–1200 px (larger if zoom is needed) |
| Thumbnail | 300–400 px |
Resize first, then compress. The Image Editor covers basic edits, and the Aspect Ratio Calculator helps keep proportions right.
Step 2: Choose the Right Format
- Photos: WebP, or JPG if your platform doesn't support WebP.
- Logos and icons: SVG if available, otherwise PNG or WebP.
- Screenshots with text: PNG or lossless WebP.
For more detail, see JPG vs PNG vs WebP.
Step 3: Compress
Run each image through Image Compress. For photos, a moderate lossy setting usually cuts the size dramatically with no visible difference. Always compare at 100% zoom before publishing important images. The trade-offs are explained in lossy vs lossless image compression.
Step 4: Name and Describe Images Properly
- File names: use descriptive words, like
compress-pdf-steps.jpg, notIMG_20260814.jpg. - Alt text: describe the image in a short sentence. It helps visually impaired visitors and search engines.
- Captions where they add information for readers.
Step 5: Load Images Smartly
If you manage your site's code or use a modern CMS:
- Lazy loading — add
loading="lazy"to images below the first screen. - Width and height attributes — reserve space so the page doesn't jump while images load.
- Responsive images — serve smaller versions to phones where your platform supports it.
- Caching — make sure your server tells browsers to keep images for a while.
A Quick Before-and-After Checklist
| Check | Before | After |
|---|---|---|
| Largest image on page | Several MB | A few hundred KB or less |
| Dimensions | Straight from the camera | Matched to display size |
| Format | PNG photos | WebP/JPG photos, PNG only for graphics |
| File names | IMG_1234.jpg | descriptive-name.jpg |
| Alt text | Missing | Short, accurate description |
Test the Result
After optimising, check the page on your phone over mobile data. If it still feels slow, the problem may be elsewhere — scripts, fonts or hosting. For a broader look at a page's on-page health, run it through our SEO Checker, and for the basics of how search engines see your pages, read what is technical SEO.
