I’m encountering a peculiar issue in my web application where I use React.js for the frontend and PHP for the backend.

The image upload and processing workflow (cropping, format conversion, etc.) works perfectly fine. However, I’ve noticed a strange behavior when trying to save the processed image:

• If I use PHP’s imagejpeg() to save the final image, everything works
  as expected. My custom JSON response from the backend is correctly
  received by the React frontend.
• The problem arises specifically when I attempt to save the image
  using either imagewebp() or imageavif() in PHP. In these cases, the
  React frontend unexpectedly reloads the entire page before my custom
  JSON response from the backend is received

.
To isolate the issue, I performed a simple test using PHP’s die() function:

1. Placing die(); immediately before the imageavif() or
   imagewebp() line in my PHP code prevented the page reload,
   indicating that the initial request was successful up to that point.
2. Moving die(); to immediately after the imageavif() or
   imagewebp() line resulted in the unexpected frontend reload,
   strongly suggesting that the issue is directly related to the
   execution of these image saving functions.

I suspect there might be an issue with how the browser handles the response when the image is saved in WebP or AVIF format, or perhaps a configuration issue on the server. I’ve already tried setting the correct MIME types for WebP (image/webp) and AVIF (image/avif) in my .htaccess file, but the problem persists.

Has anyone else experienced a similar issue or have any insights into why imagewebp() and imageavif() might be causing this unexpected frontend reload in my React application? Any suggestions for debugging or resolving this would be greatly appreciated.