BugWP logo BugWP
Back to Community
Home / Community / Plugin → Autoptimize

Troubleshooting Images Not Loading with Autoptimize in Safari and Other Browsers

25 threads Sep 9, 2025 Plugin → Autoptimize

Content

If you've found that images on your WordPress site are not loading, appearing broken, or displaying incorrectly, you're not alone. A common thread in many support forums involves the popular optimization plugin, Autoptimize, and its interaction with other site elements. This guide will walk you through the most common reasons for these image issues and provide step-by-step solutions to get your visuals loading correctly again.

Why Do These Image Problems Occur?

Based on extensive community reports, image loading failures with Autoptimize are rarely due to a single cause. The issues often stem from conflicts between Autoptimize's optimization features and other parts of your site, such as your theme, other plugins, or even specific browser behaviors. Common culprits include JavaScript aggregation, the image optimization and lazy-loading features, and interactions with the integrated ShortPixel CDN.

Step-by-Step Troubleshooting Guide

1. Identify the Problematic Feature

The first and most crucial step is to isolate which feature within Autoptimize is causing the conflict. This is a diagnostic process.

  • Go to Settings → Autoptimize in your WordPress admin dashboard.
  • Disable features one by one, clearing your cache each time, and check if the images return. Start with these common offenders:
    • Image Optimization (ShortPixel CDN): Uncheck "Optimize Images"
    • Lazy-Loading: Uncheck "Lazy-load images"
    • JavaScript Optimization: Uncheck "Optimize JavaScript Code"
    • CSS Optimization: Uncheck "Optimize CSS Code"

When the images start working, you've found the source of the problem. You can then proceed with a more targeted solution below.

2. Common Solutions for Specific Issues

Issue: Problems with ShortPixel Image Optimization and CDN

If disabling "Optimize Images" fixes the problem, the issue is likely related to the ShortPixel integration.

  • AVIF Format in Chrome: There have been known issues with AVIF conversion for PNG files. Try disabling the "Automatically deliver the next-gen AVIF image format" option in the image settings.
  • General CDN Issues: If images are broken or returning errors, it could be a temporary CDN issue. The Autoptimize team has noted that ShortPixel often resolves these on their end. Keep the feature disabled for a short period, then re-enable it to see if the issue is resolved.
  • Exclude Specific Images: You can exclude images from optimization. In the "Image Optimization" tab, add a comma-separated list of exclusion strings (e.g., wpmfgalleryimg) to the "Image Optimization exclusions" field.
Issue: Lazy-Load Conflicts (Especially in Safari)

Many users report that lazy-loading causes images to not load at all in Safari, even if they work in Chrome or Firefox.

  • Disable Lazy-Load: The simplest fix is to disable lazy-loading entirely in Autoptimize's image settings.
  • Exclude Problematic Images: If you prefer to keep lazy-load active, try adding specific image classes or file paths to the "Lazy-load exclusions" field.
  • Theme CSS Conflicts: In some cases, aggressive CSS rules (especially those using !important) in your theme can interfere with how lazy-loaded images are displayed. You may need to adjust your theme's CSS.
Issue: JavaScript Aggregation Breaking Images

If toggling "Aggregate JS-files" fixes the problem, a JavaScript file is causing a conflict when merged with others.

  • Find the Conflicting Script: Open your browser's console (F12) and look for JavaScript errors. The error will often point to the problematic file.
  • Exclude the Script: In Autoptimize's "JavaScript Options" section, add the path to the conflicting script to the "Exclude scripts from Autoptimize" field. Common exclusions are theme-specific lazy-load scripts (e.g., wp-content/themes/flatsome/) or other optimization plugins.
  • Use Defer Instead: As an alternative to aggregation, you can try enabling "Defer jQuery and other non-aggregated JS?" or similar defer options.
Issue: AMP Pages Not Working

Autoptimize should not run on AMP pages. If it is, it can cause major display issues.

  • Ensure you are using a dedicated AMP plugin that correctly handles the tag or otherwise prevents Autoptimize from processing AMP content.

Final Checklist

  1. Clear All Caches: Always clear your Autoptimize cache, any page cache, and your browser cache after making changes.
  2. Test in Multiple Browsers: An issue that only appears in Safari might need a different solution than one affecting all browsers.
  3. Check the Browser Console: The browser's developer tools (Console tab) are your best friend for identifying JavaScript errors that cause images to break.
  4. Use a Staging Site: If possible, test these changes on a staging site first to avoid affecting your live site.

By methodically working through these steps, you can identify and resolve most image-loading issues related to Autoptimize. The key is to isolate the conflict and apply a targeted exclusion, allowing you to maintain the plugin's performance benefits without sacrificing your site's visuals.

Related Support Threads Support