A Shopify Plus site is experiencing inconsistent product image preview failures caused by Imperva CDN’s automatic image optimization converting images to JXL (JPEG XL) format, which only ~13% of browsers support.
The Problem:
Product image previews fail to load inconsistently on collection pages
Full product images load fine when clicked
All source images are in JPEG format
Previously switching to GoDaddy DNS/CDN resolved the issue, but it returned after moving back to Imperva
Root Cause Analysis:
Imperva is serving JXL files to browsers lacking support
CDN inconsistently compresses and labels files (sometimes JXL, AVIF, or base JPEG for the same URL)
Files are sometimes declared as JXL but served as different formats
Content-length mismatches suggest truncated or broken file delivery
Decreasing cache breaker values triggers “cache miss” and properly serves WebP from Cloudflare
Looking to get some solutions or related feedback about an issue my company’s experiencing.
Business has a Shopify Plus site with product images in JXL file format. Developer did some background and traced the file format being supplied by Imperva CDN. This CDN is compressing and sending the images to various browsers (Chrome, Firefox, Edge, etc.) that don’t support JXL files. This causes product pages not to load, but is very inconsistent on when loading actually fails.
Imperva is likely just the delivery network (CDN) for your images, not the original source. First, identify who manages or uploads your media, and coordinate with them to ensure images are in a widely supported format.
Opening this back up. Previously we tried to toggle the file compression on and off. Didn’t work for us consistently so we switched to GoDaddy.com for DNS needs (and I believe Shopify’s default CDN at that point) where the issue went away.
Recently had to switch back to Imperva for both DNS and CDN needs. Specifically, only product image previews are not loading, but only very inconsistently. Clicking on the image itself (being brought to the product detail page) and it loads just fine.
What information, or method to gather information, does the community recommend I take? Already tried comparing the script (CTRL + U) of a product with the issue vs without and I’m not seeing anything that stands out as the cause. Also, not an expert in looking at these scripts at all.
Any information that one can provide would be greatly appreciated.
Image above is a screenshot taken from a department’s product collections page. Only a few products image previews will not load, as shown above. No idea why this is inconsistent. All of our products images are in JPEG format.
Clearing our cache in the Shopify admin doesn’t resolve the issue. Any other insight here?
Note: The issue is only with image previews. Upon clicking the product itself, the image loads fine.
Hey @twhitfield! I can see what’s happening here. The issue is related to Imperva’s automatic image optimization converting your product images to JXL (JPEG XL) format, which has very poor browser support.
Here’s what’s going on:
JXL is a modern image format that only about 13% of browsers support (mainly some Firefox and Chrome variants). When Imperva optimizes your images, it’s serving JXL files to browsers that don’t support them, causing the broken previews. The inconsistency happens because:
Different image sizes/variants get cached differently
Collection thumbnails and full product images are served from separate cache layers
Some browsers may have partial support or fallbacks
The fix:
You need to access your Imperva dashboard and adjust the image optimization settings:
Log into your Imperva Cloud Security Console
Navigate to Delivery Settings or Content & Network Optimization
Look for Image Optimization or Automatic Image Compression settings
Disable JXL/JPEG XL format conversion, or ensure proper fallback formats are enabled
After making changes, purge your CDN cache completely (this is crucial!)
Also clear Shopify’s cache from Settings > Files
Alternative:
If you can’t find specific JXL settings, try setting image optimization to use only widely-supported formats like WebP (95% browser support) or stick with standard JPEG/PNG. Some CDNs have a “compatibility mode” for image optimization.
Interestingly enough, CDN compresses files (and marking them) inconsistently --sometimes they are shown as JXL, sometimes AVIF and sometimes base Jpeg, same URL.
Or, declared as JXL, but served as AVIF
When I click this line – I see that content-length is 29k?
But actual download (as per above screenshot) is only 1.5k, so either broken file, no image shown or browser stops rendering file at 1.5k seeing that it’s jxl?
Now when I do "open same file in a different tab – size matches, image shown.
Probably helps that I am on a Mac? Or declared as jxl, but served different format?
Also, i’ve noticed that if I decrease the cache breaker ?v=XXXXX value, then i receive a “Cache miss” and file is loaded as proper WEBP from Cloudflare (Shopify own) and shown properly (but still via Imperva).
And, obviously, Chrome sends the Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
header, but CDN decides to serve image/jxl
So, I’d raise a ticket with Imperva regarding their image compression.
Or you may be able to control this in your CDN settings…
