# How to optimize images and video

> Media is usually the heaviest thing on a page. This panel controls when it loads, how large the files are, and which images matter most.

- Category: Optimization
- Canonical: https://xspeedcache.com/docs/media-optimization/

---

On most pages, images and video account for more bytes than everything else combined. There are two separate ways to fix that: **send fewer of them up front**, and **make each one smaller**. The Media Optimization panel does both, plus a Pro tool that tells you which images are worth your attention.

> **Where to find it**
>
> 1. In your WordPress admin, click **xSpeed Cache** in the left menu.
> 2. In the xSpeed Cache sidebar, open the **Optimization** group.
> 3. Click the **Media Optimization** card.
>
> *Shortcut: open `wp-admin/admin.php?page=xspeed#/performance/lazy` directly.*
>
> ✅ This panel is part of **xSpeed Cache (Free)**. Two of its tabs are ⭐ Pro.

![The Media Optimization panel and its three tabs](https://xspeedcache.com/_astro/media-optimization-tabs.DHKAnrwb.png)

---

## Tabs on this panel

| Tab | Feature | Tier | Guide |
| --- | --- | --- | --- |
| **Lazy Loading** | Defer offscreen media until it's needed | Free | [How to lazy-load images and video](https://xspeedcache.com/docs/lazy-loading/) |
| **Image Optimization** | Compress and convert your media files | ⭐ Pro | [How to convert images to WebP](https://xspeedcache.com/docs/image-optimization/) |
| **Smart Image** | AI suggestions for the images that matter | ⭐ Pro | [How to get AI image suggestions](https://xspeedcache.com/docs/smart-image/) |

Each tab has its own address, so you can link straight to one:

| Tab | URL |
| --- | --- |
| Lazy Loading | `#/performance/lazy` |
| Image Optimization | `#/performance/lazy/images` |
| Smart Image | `#/performance/lazy/smart` |

---

## Which one should you use?

These solve different halves of the same problem, and the order matters.

| | [Lazy Loading](https://xspeedcache.com/docs/lazy-loading/) | [Image Optimization](https://xspeedcache.com/docs/image-optimization/) | [Smart Image](https://xspeedcache.com/docs/smart-image/) |
| --- | --- | --- | --- |
| **What it changes** | *When* media loads | *How big* each file is | *What you should fix* |
| **Effect** | Fewer requests up front | Fewer bytes per request | Guidance, not a change |
| **Effort** | Mostly on by default | Runs in the background | Read and act |
| **Tier** | Free | ⭐ Pro | ⭐ Pro |

**[Lazy Loading](https://xspeedcache.com/docs/lazy-loading/) is already doing most of the work** — its main toggles ship on. It's the one tab here that's useful without any configuration.

**[Image Optimization](https://xspeedcache.com/docs/image-optimization/)** compounds with it: lazy loading means fewer images load, compression means each one is smaller. Neither replaces the other.

**[Smart Image](https://xspeedcache.com/docs/smart-image/)** doesn't change anything by itself — it analyses your media library and tells you which images are actually costing you.

> 💡 **Lazy loading and compression are complementary, not alternatives.** Deferring a 2 MB hero image still means the visitor eventually downloads 2 MB. Compressing it without deferring means they download it immediately, just smaller. Do both.

---

## Related

- [How to preload your hero image](https://xspeedcache.com/docs/hints/)
- [How to run a speed test](https://xspeedcache.com/docs/external-score/)
- [How to serve assets from a CDN](https://xspeedcache.com/docs/cdn/)