guides

Automatic Image Optimization: Next-Gen WebP, AVIF & Responsive Srcset

Slash image payload sizes by up to 85% with automated next-generation format conversion, responsive image scaling, and visual quality preservation.

📋This is an interactive step-by-step HowTo guide with 3 verified installation steps.

Why Images Are the #1 Cause of Slow Page Loads

Uncompressed JPEG and PNG images account for over 60% of total webpage payload on typical WordPress sites. High-resolution images slow down mobile Largest Contentful Paint (LCP) times and consume excessive bandwidth.

How Nimbica Optimizes Images Automatically

During the AI build, Nimbica scans every image reference in your media library and theme content, executing a comprehensive multi-step pipeline:

Next-Gen Format Conversion: Converts JPEGs and PNGs into modern WebP and AVIF formats with perceptual lossless compression.
Responsive srcset Generation: Automatically generates scaled versions (320w, 640w, 960w, 1200w, 1920w) so mobile devices never download desktop-sized assets.
Automatic Dimension Injection: Injects explicit width and height attributes onto all <img> tags to completely eliminate Cumulative Layout Shift (CLS).
Priority LCP Hero Preloading: Automatically marks above-the-fold hero images with fetchpriority="high" and preloads them in <head>.

📋 Verified Execution Steps (3 Total Steps)

11. Verify Media Optimization in Dashboard

Navigate to Nimbica Dashboard ➔ Site Settings ➔ Media Optimization. Ensure "Next-Gen Format Conversion (WebP/AVIF)" is enabled.

22. Configure Quality Threshold

Select your preferred compression quality (Recommended: Smart Balanced at 82% quality for 80%+ file reduction with zero visible artifacting).

33. Deploy Build & Inspect Elements

Run a build. Open browser DevTools, inspect any image, and confirm it is rendered within a responsive picture or modern srcset tag.

Was this documentation page helpful?

Last updated on 2026-09-07