Why CompressX Uses image_name.png.avif

1. The Original Extension Must Be Preserved

In WordPress and on the server filesystem, files are identified by their full filename, not just by the basename.
For example:

image_name.png
image_name.jpg

These are two completely different files with a same basename image_name.
If CompressX removed the original extension and generated only:

image_name.webp
image_name.avif

This creates filename ambiguity and can lead to:

• incorrect source file detection.
• wrong rewrite mapping.
• broken media associations.
• unreliable fallback behavior.
• wrong image delivery in some cases.

By keeping the original extension in the optimized filename:

image_name.png.avif

CompressX can always preserve a clear one-to-one relationship between the source file and the converted file.

2. WordPress Stores the Original URL in the Database

WordPress stores image references in the database using the original file URL, such as:
image_name.png
That exact URL can be used across the entire site, including:

• 1. themes
• 2. plugins
• 3. page builders
• 4. post content
• 5. custom fields
• 6. external integrations

If the optimized filename were changed to: image_name.avif
WordPress would not automatically understand that it should replace the original URL.
That would often result in:

• broken image references
• 404 errors
• compatibility issues
• unexpected behavior in third-party plugins

Step 1: Access Media Replacement

There are two ways to open the Media Replace page in CompressX.
You can use any of the following entry points, depending on your workflow.

Option 1: From “Edit Media” (Attachment Edit Screen)

If you open an attachment in WordPress and click Edit Media (often used together with the WordPress image editor):

• 1. Go to Media Library and click Edit under an image.
• 2. On the Edit Media page, locate the CompressX Replace Media panel on the right.
• 3. Click Upload & Replace Media File to open Media Replace.

Use this entry point when you are already editing media details or using the WordPress image editor workflow.

Option 2: From Media Library (Direct “Media Replace” Link)

You can also open Media Replace directly from the Media Library:

• 1. Go to Media Library.
• 2. Switch to List View (or use the available quick actions).
• 3. Click the Media Replace link for the target media item.

This is the fastest entry point when you already know which file you want to replace.

Step 2: Review Current Compression Settings

The Current Compression Settings shown here reflect your global configuration in the Image Optimization page.
To change how images are optimized during replacement, update the settings in Image Optimization first. Media Replace will then use those settings automatically.

Step 3: Configure Replacement Options

Auto Re-optimize After Replacement

When enabled, CompressX will:

• Regenerate all WordPress-generated thumbnails
• Re-apply compression and optimization automatically

This option is recommended for most use cases.

Thumbnail Generation Strategy

Choose how thumbnails should be regenerated:

• Use current default sizes and fill missing ones (Recommended)
  Uses the current WordPress thumbnail settings and generates any missing sizes.

  Example:
  An image was originally uploaded when WordPress generated a 640×480 thumbnail.
  Later, your theme changed and the current thumbnail sizes are 300×300 and 1024×768, while 640×480 is no longer part of the default sizes.
  When replacing the image with this option selected:

  • Thumbnails are regenerated for the current sizes (300×300, 1024×768)
  • The previously used size (640×480) is also regenerated if it is still referenced by existing pages

  This ensures both current layouts and existing references continue to work correctly.

• Match original thumbnail sizes
  Regenerates thumbnails strictly based on the original image’s thumbnail sizes.

  Example:
  An image originally had thumbnails generated at 640×480 and 800×600.
  Even if the current WordPress settings now define different sizes, only 640×480 and 800×600 will be regenerated, and no new sizes will be created.

Select the option that best matches your layout requirements.

Step 4: (Pro) Configure Temporary Version Retention

This step is available in CompressX Pro.

• Keep temporary versions of previously replaced images
• Set how many versions are retained
• Define how long they are kept before automatic removal

Temporary versions allow you to restore a recently replaced image if needed.

Step 5: Review Current Media Information

The Current Media section shows details of the existing image.

Step 6: Upload the New Media

In the New Media section, click to upload or drag & drop a new image.

Important: File Format Requirement
The replacement image must use the same file format as the original media
(e.g. JPG → JPG).

Step 7: Complete the Replacement

