Images Fail to Load, net::ERR_CONTENT_LENGTH_MISMATCH

Question

Problem

When you load up a page on my site, often times one (or several) images (jpg files that I have saved from Lightroom and/or Photoshop) will not appear. It instead looks like a broken link (ALT description appears) but no image. Hard reload of the browser solves problem (e.g. all images load properly after a hard reload).

Error Message

Chrome displays an "ERR_CONTENT_LENGTH_MISMATCH" warning for all images it does not load. (Sometimes the image will flash quickly before going to what looks like a dead image)

Setup

Running latest version of Wordpress (4.2.2) on a Shared Host. Site is SSL (https) if that matters. Images are located in an image upload folder (nothing complex like Imagemagick, etc) on the host.

My Troubleshooting

I have replicated the issue from multiple locations using various ISPs on various machines (both Mac & PC) and with various browsers (Chrome & Safari) some of which are not using any ad-blockers.

What I've tried is the following:

• I asked the host if there was an issue on the server side. They claim no.
• I've tried resetting the functions.php file. No impact.
• I've disabled all plug-ins. No impact.
• I've hardkeyed in the meta charset as UTF-8. No impact.
• Checked if I'm using Gzip. I am not.
• Enabled Wordpress Cache plugin. No impact.
• Cleared .htaccess of all non-necessary redirects & commands. No impact.
• Replaced wp-admin and wp-includes folders from fresh install. No impact.
• Deleted Wordpress & Reinstalled from a Backup. No dice.
• I've put source code from pages that have this issue into a test.html file and the images seem to load up fine doing that.

My Thoughts & Questions

The images are 100-200kb each and sometimes there are a fair amount of them on the page. Is something timing out and then once I hard reload, everything show up because the timeout isn't tripped? That is the best random guess I can gather without understanding the issue perfectly.

Any ideas of things I can try? Should I delete the whole database and start again? Everything I know about computers is self-taught and server issues are not a strong point for me. Even if you don't know what it might be, could someone explain what a content length mismatch is in general terms?

Thanks much!

Answer 1

When you request data from a web server, it responds first with some information about the data (HTTP headers) and then with the data. One of these pieces of information, an HTTP header, is called Content-Length. It tells the client how much data it should expect to receive from the server. When your browser gets an image, the server's response (very simplified looks like)

Content-Length: 100000

< the image, 100000 bytes of data >

The client knows the request is complete when it has received the amount of data told by Content-Length. Until it receives in this case 100KB (100000 bytes), it considers the image, for example, to not be done loading.

If the server breaks the request before the client receives the data from the server, or if the client receives more data than it received, the client will throw some sort of error and assume the data to be corrupted/unusable and dispose of it. How this is handled can vary between browsers.

How did you upload the images to your website? Myself, I have encountered this problem in a situation where the file's supposed size was stored in the database, and this was used to set the Content-Length header. The file size in the DB wasn't correct for the file. HOWEVER, I know that WordPress does not store file sizes in the database; media uploads are simply represented by a URL.

This could also happen if the web server runs out of resources and can no longer fulfill your requests; you said you had lots of images per page. If you are on a really lousy shared hosting plan, it may be the case that the host imposes limits, or that the server simply can't handle the traffic of all the sites it hosts.