How to Configure Nginx .htaccess for CompressX

Unlike Apache, Nginx does not allow directory-level configuration files (like .htaccess). All rewrite and image delivery rules must be placed in the main server config at the server level.

Step 1: Connect to Your Server

Connect to your server via SSH using an SSH client (e.g., PuTTY, Terminal, etc.). This gives you access to your Nginx configuration files where you will add the necessary rules.

Step 2: Open Your Nginx Site Configuration

Locate and open your domain’s Nginx configuration file. A common location is:
/etc/nginx/sites-available/example.com
Replace example.com with your actual domain name.

Step 3: Add CompressX Rewrite Rules

Within the configuration file, add the following rules inside the server { ... } block, and place them before other location blocks or any includes:

# BEGIN CompressX
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
  set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
  set $ext_webp "";
}

location ~ /wp-content/(?.+)\.(?jpe?g|png|gif|webp)$ {
  add_header Vary Accept;
  add_header Cache-Control "private";
  expires 365d;
  try_files
    /wp-content/compressx-nextgen/$path.$ext$ext_avif
    /wp-content/compressx-nextgen/$path.$ext$ext_webp
  $uri = 404;
}
# END CompressX

These rules:

• 1. Detect browser support for WebP and AVIF.
• 2. Try to serve optimized images in /wp-content/compressx-nextgen/ if available.
• 3. Fall back to the original image if needed.

Step 4: Remove Conflicting Image Rules

Some Nginx configurations already include general location directives that handle static assets (CSS, JS, images, etc.). For example:

location ~* ^.+\.(css|js|jpg|jpeg|png|gif|webp|ico|eot|otf|woff|woff2|ttf)$ {
  expires max;
  ...
}

If you find similar rules, remove image extensions (jpg, jpeg, png, gif, webp) from the pattern so they don’t conflict with CompressX rules.

Step 5: Add Required MIME Types

Ensure Nginx recognizes WebP and AVIF file types by verifying the mime.types file includes:

image/webp webp;
image/avif avif;

If missing, add them within the types { ... } block (often stored in /etc/nginx/mime.types). This allows Nginx to serve .webp and .avif files correctly.

Step 6: Restart Nginx

After saving your configuration changes, restart Nginx so the new rules take effect:

systemctl restart nginx

Once restarted, Nginx will use your new rewrite rules to serve optimized images with CompressX.

What This Configuration Does

With these rules added:

• 1. Browsers that support AVIF or WebP will receive the corresponding optimized image.
• 2. The Vary Accept header ensures proper caching based on image format support.
• 3. Cache headers (expires 365d) help improve performance by instructing browsers to cache static image resources.

Need More Help?

If you encounter difficulties or have questions about configuring Nginx for CompressX, feel free to contact us.