After uploading the new image, confirm the settings and click Replace Media.
When the process completes, the page will automatically redirect to the Media Editor page of the attahcment.

Tips & Best Practices

• Use images with similar dimensions to avoid layout shifts
• Keep Auto Re-optimize enabled unless you have a specific reason not to
• Allow time for CDN or browser cache updates
• Use temporary versions for quick rollback, just in case, not long-term storage

You’ll learn which parts of the media remain unchanged, what gets updated behind the scenes.

What stays unchanged?

When you replace a media file:

• 1. Media URL remains the same.
• 2. Attachment ID remains the same.
• 3. Existing references in posts, pages, and themes continue to work.

What gets updated?

• 1. The original image file is replaced.
• 2. WordPress thumbnails are regenerated.
• 3. Optimized formats are re-created (PNG / JPG / WebP / AVIF).
• 4. Compression settings are applied again automatically.

Designed for real-world workflows

Media Replace is especially useful for:

• 1. Updating images already used across multiple pages.
• 2. Fixing incorrect or low-quality uploads.
• 3. Replacing images while keeping CDN and cache logic intact.
• 4. Re-optimizing images with new compression strategies.

Media Replace Overview

Media Replace Overview

Media Replace (Free vs Pro)

Media Replace is included in the Free version and CompressX Pro plans.

Media Replace Interface Overview

The Media Replace screen is divided into five main sections, each designed to guide you through a safe and controlled replacement process.

1. Current Compression Settings

This section shows the compression configuration that will be applied after the media is replaced.
It includes:

• 1. The active compression mode (e.g. General or Smart).
• 2. Enabled output formats (WebP, AVIF).
• 3. Selected thumbnail sizes.

These settings determine how the newly uploaded image and its thumbnails will be optimized.

2. Replacement Options & Thumbnail Strategy

This section controls how the replacement is processed.
It includes:

• 1. Use current WordPress default sizes and fill missing ones (recommended).
• 2. Match the original image’s thumbnail sizes.

These options help ensure visual consistency and compatibility with your existing layout.

3. Temporary Version Retention (Pro)

This section is available in CompressX Pro.
It allows you to:

• 1. Keep temporary versions (1, 2 or 3 versions) of previously replaced images.
• 2. Configure how many versions are kept for a while.
• 3. Set how long they are retained (1 day, 3 days or 7 days).

Temporary versions provide a short-term rollback option and are automatically removed after expiration.

4. Current Media Information

This section displays details of the existing media file, including:

• 1. Image preview
• 2. Dimensions
• 3. File format
• 4. File size
• 5. Optimization status
• 6. Number of generated thumbnails

5. New Media Upload

This is where you upload the new image to replace the current one.

• 1. Click to upload or drag & drop a file.
• 2. The new file will replace the existing media without changing the URL.
• 3. For best results, upload an image with a similar width (or slightly wider) than the original.

Once uploaded, the replacement process will follow the settings defined above.

Using Media Replace

How to use Media Replace

Environment & Settings

System Infomation

CompressX Settings

Example Image

The image used in this comparison is licensed for free commercial use. You can download the image here

Thumbnial Sizes in This Environment

This comparison is generated in a WordPress site using the Divi theme.
All thumbnail sizes shown below are generated by WordPress and Divi by default.

The Result

Savings are calculated by comparing WebP files to the original file at the same image size.

Summary

This comparison is designed to illustrate why a size-aware Smart Compression strategy performs better in common scenarios.
All results are generated in a typical WordPress environment using the same image, settings, and parameters. Anyone can reproduce these results under the same conditions.

Why We Do Not Recommend Removing Original Images

1. Original Images Are the Source of All Thumbnails

All thumbnails and custom image sizes in WordPress are generated from the original image.
Once the original image is removed:

• 1. Thumbnails cannot be regenerated.
• 2. Newly registered image sizes will never be created.
• 3. Image editing (crop, rotate).
• 4. Media workflows (Like thumbnail regeneration) become permanently limited.

2. Original Images May Still Be Used on the Frontend

Even if thumbnails exist, the original image may still be used in:

