> ## Documentation Index
> Fetch the complete documentation index at: https://help.noxity.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Media optimization

> Lazy-load images and iframes, optimize fonts, add missing image dimensions. The image-side of AccelerateWP's free tier.

Media optimization changes how the browser loads images and fonts. The free tier on Noxity covers lazy loading, font optimization, and image dimensions. (Image conversion to WebP and image minification are premium-only and not included.)

## Lazy load images

Toggle: **LazyLoad images**.

When on, the browser only loads images that are visible in the viewport. Images further down the page wait until the user scrolls toward them. Major win on long pages with many images (galleries, blog archives, product listings).

| Sub-toggle                                     | What it does                                                                                                                                    |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **LazyLoad iframes and videos**                | Same idea for `<iframe>` and `<video>` tags. YouTube and Vimeo embeds get their thumbnail right away but only load the player iframe on scroll. |
| **Replace YouTube videos with preview images** | Stronger version: even the iframe waits until click. The thumbnail is shown statically. Largest perf win for sites with many video embeds.      |

### What lazy load doesn't catch

LazyLoad hooks into `<img>` and `<iframe>` tags in the HTML. It misses:

* Images set via CSS (`background-image: url(...)`).
* Images injected by JavaScript after page load.
* Images inside `<style>` tags with embedded data URIs.
* Page builder content (Elementor and friends) that renders via shortcodes.

For those cases the optimization quietly does nothing. Real-image lazy loading should be added in the theme/plugin layer.

## Font optimization

Toggle: **Reduce font-related layout shifts**.

Web fonts are a common source of CLS (Cumulative Layout Shift, a Core Web Vitals metric). When the page renders with the fallback font, then re-renders when the web font loads, every text element shifts. Browsers grade you on this.

When enabled, AccelerateWP injects `@font-face` rules with CSS metric overrides that match the web font's metrics to the fallback. The fallback renders with the web font's spacing, so when the swap happens, nothing visibly moves.

Default: **on**. There's no real downside to leaving it on.

Supports:

* Google Fonts URL imports.
* `@font-face` declarations in your stylesheets.
* `font-family` declarations that resolve to web fonts.

## Image dimensions

Toggle: **Add Missing Image Dimensions**.

When an `<img>` tag is missing the `width` and `height` attributes, the browser doesn't know how much space to reserve until the image loads. The page reflows when it does, causing layout shift.

When on, AccelerateWP scans HTML output, fetches image metadata server-side, and injects `width` and `height` attributes into `<img>` tags that are missing them.

What it doesn't touch:

* Images that already have `width` and `height` set (no need).
* `<picture>` tags.
* SVGs (intrinsic dimensions come from the SVG).
* External images (anything not on your domain; AccelerateWP can't fetch the metadata reliably).

This one's almost always safe to enable. The PageSpeed boost on image-heavy pages is solid.

## Common issues

<AccordionGroup>
  <Accordion title="Images don't load at all on some pages">
    Likely lazy load is hiding them behind a JavaScript trigger that isn't firing. Check the browser console for JS errors. If a deferred or delayed script is breaking, [File optimization](/web-hosting/cpanel/software/accelerate-wp/file-optimization) → **Excluded JavaScript Files** can let it run normally.
  </Accordion>

  <Accordion title="A specific image needs to load immediately (above the fold, hero)">
    Lazy load every image including the hero hurts LCP, the Largest Contentful Paint metric. Add a `class="no-lazy"` attribute to the `<img>` tag in the theme. AccelerateWP recognizes that class as an opt-out.
  </Accordion>

  <Accordion title="Page builder images (Elementor, Divi) aren't being lazy-loaded">
    Elementor and Divi render images via background-image CSS or via JS hydration. AccelerateWP's lazy load only catches `<img>` tags in the HTML. Use the page builder's own lazy-load setting alongside AccelerateWP's.
  </Accordion>

  <Accordion title="Font optimization made my fonts look subtly off">
    The fallback font's metrics don't match closely enough to the web font for a clean handoff. Disable **Reduce font-related layout shifts** and accept the small CLS hit, or pick a fallback font with closer metrics in your CSS.
  </Accordion>

  <Accordion title="Image dimensions are sometimes wrong (stretched)">
    AccelerateWP fetched stale dimensions for an image that was later resized in WordPress. Re-upload the image, or clear the AccelerateWP cache after re-saving the image in WordPress.
  </Accordion>
</AccordionGroup>

## Need a hand?

<CardGroup cols={2}>
  <Card title="Open a ticket" icon="life-ring" href="https://members.noxity.io/submitticket.php">
    Best for anything that needs an account check or a config change on our end.
  </Card>

  <Card title="Live chat" icon="messages" href="https://noxity.io/contact">
    Faster for quick questions during business hours.
  </Card>
</CardGroup>