This chapter is from the book
This chapter is from the book
This chapter is from the book
Responsive image strategies
They say there are only seven stories in the world, they just get told in different ways. In the same way, there are currently only three strategies for handling responsive images: fighting the browser, resignation, or going to the server.
Fighting the browser
Most front-end solutions attempt to fight the browser. They try their best to switch which image is loaded before the browser can download the wrong one.
This is an increasingly difficult task. Browsers want pages to load quickly, so they go to extreme lengths to download images as quickly as possible. Of course, this is a good thing—you want your site to load as quickly as possible. It’s really only annoying when you want to beat them to it.
Resignation
A few strategies out there basically admit defeat to the browser. Typically the approach is to load the small-screen image first, by default. Then, if necessary, load the larger image for larger screens as well.
Obviously this is not ideal. Larger screen devices will be making two requests where only one is needed. That’s something to avoid if possible. Performance is important on large-screen devices, too.
Going to the server
Finally, a few methods use the server and some form of detection to determine which image to load. This method doesn’t have to race the browser, because all the logic is executed before the browser ever sees the HTML.
However, going to the server is also not particularly future friendly. Maintaining information about every device that might request your content will become increasingly difficult as they proliferate (thanks to the decrease in the cost of manufacturing computing devices). Information about devices will also be less reliable as more and more devices allow content to be viewed in different ways: projections, embedded webviews, or on another screen entirely.