BytCrush

WebP and AVIF delivery

BytCrush creates WebP and AVIF copies next to each file, with the extra extension added to the full file name:

wp-content/uploads/2026/04/photo.jpg          ← the optimized original, same URL as before
wp-content/uploads/2026/04/photo.jpg.webp
wp-content/uploads/2026/04/photo.jpg.avif
wp-content/uploads/2026/04/photo-300x200.jpg.webp

A copy is only kept when it's smaller than what would be served without it, so some sizes may have no copy. The original file always stays in place and keeps its URL, so browsers that support neither format still get a working image.

How the copies reach visitors is set under BytCrush → Settings → Next-gen formats → Delivery method.

Method How it works Use it when
Picture tags (default) Rewrites the page HTML: each <img> with a copy is wrapped in a <picture> element. Almost always. Works on every server, including Nginx, and with CDNs and page caches.
Server rewrite Adds rules to wp-content/uploads/.htaccess. A request for photo.jpg is answered with photo.jpg.avif or photo.jpg.webp when the browser accepts it. Apache or LiteSpeed servers, when images are also used as CSS backgrounds or written by scripts the picture tags can't see.
Off Copies are created but BytCrush doesn't serve them. Something else serves them, such as your own server rules or a CDN.

Picture tags

On every front-end page, BytCrush looks at each <img> tag. If the image is in your uploads folder and has a WebP or AVIF copy, the tag is wrapped like this:

<picture>
  <source type="image/avif" srcset="photo.jpg.avif 1200w, photo-600x400.jpg.avif 600w" sizes="…">
  <source type="image/webp" srcset="photo.jpg.webp 1200w, photo-600x400.jpg.webp 600w" sizes="…">
  <img src="photo.jpg" srcset="…" sizes="…" alt="…">
</picture>
  • The browser picks the first format it supports. AVIF is listed first when Create AVIF versions is on.
  • The original <img> stays exactly as it was, as the fallback.
  • Every width in the image's srcset is kept. If one size has no copy in a format, the other format's copy or the original is listed for that width instead.
  • It covers images in post content, featured images, widgets and page builders alike, because it works on the finished page HTML.
  • Images from lazy-load plugins that move the real address into data-src, data-lazy-src or data-original (with data-srcset or data-lazy-srcset) are handled too. The <picture> is built from the real image and gets loading="lazy" so it still loads late.

Left as they are:

  • images whose address isn't in your uploads folder, for example theme files or images on another domain;
  • <img> tags already inside a <picture>, <noscript>, <script>, <style> or <textarea>, or inside an HTML comment;
  • images with no copy yet;
  • CSS background images, since only <img> tags are processed;
  • feeds, embeds, AMP pages, the Customizer preview and wp-admin.

Excluding an image

Add either of these to the <img> tag:

  • the class no-bytcrush: <img class="hero no-bytcrush" src="…">
  • the attribute data-bytcrush-skip: <img data-bytcrush-skip src="…">

The image is then served in its original format only. It is still compressed in place; this only affects delivery.

Page caches

The <picture> markup is added when WordPress builds the page, so cached pages keep their old markup until the cache is cleared. Clear your page cache after the first bulk run, and after changing the delivery method.

Server rewrite

When you save with Server rewrite selected, BytCrush writes a block marked BytCrush Next-Gen Images into wp-content/uploads/.htaccess. For each format, best first, the rules:

  1. check that the browser's Accept header includes image/avif (or image/webp);
  2. check that the copy exists on disk;
  3. answer the request with the copy, with the right content type.

WebP is served for .jpg, .jpeg, .png and .gif requests; AVIF also for .webp requests. The rules also add a Vary: Accept header to these responses, so caches know the answer depends on the browser. They keep your main .htaccess rewrite rules (such as hotlink protection) working for the uploads folder.

Page HTML doesn't change at all, so this also covers CSS backgrounds and images added by JavaScript.

Requirements:

  • Apache or LiteSpeed. The option says Apache/LiteSpeed detected when BytCrush recognises your server, otherwise Needs Apache or LiteSpeed.
  • A writable uploads folder.

If either is missing, the Settings screen shows a warning after saving. The rules are removed again when you switch to another method, deactivate the plugin or uninstall it.

Nginx

Nginx ignores .htaccess files, so Server rewrite has no effect there. Use Picture tags, which works on Nginx without any server changes.

If you prefer to write your own Nginx rules, choose Off and serve the copies from the file names shown at the top of this page (<original file name>.webp and <original file name>.avif).

CDNs

  • Picture tags only wrap images whose address, at the moment BytCrush processes the page, points to your site's uploads folder (full, protocol-relative or root-relative URLs). If a plugin has already rewritten the addresses to a CDN domain by then, those images aren't wrapped. The copies themselves are ordinary files next to the originals, so a CDN that mirrors your uploads folder serves them like any other image.
  • With Server rewrite, the same image address can return different formats. Your CDN must respect the Vary: Accept header the rules send, or it may cache one format and serve it to every browser.
  • If your CDN converts images to WebP or AVIF itself, choose Off, or turn the formats off under Next-gen formats.