• 1. Lightbox or zoom views.
• 2. Full-size image links.
• 3. Certain themes, blocks, or scripts.
• 4. Image downloads and sharing.

Deleting the original image can lead to broken frontend behavior.

3. Removing Original Images Is Irreversible

Once removed:

• 1. Original resolution and metadata are lost.
• 2. Thumbnails cannot fully replace the original.
• 3. Future improvements or higher-quality regeneration are impossible.

This action cannot be safely undone.

The Safe and Recommended Way to Save Disk Space

Delete Thumbnails Instead of Original Images

CompressX provides a safe, reversible method to reduce disk usage by removing generated thumbnails while keeping original images intact.
Why This Is Safe

• 1. Thumbnails are derived files, not source files.
• 2. They can always be restored from the original image.
• 3. WordPress does not require all thumbnails to exist at all times.

1. Managing Images and Thumbnails

CompressX (Free and Pro) converts JPG and PNG images into WebP or AVIF formats.

• 1. Original full-size images are retained (Default).
• 2. Original JPG/PNG thumbnails can be automatically deleted after conversion (Pro only) (Optional). This is the most effective way to reduce storage usage

2. Recommended Optimization Workflow

For large media libraries, it is recommended to prepare before starting optimization.

Backup Before Optimization

Since the library size is large, perform a full website backup before starting.
WPvivid (It’s free) can be used for this purpose.

Adjust Processing Speed

Control how fast images are processed to balance optimization performance and server resource usage.
Lower processing speed helps reduce CPU and memory consumption, especially on shared or limited hosting environments.

Recommended settings:
Go to: CompressX → General Settings → Queue Throughput

• High-performance servers
  Select 10 or 20 images per batch to speed up processing.
• Standard servers
  Select 1 or 5 images per batch to prevent timeouts.

3. Run Optimization in the Background (Pro only) (Optional)

The optimization process can be run in the background, so the browser tab does not need to remain open.
Detailed instructions are available here: Bulk Optimization

What Is Smart Compression?

Purpose:
Smart Compression is designed around how different image sizes are actually used on a website.

• Small images (e.g. ≤50KB) need to stay sharp.
  Even slight quality loss can be noticeable at small sizes.
• Medium images (e.g. 50KB< Size< 4MB) are often shown inline and loaded frequently.
  Smart Compression balances visual quality and file size to improve page loading speed.
• Large images (e.g. ≥4MB) usually take up the most disk space.
  They can be compressed more efficiently to save storage, while still remaining visually sharp and fast to load.

Instead of using a single fixed quality for all images, Smart Compression dynamically adjusts compression quality based on image size.

When Should You Change These Settings?

Default Settings Are Enough If:

• You run a typical website
• You want good quality with minimal configuration
• You don’t handle extremely large images

Consider Custom Settings If:

• You host very large images (photography, portfolios)
• You want aggressive optimization for performance
• You need different quality behavior for WebP and AVIF

Smart Quality Rules

Smart Compression is controlled by a set of rules that define how compression quality changes as image size increases.

1. Size Threshold

What Is the Size Threshold?

The Size Threshold defines the split point between:

• Fixed compression (small images).
• Adaptive compression (large images)

Mathematica:
Images ≤ Threshold → Fixed quality
Threshold ≤ Images < Threshold → Adaptive quality
Images ≥ 4MB → Fixed quality

2. Small Images (≤ Threshold)

How Small Images Are Compressed?
Images smaller than or equal to the threshold use a fixed compression quality.
The 4MB threshold is based on practical testing and real-world usage feedback.
Images larger than this size usually benefit from stronger compression with little noticeable quality loss.

**This value may be fine-tuned over time.
Settings

• WebP Fixed Quality.
• AVIF Fixed Quality.

Why Fixed Quality?

• Prevents visible degradation on icons, logos, and UI elements.
• Ensures consistent visual appearance.

These values are applied directly without any adaptive adjustment.

3. Larger Images (> Threshold)

Large images use adaptive compression.
Compression quality decreases automatically as image size increases.

How Quality Changes?
Quality decreases smoothly from 95 to 28 (changeable) between the threshold and 4MB.
This means:

