I'm having a weird issue with my platform where certain images just won't load in any Chromium-based browsers, even though they work fine in Safari and Firefox. The server responds with a 200 status code, but the downloaded bytes are 0. I've checked everything that looks fine, like range and headers. When I fetch the images directly from the storage, they load perfectly. I even did a full cache invalidation on the CloudFront distribution, but it's still not working. I suspect something might be off since I'm serving these images from an S3 bucket, but the content types seem correct. Has anyone experienced something like this before? I'd appreciate any insights on how to start troubleshooting this issue!
4 Answers
Double-check that the doctype of your images is correct. If they’re not matching their extensions, that could be why some browsers are having difficulties. Also, consider the User-Agent—it might be affecting how the browser handles the images.
It sounds like these images might not actually be JPEGs, despite their .jpg extensions. They could be HEIF images or something similar that's improperly named. Try converting them to proper JPEG format and re-uploading; that might do the trick!
Check your CloudFront logs for those requests. It might give you a clue about what’s happening. Sometimes the content length and range can be off, which could cause issues with loading in some browsers.
The logs looked fine initially, but I think I saw that the content length is just 1 byte. That's definitely suspicious!
I tried downloading these images and they just aren’t displaying correctly. There’s definitely an issue with the format—be sure to convert them to true JPEGs first. Here's an image to illustrate what I mean: [Image Format Issue](https://i.imgur.com/CWwIi27.png)
Thanks! I'll make sure to do that.
Thanks for the tip! We might be doing some manual compressing and it could be messing up the format. I'll check on that!