Troubleshooting Broken WebP Images on Your Staq Hosted Site

WebP images are not loading correctly on your website, and you need to troubleshoot the issue. Here’s a step-by-step guide to help you resolve this problem.

Background

WebP images are stored exclusively on AWS S3 and not from the server. You must enable both the Staq’s caching and optimizer features in order to serve WebP images.

How to Enable WebP Image Serving

• Ensure caching and optimizer are enabled for your website in the Staq dashboard under the “Settings” section.
  • Enable caching.
  • Enable optimizer.

• Inside the Optimizer section of your Staq dashboard, navigate to the “Media” tab and enable the following options:
  • Serve next-gen images [WebP].
  • Rewrite media URLs.

Troubleshooting Steps

If WebP images are still broken after enabling the above settings, follow these troubleshooting steps:

• Verify that “Enable image conversion to WebP format” is enabled under the “Media” section of your Staq dashboard.

• Ensure that “Rewrite media URLs” is enabled under the “AWS Cloud” section of your Staq dashboard.

If the issue still persists

If the issue persists, try regenerating the images inside AWS S3 by following these steps:

1. Navigate to the “Media” section of your Staq dashboard.
2. Select the “Reoptimize” subtab.
3. Click the “Reoptimize” button to regenerate the images.

Updating image optimization setting to re-generate

If you received the message “No optimizable images found. Did you update the image optimization options?“, then, this is how to work around it:

Go back to the WebP image and change the default setting from 75% to something like 76%:

Then, go back to Reoptimize and the process will work.

Conclusion

Following these troubleshooting steps should help resolve the issue with broken WebP images on your Staq website. If you continue to experience problems, feel free to reach out to our support team for further assistance.