• Smaller large images retain higher quality.
• Larger images receive stronger compression.

Threshold → 4MB
Quality: 80 → 35
Lower quality = smaller file size

4. Quality ≥ 4MB

Maximum Compression for Very Large Images
Images larger than or equal to 4MB use the minimum quality value.

• This value is controlled by the slider.
• Ensures very large images are compressed aggressively.

This prevents oversized images from harming page performance.

5. WebP and AVIF Differences

Smart Compression allows separate control for:

• WebP
• AVIF

Each format has its own:

• Fixed quality
• Adaptive quality range
• Minimum quality

This reflects real-world differences in compression efficiency between formats.

6. Visual Quality Curve

The chart at the bottom visualizes how compression quality changes as image size increases.

What the Chart Shows:

• X-axis: Image file size
• Y-axis: Compression quality
• Separate curves for WebP and AVIF

Why the Curve Matters:

• Confirms that quality decreases gradually
• Helps users understand compression behavior
• Ensures there are no sudden quality drops

Summary

Smart Compression provides:

• Fixed quality where it matters
• Adaptive compression where it’s safe
• Clear, predictable behavior
• Full control for advanced users

It is designed to work well out of the box while remaining fully configurable when needed.

How CompressX Pro Works in Multisite

CompressX Pro operates at the network level in WordPress Multisite installations.
Once activated by a Network Administrator, all optimization rules and settings are managed centrally.

After network activation, CompressX Pro provides a unified dashboard that controls compression quality, Next-Gen image formats, and CDN delivery for every sub-site simultaneously.

Core behavior includes:

• Centralized optimization management from Network Admin
• Global WebP and AVIF configuration
• Unified CDN integration
• Network-wide performance optimization
• Site-level Media Library isolation

Network Admin vs Site Admin Permissions

In Multisite environments, CompressX Pro permissions are managed exclusively at the Network Admin level.

Permission behavior:

• Network Admin (Full Access)
  Can manage licenses, optimization settings, CDN integration, tools, statistics, and system configuration.
• Site Admin (No Access)
  Cannot view or modify CompressX Pro configuration panels or Pro features.

Media Storage Behavior in Multisite

CompressX Pro follows native WordPress Multisite media storage architecture and does not modify default file structures.

Storage behavior includes:

• Each sub-site stores media files in its own uploads directory.
• Optimized image versions (WebP, AVIF, thumbnails) remain linked to the originating sub-site.
• No automatic sharing of optimized images between sub-sites.
• All optimization operations respect site-level boundaries.

Common Multisite Use Cases

CompressX Pro supports a wide range of Multisite deployment scenarios.

Common use cases include:

• Agencies managing multiple client websites from a single WordPress installation.
• SaaS-style platforms offering site creation for users.
• Content networks operating multiple branded sub-sites.
• Staging and testing environments with shared optimization rules.

Centralized optimization simplifies management while maintaining consistent image performance across large networks.

Summary

CompressX Pro Multisite Support provides a scalable, centralized solution for managing image optimization across your network.

Key benefits include:

• Unified WebP and AVIF delivery
• Centralized optimization control
• Consistent performance standards across sub-sites
• Reduced storage usage
• Simplified Multisite administration

With a single configuration, every sub-site benefits from faster image delivery, modern image formats, and optimized performance.

Step 1: Open a Page Containing Images

Visit any front-end page on your website where images are displayed (posts, pages, products, etc.).

Step 2: Open Browser Developer Tools

• 1. Right-click on the page and select Inspect, or
• 2. Use keyboard shortcuts:
  Windows / Linux: F12 or Ctrl + Shift + I
  macOS: Cmd + Option + I

Step 3: Check the Network Tab

• 1. Switch to the Network tab in Developer Tools.
• 2. Refresh the page to reload all assets.
• 3. Filter by Img (images).

Step 4: Confirm Image Format

Click on any image request and check:

• 1. The Type column, or
• 2. Response Headers → Content-Type

If you see:

• webp
• avif

then WebP or AVIF is successfully taking effect.