Responsive Images, etc.

Media is playing an increasingly big role in RWD methodology evolution. Only 2 years ago there were battles between client- and server-side fans of media optimization. Then the time came for RESS as a mix of responsive (at the time was reserved for client side) and adaptive (server-side) strategies.

In our learning of RWD you can see that more professional and industry-level idea of responsiveness without creating and supporting a great number of specialized sites and their components requires additional serious efforts when it comes to multimedia. Making your fixed width video and image files resize to fill any mobile device can seem a lot more complicated than using the basic general methods of RWD. And you’ve touched only images… Video, for example, is a bigger problem since is capable to hamper user experience much more. It includes more parameters to consider (like bit-rate, aspect ratio, etc.).

Some directions include control of the loading of multiple sized images via the choice by special analysis/information, like JavaScript that determines the specific features of the browser and the device with further requesting the proper media files. Others get maximum quality media (like images twice the required quality) and then simplify them for the screen (like shrinking images down).

 

With media queries getting better and better support in modern browsers sensing the local situation and ordering the proper image is not that difficult… if it is done in CSS where the image is placed as a background image order. But if you have to use the src attribute in HTML where you have to indicate a particular source – then JavaScript injection of that statement is recommended (JavaScript can modify the HTML on the fly in its DOM – model). Placing special cookies with information about the local context might serve as another way of informing the server (letting it do some work in analyzing cookies) what and how to serve.

More advanced combinations of server intelligence with browser figuring out the local context and sending some information to the server the solutions are improving. Industrial level scaling of serving video streams and multiple images already have to use cloud and grid intelligence and scalability instead of just servers (see Akamai as an example).

At the same time there are undergoing efforts in enhancing HTML5 allowing for some solutions to the problem,  its discussion, and more on picturefills.

There is a vast area of literature on the topic but at least read this (which is a couple of years old showing the ideas of that time) and this ( a bit later), this, and Blink/Gecko implementation. Look at src-N discussion.