Performance

Audit image formats for a WebP or AVIF conversion project

A scenario prompt for prioritizing a 3,200-image media library for next-gen format conversion, weighing plugin-based conversion against server-level rules, and handling the fallback and transparency edge cases.

Works with Claude / GPT560 uses 4.3

The prompt

performance-webp-avif-image-audit
A site's media library has around 3,200 images, mostly JPEGs averaging 400KB each,
none currently served as WebP or AVIF. PageSpeed Insights flags "Serve images in
next-gen formats" as a 2.4s potential savings on the homepage alone.

STACK: [Divi theme with several background images set via the builder's custom CSS
rather than the media library, ShortPixel installed but not yet configured to serve
next-gen formats, Apache hosting with .htaccess access]
CONSTRAINT: [site needs to keep working correctly in older Safari versions that have
partial or no AVIF support]

Build the audit and rollout plan like a consultant prioritizing real impact, not just
"convert everything":
1. Prioritize by page-weight impact first: the homepage hero and above-the-fold
   product images matter far more here than the 2,800 images sitting in old blog posts
   nobody visits, so the conversion order should follow traffic, not just file count.
2. Recommend WebP over AVIF as the default target given the Safari constraint, with
   AVIF only where a `<picture>` fallback chain to WebP to JPEG is actually in place,
   not just serving AVIF and hoping the browser copes.
3. Give the two-track approach: configure ShortPixel to auto-serve next-gen formats
   with fallback for images in the media library, and separately identify the Divi
   background images set via custom CSS, which ShortPixel's automatic conversion won't
   touch since they're not `<img>` tags in the media library.
4. Note the transparency edge case: PNGs used for logos or icons with transparency
   need to go through WebP (which supports alpha) rather than a blanket JPEG-style
   conversion that would flatten transparency to a solid background.
5. Distinguish plugin-level work (ShortPixel settings, bulk optimization by folder or
   date) from anything that would need Apache-level rules in .htaccess for serving
   pre-converted files without a PHP fallback layer, which is a server-config change,
   not a plugin setting.

The number that sells this project internally is the PageSpeed savings estimate, but the actual work order should follow where the bytes and the traffic actually are: a hero image on the homepage matters more than a thousand untouched blog thumbnails. This prompt is built to keep that priority straight, and to catch background images a media-library-only plugin will silently skip.

Note whether your builder sets any images via custom CSS or inline background-image styles rather than the media library, that’s the detail most audits miss.