TOOLS MODULE — PERFORMANCE
WordPress Image Optimizer Plugin — AVIF, WebP, and Responsive Image Generation
Upload one image and get production-ready AVIF, WebP, and progressive JPEG variants at every breakpoint — with EXIF metadata, XMP sidecars, and SEO alt text. Deploy to WordPress pages from the admin panel with preview and rollback. No external services. No monthly API fees. Everything runs on your own server.
Automated Image Optimization for WordPress
Why WordPress Image Optimization Is Harder Than It Should Be
Modern browsers support AVIF and WebP, but WordPress does not generate them automatically. You upload a JPEG, WordPress creates a handful of thumbnail sizes, and that is all you get. Visitors on mobile devices download the same oversized file as desktop users. Your Core Web Vitals suffer because the browser never receives a next-gen format or a properly sized variant for the viewport.
Most image optimization plugins route your files through external cloud services. They charge per image, add latency to the conversion process, and create a dependency on third-party infrastructure. If the service goes down or changes its pricing, your optimization pipeline stops. Some plugins handle format conversion but skip responsive sizing entirely, leaving you to manage breakpoints manually or not at all.
LuperIQ's Image Optimizer takes a different approach. Every conversion runs on your own server using a Python processing engine with Pillow and piexif. Upload a single PNG or JPEG and the module generates AVIF, WebP, and progressive JPEG variants at every configured breakpoint width. EXIF metadata is embedded in JPEG outputs, XMP sidecars are written for each image, and all SEO fields — alt text, title, description, keywords — are stored in a dedicated database table. The admin Deploy tab lets you preview changes, deploy optimized images to your WordPress pages, and revert any deployment from the history table.
What Image Optimizer Does for Your Site
Five admin tabs. One upload. Every format and size you need.
Multi-Format Conversion
AVIF, WebP, and Progressive JPEG from one upload
Upload a PNG or JPEG and the Python processing engine generates three output formats automatically. AVIF delivers the smallest files for Chromium browsers. WebP covers Safari and Firefox. Progressive JPEG provides the universal fallback. Each format is saved in its own directory under /uploads/optimized-headers/ for clean file organization.
Per-Format Quality Controls
Separate sliders for AVIF, WebP, and JPEG
Set quality independently for each output format. Default values are AVIF 70, WebP 82, and JPEG 88 — tuned for the best balance between file size and visual quality. Override defaults per upload if a specific image needs higher fidelity or smaller size. Quality ranges from 30 to 100 for every format.
Responsive Breakpoint Generation
Configurable widths with automatic srcset
Define your breakpoint widths in Settings — default 480, 768, 1024, and 1280 pixels. Every uploaded image is resized to each width using Lanczos resampling. The deployment engine outputs HTML picture elements with srcset and sizes attributes so the browser downloads only the variant that matches the viewport.
SEO Metadata Per Image
Alt text, title, description, and keywords
Every image record stores alt text, title, description, and a comma-separated keyword list. EXIF metadata is embedded directly into JPEG outputs with ImageDescription, Artist, and Copyright fields. An XMP sidecar file is generated with Dublin Core title, description, and subject tags for each image.
Deploy to Pages with Rollback
Admin panel deployment with diff preview and full backup
The Deploy to Pages admin tab lists all images in ready status. Select an image, preview the exact content diff, and deploy via the admin form. The module detects multiple content patterns — IO hero markers, category header comments, category-image divs, and Gutenberg image blocks — and replaces only the hero section. Full page content is backed up in the database and as a JSON file. Revert any deployment from the history table. REST API and AJAX deployment endpoints are coming soon.
Image Library with Filtering
Browse, search, and manage all processed images
The Image Library tab shows every processed image with its slug, target page assignment, responsive widths, status, and upload date. Filter by target page to see only the images assigned to a specific section. Thumbnails render the 480-width JPEG variant for quick visual identification.
Before Image Optimizer
- WordPress only generates thumbnail sizes from uploads — no AVIF, no WebP, no responsive srcset.
- Cloud-based optimization plugins charge per image and depend on external API availability.
- You manually resize images in Photoshop or Figma for each breakpoint width.
- Deploying new hero images means editing page content by hand and hoping you do not break the layout.
- No EXIF metadata, no XMP sidecars, and no structured SEO fields attached to optimized images.
After Image Optimizer
- One upload produces AVIF, WebP, and progressive JPEG at every configured breakpoint automatically.
- All processing runs on your own server — no external services, no per-image charges, no API keys.
- The Python engine handles resizing with Lanczos resampling and writes all three formats in a single pass.
- Deploy to pages from the admin panel with diff preview, pattern detection, and full content backup with rollback.
- EXIF metadata is embedded in JPEG outputs and XMP sidecars are generated with Dublin Core fields for every image.
Who Benefits from Image Optimizer
WooCommerce Store Owners
Product category pages with hero images see the biggest improvement. Upload seasonal hero images, generate AVIF and WebP variants at four breakpoints, and deploy them to category pages from the admin panel without editing any HTML. Revert to the previous image from the deployment history if a promotion ends.
Content Publishers and Bloggers
Every featured image and in-content photo can be converted to next-gen formats with responsive sizing. Smaller file sizes improve page speed scores. EXIF metadata and XMP sidecars add structured data that image search engines index.
SEO and Performance Teams
Core Web Vitals scores improve when browsers receive AVIF or WebP at the correct viewport width instead of an oversized JPEG. The HTML picture element output includes fetchpriority high on hero images for optimal Largest Contentful Paint.
WordPress Developers
The module exposes a REST API with endpoints for upload, list, get, update, and delete. Deploy and rollback are available through the admin panel (REST API and AJAX endpoints for deployment are coming soon). The Python engine is extensible through the processing script. Database schema uses WordPress dbDelta migrations for safe upgrades.
How the Processing Engine Works
When you upload an image, the module moves the file to the /uploads/optimized-headers/src/ directory and launches a Python processing script inside an isolated virtual environment. The script uses Pillow for image manipulation, pillow-avif-plugin for AVIF encoding, and piexif for EXIF embedding. It loads the source image, converts it to RGB, and iterates over every configured breakpoint width.
For each width, the engine resizes the image using Lanczos resampling, then saves three variants: a progressive JPEG with optimize enabled at the configured quality level, a WebP using method 6 (slowest but best compression), and an AVIF at speed 6. EXIF data is embedded into the JPEG with ImageDescription, Artist, and Copyright fields using piexif. An XMP sidecar file is written to the /meta/ directory with Dublin Core title, description, and subject elements.
The processing results — formats created and sizes generated — are returned as JSON and stored in the optimized_images database table along with the image slug, original filename, target page assignment, and all SEO metadata fields. The image status moves from pending to ready. From there, the admin Deploy tab lets you preview and push the optimized image into your live WordPress page content.
Deployment and Rollback System (Admin Panel)
The deployment engine is designed for safety. Before modifying any page content, it stores the full original content in the image_deployments database table and writes a timestamped JSON backup file to the /uploads/optimized-headers/backups/ directory. The backup includes the page ID, title, slug, full content, modification date, and the image ID being deployed.
The engine detects four content patterns to find the hero image section: existing IO hero markers for idempotent re-deployment, explicit category header comment blocks, divs with a category-image class, and Gutenberg wp:image blocks at the top of the content. If none of these patterns are found, the new picture element is prepended — so existing content is never deleted. The HTML output uses the picture element with AVIF and WebP source elements, srcset for all widths, sizes set to 100vw, and an img fallback pointing to the largest JPEG variant with fetchpriority high.
Every deployment is recorded in the history table with the deploying user, timestamp, backup path, and rollback status. Reverting a deployment restores the original page content from the database backup, clears the post cache, and resets the image status from deployed back to ready. The entire preview-deploy-revert workflow is accessible from a single admin tab.
Technical Foundation
Frequently Asked Questions
What image formats does the module accept as input?
The module accepts PNG and JPEG uploads. Both formats are converted to RGB and processed through the Python engine to generate AVIF, WebP, and progressive JPEG outputs at every configured breakpoint width.
How does responsive image generation work?
You configure breakpoint widths in Settings — default values are 480, 768, 1024, and 1280 pixels. Each uploaded image is resized to every width using Lanczos resampling. The deployment engine outputs HTML picture elements with srcset attributes listing all widths and sizes set to 100vw, so the browser selects the optimal variant for the viewport.
What happens if AVIF encoding is not available on my server?
The Python engine attempts AVIF encoding using pillow-avif-plugin. If AVIF is not available on your server, the engine skips that format gracefully and generates WebP and JPEG variants. Your images will still be optimized — you just will not have the AVIF option until the plugin is installed.
Can I deploy the same image to multiple pages?
Each image record is assigned to a target page. The deployment engine maps target pages to WordPress page IDs and deploys to the corresponding page. To use the same source image on multiple pages, upload it once per target page with different target page assignments.
How does rollback work?
Every deployment stores the full original page content in the database and writes a JSON backup file. Clicking Revert in the deployment history table on the admin Deploy tab restores the backed-up content to the page, clears the post cache, and resets the image status from deployed back to ready. The reverted deployment is marked in the history table with a timestamp.
Does Image Optimizer work with the WordPress REST API?
Yes. The module registers REST API endpoints under the luperiq-image-optimizer/v1 namespace: POST /upload for processing new images, GET /images for listing all images, and GET-PUT-DELETE /images/{id} for individual image operations. REST API endpoints for deploy and rollback are registered but not yet implemented — use the admin Deploy tab for deployment operations. API-based deployment is planned for a future release.
What quality settings should I use?
The defaults — AVIF 70, WebP 82, JPEG 88 — are tuned for a good balance between file size and visual quality. For hero images where quality matters most, increase AVIF to 80 and WebP to 90. For thumbnails or background images, lower all values by 10-15 points to prioritize file size reduction.
Is Image Optimizer included in my LuperIQ plan?
Image Optimizer is available on the SUITE tier. Visit the pricing page to compare plans and see which tier includes the features you need.
Stop Shipping Unoptimized Images
Image Optimizer is included in LuperIQ SUITE. Upload once, get AVIF, WebP, and responsive JPEG variants — processed on your own server. Deploy to pages from the admin panel with preview and rollback.