A friend and client recently brought up an issue with their website randomly reordering and switching images when pulled up on iPhone 5s and previous. It seemed that on Safari’s mobile browser, images were often not appearing or they were being swapped out for other images. For example, sometimes the social media icons would become a staff member’s face, or vice versa. Other times, a company logo would be where a section title would be, or an icon would be where the company logo was supposed to go. It was strange.

I began racking my brain for possible causes and solutions. First, I had to reproduce the problem, because it would be pretty difficult to diagnose it without that. We weren’t seeing it on iPhone 6, nor on any desktop version of safari or in any other browser. So Safari mobile was the culprit.

Opening up iOS Simulator in Apple’s XCode, we still weren’t seeing an issue with iPhone 6. However, the Wi-Fi we were using at the restaurant was slow, so we each pulled out our phones and set up Wi-Fi hotspots. This is where it got interesting.

Depending on the speed of the connection, the issue varied. Slower connections produced more image swapping.

Their site was running WordPress, so we disabled all the plugins to see if it was related to the plugins. This reduced the number of image swaps, but didn’t solve it completely.

At this point, I had eliminated several possible causes (it wasn’t our code or a plugin issue) and began to suspect that the issue had something to do with the amount of data that was being downloaded and the capability of the device performing that download.

A quick search on Google pulled up an article from someone experiencing image swapping back in iOS5. The author mentioned a term I had not heard of before, called “HTTP Pipelining”. He shared that Safari was beginning to implement it, and other browsers had begun as well.

Continuing the hunt, I came across an Apple Support Forum where folks were describing a similar issue with image placement in iOS8 Safari. They too suggested that it had to do with HTTP Pipelining.

They also mentioned that they experienced this issue more predominantly while connected via LTE, not Wi-Fi. Bingo. Our issue exactly and additional proof that this was the issue.

Current working theory: HTTP Pipelining in Mobile Safari is causing image swapping

I’m no computer scientist and don’t claim to have solved anything, but my current working theory regarding the images being switched on Safari’s mobile browser is this: HTTP Pipelining allows multiple HTTP requests to be placed at the same time, without waiting for the corresponding response.

So when a slower device or connection sends a request to load a large or image-heavy webpage, many requests go out and most come back, but they are being received in a different order than they are being sent, so an image at the top might pull in an image that is supposed to show up lower on the page, just because it was received in a different order.

Now, someone much smarter than I may come along and tell me that I’m wrong, in which case, I would gladly thank them and, if they could provide a better solution, buy them a coffee the next time they’re in my neck of the woods.

Until then, this is my theory and my solution is to decrease the size of your webpage. Safari doesn’t do this with every webpage, or else the issue would be more widely experienced and probably would have been solved by now (since it looks like it’s been an issue since at least iOS5).

You can read my article for suggestions on how to reduce the size of your webpage. If you’re running into an issue with image swapping randomly in iOS mobile Safari, Steck Insights Web Design would be glad to assist you – click here now to contact us or leave your comments to share your thoughts on the issue.