This means that if we wish to use JavaScript to load responsive images, we face a choice. This happens long after the pre-parser has raced through the HTML, kicking off image loads with wild abandon. You see, for a JavaScript to load made-to-measure image resources, it must first measure the page - which means waiting until page layout is complete. This results in an enormous 20% speed boost, and an intractable problem, when it comes to responsive images. In a nutshell, it tries to kick off as many image loads as possible before a page’s HTML has even finished parsing. Their main tool in that quest: the speculative pre-parser. Worst of all, though - as it turns out - the smart people that make browsers for a living have noticed that images account for 64% of the web’s bytes, and they have gone to Herculean lengths to get those bytes across the wire as quickly as possible. Second, we’re inserting JavaScript between users and our pages’ core content, which can be tricky to do well. First, it requires setting up some JavaScript infrastructure, which is a complexity of a different flavor. A smart bit of JavaScript can directly measure the browsing context, and - when paired with on-the-fly, server-side resizing - request a single, perfectly-sized resource every time, with little or no extra markup required.īut… There are some problems with this approach. Our last example offered the browser an array of options, allowing it to pick the best resource for the current context. One answer to that question - one that we have embraced and implemented - is: use JavaScript.

Javascript resize image client side