Part of responsive design includes customizing content based upon the network speed and screen size.
| Screen Size | Connection Speed | Send Him |
|---|
| 5-inch smartphone | 3-G | Small Images |
| 9-inch tablet | 4-G | Medium Images |
| 24-inch LCD Monitor | FIOS | Large Images |
But how does one measure the screen size and network speed?
Here is how:
The client requests an image, and measures transfer time. It reports back to the server (by AJAX) the screen size, file name, and the transfer time.
The server measures the file size (bytes), and divides by the network time (ms) and multiplies by 8 to calculate network speed (kbps). It stores this information in session, and reports back to the client by AJAX.
Transfer time includes overhead like initiating the connection, DNS Lookup etc, which is why a 500k image does not take 10x the transfer time of a 50k image. My browser reports a transfer time of 77ms for a 1px file, so I estimate that to be the overhead with my network topology.
Larger file sizes will yield more accurate and meaningful test results, so a complete implementation might first transfer a small file to get a rough estimate of network speed and overhead, and then transfer a larger file to get a more accurate measurement.
See the Result Stored in PHP Session